57

I have a page index.php with 3 Bootstrap tabs in it, and for each tab I am generating its content after user clicks on it.
For example:

  • when page is loaded I will execute SQL query that will get data from database only for first tab.
  • when user clicks on the second tab, I am executing a query that will take data and display it in selected tab.

Is this good approach? Is Google going too see all that data when it index the page containing all this tabs? I do not want to pull all data at once because of performance issues.

Here is my sample code, so please tell me if this is a good approach:

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 am afraid that search engines will not see second and third tabs contents. Or at least they will not relate them with index.php page. Am I wrong?

Ramesh
  • 1,663
  • 2
  • 20
  • 30
offline
  • 1,549
  • 21
  • 33
  • 1
    possible duplicate of [Does Google crawl AJAX content?](http://stackoverflow.com/questions/2434445/does-google-crawl-ajax-content) – Ahmad Alfy Jul 28 '15 at 18:52

4 Answers4

102

No, we (Google) won't see the content behind tabs iff 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 Search Console (former Webmaster Tools); read more about the feature in our post titled Rendering pages with Fetch as Google.

methode
  • 5,060
  • 2
  • 28
  • 42
  • 8
    What about content that is already in the HTML but hidden (because it's behind a tab)? – Valentin Jul 27 '15 at 16:26
  • 21
    That's perfectly fine. We will index that but the content's weight will be lower since it's hidden. – methode Jul 27 '15 at 16:29
  • 2
    @methode will iframe content be indexed? – sites Jul 29 '15 at 03:08
  • 1
    Yes, iframe content typically is brought in to the parent page – methode Jul 29 '15 at 03:09
  • What is, if "Fetch as Google" does show the wished page but nothing of this text will be indexed? - In my situation, "Fetch as Google" shows correct results for each URL I entered in the sitemap I uploaded to Google and in server log of my web server, I see that googlebot has visited each link. But I still do not find anything on my page and "Content Keywords" does still display "no data available". What does Google really index? The content of the page shown at "Fetch as Google" or the 'html snapshot' got from web server? – badera Dec 30 '15 at 08:35
3

The best aproach is to design the website to work without javascript, and just replace all your anchor elements that work with ajax to pass a GET variable to your web controller, so it knows to return just the html to be inserted with javascript.

markush
  • 31
  • 1
1

If you are using JS/AJAX, (I don't really see any, but I can't think of a better alternative) you are going to have a hard time getting Google to index your pages. Google has a good documentation on this that has helped me in the past on projects with similar goals.

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

Is it really that big of a deal to not load the content until the tab is clicked? Unless you are working with an un-cacheable constantly updating database and massive HTML output that would create a long flash of unstyled content I would say splitting the tabs view code is somewhat trivial.

tomfordweb
  • 141
  • 9
  • 3
    We don't recommend that approach anymore. We're able to render the pages the same way a browser would, and adding the complexity of prerendering is not necessary anymore, at least for Google. – methode Jul 27 '15 at 16:33
  • @methode what is the recommended approach then? Why is the documentation still there? – Salman A Aug 02 '15 at 17:07
  • The documentation is still there because we're running indexing experiments to make sure we don't break the world when we remove the support for _escaped_fragment. Once we're completed (likely this quarter), we're going to remove the documentation as well, and publish a blogpost which essentially will say "do whatever is easier for you, just not escaped_fragment" – methode Aug 02 '15 at 17:20
0

Maybe this can help:

If your problem is performance, it's maybe because you have strong DB queries or a shared server. If not, please ignore this.

When loading the whole page, put a "fake" HTML code in each tab. Try to build the HTML code shaped as the real code that is loaded when each tab is clicked. Put all of this inside an invisible DIV. Each time the page is loaded, put also some random data (maybe a 16-chars random-generated string). In this way I think Google will spider your data more frequently (this doesn't happen for static content).

Regards.

Gorka Llona
  • 124
  • 4