Google Not Displaying Hidden Content - Solution ?

[shaunm]

Hi All,

It looks like I'm late to the party. Of late, I notice that Google is not showing my home page when I search for the content hidden behind tabs.

These tabs shows 3 different products and very minimal bullet points upon mouse over. This new design was proved to improve the user engagement on the site and enhance the user experience. That's it.

Not sure why Google is going towards not indexing contents behind tabs/ajax/accordion/collapsed content. This one video from Google's John Mueller almost confirm the same. [seroundtable.com...]

Have any of you observing the same? What do you think would be an alternate way other than long scrolling pages?


Thanks for the inputs!

[goodroi]

We talked about this two months ago [webmasterworld.com...]

The simple solution is to just move your important content on top.

[TheMadScientist]

The use of a #! to indicate an AJAX page state [#!show-tab-two-here] or displaying all content and using a fragment-identifier [#fragment-id-here] so the SEs can send visitors to the page with the correct tab or what would be scrolled-to content displayed initially might be your friend in this type of situation.

In-other-words: A #! [shebang identifying the correct tab for SEs to display for visitors] so SEs send visitors to the correct content *or* displaying the entire content of the page and using fragment-identifiers [#identifier-here] with prominent links to the correct section of a page to make it readily accessible to visitors by clicking rather than scrolling and also allowing SEs to send visitors to a specific section of a page, especially on mobile, might be the way to get the-best-of-both-worlds in this type of situation.

[edited by: TheMadScientist at 12:42 am (utc) on Dec 17, 2014]

[aakk9999]

What do you think would be an alternate way other than long scrolling pages?

As TMS said, but be vary of "thin content" URLs.
Also, what about the good old-fashioned pagination?

What I would like to know is whether anybody who is using tabs or similar actually noticed drop in ranking/impressions that is attributed to this? I mean other than searching for the part of the sentence inb quotes?

[TheMadScientist]

I should probably add: I have used fragment-identifiers with prominent links to specific sections on pages to eliminate scrolling and they rank(ed) well for a number of keyphrases, even if the phrase(s) first appeared far down the page, but I don't use a shebang often, even though for a tabbed viewing situation it might [would probably] be a better solution -- I don't use tabs very often so there hasn't really been a need for me test and see which is better in a given situation or if there is any difference between the two from a SEO perspective, but I would guess for tabbed viewing a shebang [AJAX-page-state indication] would likely be a better way to go.

[Sand]

I used tabs for a long time. I got rid of them a few months ago, but not because of anything search-related. It was just a design change.

Honestly, I never really felt like the content in the tabs was being discounted. But then again, I covered all the things that would be important to most people on the default tab -- the other tabs just went into more specific detail on certain elements.

So maybe that's a potential way to go about it.

IE: If you imagine a page that's selling computers, you might have a specs tab. Well, mention the specs your customers think are most important (CPU, graphics card, whatever), on the default tab too, but then show the more detailed stuff in the specs tab. That way, you have specs content that isn't discounted for being in a tab, and you may have a better chance of showing up for that stuff.

Just an idea.

Edit:

In response to this:

Not sure why Google is going towards not indexing contents behind tabs/ajax/accordion/collapsed content.

I get it. If a user searches for x computer specs, and they land on a page that doesn't have any specs (but rather a tab -- which is essentially a link to the specs), you can understand why that might not be a good experience for a searcher. Now, that doesn't mean it isn't a good experience for your site users. But you have to admit it may not be a good experience for a searcher looking for a particular piece of information to land on a page that doesn't have their answer readily visible.

From a technical point of view, sure, the content is on the same page. But from a user point of view, a tab is basically a link to a different page. Why should one page rank for content that's on a different page? That, I assume, is the problem Google is struggling to solve.

[shaunm]

Thank you all for answering and the references.

I'm not a code pro. I found that there are two situations on my site where the hidden contents are used.

1. Home Page - The user lands on the first tab by default and 2nd, 3rd tabs are right beside it which opens upon mouse over.
--> I used Google chrome dev tools and it shows HTML <div> for this action.

2. Inner Pages - The 'learn more' links under each product specifications brief opens up a larger detailed content below it.
--> This one is done using CSS display: none function as I could see it.

Now, as most of people have already claimed, Google is showing the collapsed content page when I make a site search like site:example.com "content from collapsed section". But it's not showing the content in the meta description section as it would show for any others pages in bold texts.

It's so confusing. So, Google sees the content but it's not going to rank that page for the optimized keywords if it's in the collapsed content section? Also, @TheMadScientist - Do you really think using a 'fragment id' can help the collapsed content rank for certain keywords that the collapsed content is optimized for?

Thanks again!

[netmeg]

So, Google sees the content but it's not going to rank that page for the optimized keywords if it's in the collapsed content section

Not quite, it sounds like they see the content, but it won't necessarily be useful for SEO purposes. Because they probably figure if it's important (or legit), you wouldn't put it in a collapsed content scenario. Which is a nuisance, but it means I'll make sure amost of the important stuff on a product page is front and center, and use the tabs for stuff like specs.

I've definitely seen abuses of collapsed content, but it's still a useful thing for users, and trying to squeeze 10lbs of info into a 5lb page.

[bwnbwn]

I think the problem was caused by owners stuffing these tab menus with nonsense content on thin pages to help rank a page. I have seen this so many times I was wondering when this would happen.

