3

I've created a quick proof of concept in codepen which I'd like some advice on. Would this be more SEO friendly than tabbed content using display:none?

I'm not looking to get on the wrong side of Google, and would like some informed opinion on this before I move past a quick pen.

http://codepen.io/sharperwebdev/pen/LkzarX?editors=1111

Improve this question
1

2 Answers 2

Reset to default
3

The technical means used to hide content is not important at all to Google. Google can detect a variety of mechanisms used to hide text:

  • display:none
  • visibility:hidden
  • zIndex
  • Text color matching the background color
  • Moving an element off screen

Google will only penalize a site for hidden text in cases where the site is trying to deceive Google into indexing content that not seen by users. Hiding content in a tab that users can easily click to see will not get a site penalized, regardless of the technical means used to hide tabs.

On the other hand, Google usually chooses not to index text that isn't visible on the page when it loads. Even if Google does index it, it is unlikely to rank well for its keywords. It doesn't matter what technical means you use to hide text, hidden text has little SEO value.

If the text is important enough to have indexed and ranked in search engines, you need to put it on its own page. Clicking on the tab should change the URL. Users coming into this unique URL would need to see the contents of that tab.

Assigning a tab to a URL does not necessarily preclude using JavaScript to show and hide tabs. When JS shows and hide tabs, the JS can use pushstate to change the URL. When the page loads, the correct tab can be shown either server side, or client side based on the URL.

Improve this answer
4
  • would it matter if the url has a hash(#) in it?
    – Sharper
    Commented Jul 26, 2016 at 8:38
  • 1
    Google does not usually index URLs with a hash as a separate page. You can use pushstate and create new URL without a hash and without leaving the page. Google will usually index pages created through pushstate.
    – Stephen Ostermiller ♦
    Commented Jul 26, 2016 at 8:58
  • I'm starting to pester here so apologies: if you had content in a div with the overflow hidden would that also not be indexed? like this example codepen.io/alanbrown/pen/rLKBZy
    – Sharper
    Commented Jul 29, 2016 at 13:22
  • 1
    Googlebot actually renders pages now, so it has the ability to identify any technical means of hiding text.
    – Stephen Ostermiller ♦
    Commented Jul 29, 2016 at 13:25
3

Hiding content using display: none; is only an issue if you are trying to artificially influence your SERP ranking.

Google is now crawling CSS and javascript in order to identify situations where display: none; is being used to game the system and when it is being used for responsive and interactive features of a website. As long as Google is able to access your CSS and javascript files (IE: you are not blocking those directories using your robots.txt file) then you won't have an issue. In addition to that there are a large number of legitimate reasons to use display: none; in modern websites.

The legitimate use of this technique is so prevalent that I would rarely expect search engines to penalize a site for using the display: none attribute. It’s just very difficult to implement an algorithm that could truly ferret out whether the particular use of display: none is meant to deceive the search engines or not.
Eric Enge - Stone Temple Consulting (SEO Consultancy)
Source

And...

We can flag text that appears to be hidden using CSS at Google. To date we have not algorithmically removed sites for doing that. We try hard to avoid throwing babies out with bathwater.
Matt Cutts - Google Software Engineer
Source

Based on the above I would tend to say that it would not be necessary to use z-index over display: none; and based on other articles I have seen by Google in the past whether you use z-index or display: none; will have much the same effect with Google, as in if it is being used for something like tabbed content then no issue but if it is being used to spam your page or artificially inflate your SERP rankings you will find yourself running afoul of the dreaded penguin.

update #1

Thanks to OP for his reference. Google does in fact rank tabbed content lower as it is considered secondary content. Having said that I would still stand by my statement that using z-index and display: none; will be treated the same as Google does state that hiding content behind other content is also classified as hidden content and potentially could be classed as black gat SEO depending on your implementation. As such whether you use z- index for tabbed content or not I would say it would still result in similar ranking to display: none;. Based on your reference in comments if ranking is a huge issue against UX probably best if you don't use tabbing through any means and perhaps look at in page links. Perhaps look at doing AJAX based tabs as that wouldn't be classified as hidden content and Google does state now they are able to crawl AJAX based content added to the page using onclick events as long as they can crawl the JavaScript to identify the AJAX source on the server.

Improve this answer
4
  • 2
    In Feb 2015, Google publically stated they are ignoring hidden/accordion/tabbed content when determining search rankings. In Google's eyes, "hidden" content was considered unimportant or secondary, and therefore, not worthy of indexing or attributing value. The folks at Google stated pretty clearly that if you wanted content indexed, you better make sure it's visible to users when the page loads. It seems Google has slightly altered their stance since last year's statement, and will typically index accordion/tabbed content... but it will be treated differently and demoted in value- March 2016
    – Sharper
    Commented Jul 12, 2016 at 11:59
  • Are able to provide any reference to this as all the tests I have done contradict that and as I said there are a great deal many legitimate uses of display: none;.
    – Chris Rutherfurd
    Commented Jul 12, 2016 at 12:00
  • 1
    sorry tried to edit this and failed miserably. Here's the reference: topfloortech.com/blog/2016/03/11/…
    – Sharper
    Commented Jul 12, 2016 at 12:02
  • Thanks for that @Sharper, I have updated my answer accordingly after reviewing the reference you provided, thanks for that reference, has improved my own knowledge as well.
    – Chris Rutherfurd
    Commented Jul 12, 2016 at 12:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.