Best IT Recipes

Are search engines to see my dynamically generated content on Bootstrap tabs?

I have an index.php page with three Bootstrap tabs in it, and for each tab I create its contents after the user clicks on it.
For example:

  • When the page is loaded, I will execute an SQL query that will receive data from the database for the first tab only.
  • When the user clicks on the second tab, I execute a query that will receive data and display it on the selected tab.

Is this a good approach? Is Google going to see all this data when it indexes a page containing all of these tabs? I do not want to retrieve all the data at once due to performance issues.

Here is my sample code, so please tell me if this works:

index.php file:

 <!DOCTYPE html> <html> <head> <title>Tabs demo</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div class="container"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Home</a></li> <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <h3>HOME</h3> <p>Some content.</p> </div> <div id="menu1" class="tab-pane fade"> <?php $model = [ 0 => ['title' => 'First item', 'content' => 'Some first content'], 1 => ['title' => 'Second item', 'content' => 'Some second content'] ]; ?> <?php foreach ($model as $data): ?> <h3><?= $data['title'] ?></h3> <p><?= $data['content'] ?></p> <?php endforeach ?> </div> <div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3> <p>Some content in menu 2.</p> </div> </div> </div> <!-- jQuery library --> <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>

I’m afraid that search engines will not see the contents of the second and third tabs. Or at least they won’t link them to the index.php page. I'm wrong?

+57
javascript seo search-engine twitter-bootstrap tabs
Jul 26 '15 at 14:06
source share
4 answers

No, we (Google) will not see the content behind the tabs if the content under the tab is dynamically generated (i.e. not just hidden).

You can also see what we see using Fetch as Google in the Search Console (former webmaster tools); Learn more about this feature in our post titled Rendering Pages Using Fetch Like Google .

+101
Jul 26 '15 at 15:49
source share
— -

It's best to design a website to work without javascript and just replace all of your anchor elements that work with ajax to pass the GET variable to your web controller, so it knows that it only returns the html that needs to be inserted using javascript.

+3
Jul 28 '15 at 9:21
source share

If you use JS / AJAX, (I really don't see anything, but I can't think of a better alternative), it will be difficult for you to get Google to index your pages. Google has some good documentation on this, which has helped me in the past in projects with similar goals.

https://developers.google.com/webmasters/ajax-crawling/docs/learn-more

Is it really a big deal to not download content until the tab is clicked? If you don’t work with a constantly updated database that does not require caching and massive HTML outputs that would create a long flash of uneven content, I would say that separating the code for presenting tabs is somewhat trivial.

+1
Jul 27 '15 at 16:18
source share

Perhaps this may help:

If your performance problem is probably because you have strong database queries or a common server. If not, please ignore it.

When loading the entire page, place the "fake" HTML code on each tab. Try to create HTML code in the form of real code that loads when you click each tab. Put it all inside an invisible div. Each time a page loads, also put some random data (possibly an arbitrary 16-character string). Thus, I think Google will distribute your data more often (this does not happen for static content).

Sincerely.

0
Jul 29 '15 at 1:22
source share


More articles:


All Articles