legit owners suffer from the ones that abuse it but really there isn't a way to tell abuse from legit, so solution is to stop using this as page content.

[FranticFish]

I don't know if it's still the case, but a while back Moz published an experiment that showed that links from one part of the page to another using # were not only counted, but more than one anchor text was noticed (previous tests having shown that Google counted first anchor only when page A linked more than once to page B).

Google indexes Wikipedia on-page anchors and displays them in the SERPs.

[TheMadScientist]

@TheMadScientist - Do you really think using a 'fragment id' can help the collapsed content rank for certain keywords that the collapsed content is optimized for?

No. I'd use an AJAX Page-State [#!show-tab-2] for content that is not displayed initially so SEs and visitors can link directly to the version of the page that displays the hidden content -- I use fragment-identifiers with links to specific sections of content when all the content is expanded/displayed initially, so SEs and visitors can link or "jump" via link directly to a displayed section without having to scroll the page.

[shaunm]

Because they probably figure if it's important (or legit), you wouldn't put it in a collapsed content scenario.

Do you think they are smart enough to distinguish between abusive collapsed content and the the legit ones aimed at improving user experience? I think the move is not quite good since Google asks to create websites for users not search engines. May be not anymore.

I don't know if it's still the case, but a while back Moz published an experiment that showed that links from one part of the page to another using # were not only counted, but more than one anchor text was noticed (previous tests having shown that Google counted first anchor only when page A linked more than once to page B).

Yeah, I read that too. That seems to helps to break the believing of only the 1st anchor text on a page counts when there are multiple anchor texts pointing at the same page. I believe that's more of a ranking factor than whether the actual content is considered for indexing or not. Even that might have changed now until it's proved wrong with a new case study.

so SEs and visitors can link directly to the version of the page that displays the hidden content

Can you please explain this part? I don't get it. Thanks!

[netmeg]

Do you think they are smart enough to distinguish between abusive collapsed content and the the legit ones aimed at improving user experience?

Sometimes. Maybe. I wouldn't want to depend on it.

[aakk9999]

so SEs and visitors can link directly to the version of the page that displays the hidden content

Can you please explain this part? I don't get it. Thanks!

This means: Can you link to the page in a such a way that the hidden content shows open when you first land on the page? E.g. if your default tab is tab1 and the hidden content is on Tab#2, can you link to this URL in a way that tab#2 is initially open?

[shaunm]

This means: Can you link to the page in a such a way that the hidden content shows open when you first land on the page? E.g. if your default tab is tab1 and the hidden content is on Tab#2, can you link to this URL in a way that tab#2 is initially open?

I'm confused. Will not that make the Tab#1 content disappear from Google index? Thanks.

[TheMadScientist]

Will not that make the Tab#1 content disappear from Google index?

No. If you implement AJAX Page States correctly using the #! it should be more like having 3 different pages rather than only one page with some content hidden when a visitor initially lands on the page, because modern SEs [think Google, Bing, Yahoo! (if Yahoo! was actually still a search engine) etc.] can send a visitor to the page and via the info after the #! can tell the page to display the tab/content [tab-1, tab-2, tab-3, etc.] the visitor was searching for when the page initially loads rather than having to send visitors to "tab-1" and hoping they click on "tab-2" or "tab-3" or "whatever" to find what they searched for.

That's the best way I can put it right now, sorry if it doesn't make sense...

[shaunm]

Thanks again @TheMadScientist

Is there a possibility to share a live example (sorry if it's against forum policy) or ajax tutorial on this?

Much appreciated!

[TheMadScientist]

The best example I can come up with using here is...

NOW

The main topic location is:
http://www.webmasterworld.com/google/

This specific topic is:
http://www.webmasterworld.com/google/4722381.htm

With AJAX and telling search engines

The main topic could be:
http://www.webmasterworld.com/google/

With this thread being:
http://www.webmasterworld.com/google/#!4722381 or
http://www.webmasterworld.com/google/#!Google-Not-Displaying-Hidden-Content

###

Basically, the #! lets visitors view your content and says "treat the info displayed as a different page even though the base URL is the same" to search engines at the same time, meaning basically you're saying to search engines, "Hey, we change the content based on the info after the #!, so treat it as individual!"

Conversely, # only says, "Go to this part of the page/info, which is part of a bigger whole page."

So as far a search engines go, in the first case, you're saying "send people here and it's the entire info [page] they'll see", but in the second, you're saying "send people to a specific part of the page/info they land on."

###

In the preceding example, #! says "different page/info" to SEs, while # simply takes people to a specific part of a bigger "whole" page -- Hope that make sense.

###

Here, the "better answer" would be:

http://www.webmasterworld.com/google/4722381.htm#msg-num

Rather than:
http://www.webmasterworld.com/google/#!4722381

Because here, a post should be treated as part of a bigger page, not an individual page on it's own as a "whole" or anything like that.

[aakk9999]

TMS has explained well. Note that if you are switching with CSS only, this would involve changing this to use AJAX.

Here is Google's recommendation on how to implement this:

Making AJAX Applications Crawlable
https://developers.google.com/webmasters/ajax-crawling/ [developers.google.com]

To clarify, it is not enough just to add ! after the # in URL. There must be some back end server changes done too.