: Is Z-index based tab content more SEO friendly than display:none? 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

@Eichhorn148

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.

Vote Up Vote Down

@Si4351233

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.

Vote Up Vote Down