How does display: none; affect SEO?

[mmm91492]

I'm in the process of building out a huge review / informational page that focuses on a specific product line within a larger brand. I currently have a basic JS/CSS tab system set up, where readers can select a tab for an individual product within the line and the content will change to reflect the product they selected. Currently, I'm just using `display: none;` to hide the inactive tabs' content.

My question is, how does having certain portions of the content initially hidden but still accessible via the UI factor into SEO? Altogether, the tabs hold about 2,000 words of content, but only ~500 words are displayed depending on which tab is selected. I know that Googlebot is of course recognizing and indexing this content, but is there any chance I'm at a disadvantage or somehow being penalized for having ~75% of this section hidden at any one time? Anyone have experience with this?

 

[ryandiscord]

Google once said they devalued content hidden behind tabs but have recently changed that (last November) due to the mobile first approach of web design. Using display:none on text that will later be shown by interacting with the site through JS is fine. Google is able interpret the javascript and see that it is a tab and not you stuffing hidden content.

https://www.seroundtable.com/google-content-tabs-hidden-change-22950.html

 

[StephenD]

Google will understand that content well. But, i don' t think is the best approach. You should test it, but if the content is not visible for the user by default, maybe G. don' t give it the same value. After all, by "hiding" it in a tab, you do not give it the same importance.

It's just my opinion, you should do a test.

 

[turbin3]

I would say you're not at a disadvantage. If you think about it from a UX standpoint, it just makes sense. Hiding various parts of the page, especially for mobile, and allowing the user to select and view what they choose, when they choose, is generally going to provide a better user experience. Especially with some of the recent Google announcements, hidden content likely received a few percent bump in on-page value, relative to what it may have been previously. That last part is purely speculation on my part, but I have a number of sites ranking and generating a fair bit of traffic, that have high percentages of content hidden behind tabs. In general, not a big deal.

 

[EsR]

In the few tests i've done with this, Google can see it. As long as the content lies within the HTML of the page and not completely hidden by JS then you're probably OK. Test by putting a random string from the hidden tabs in quotes and googling it.

"end of sentence. Put something like this in quotes"

If your page comes back in the search results, then we can assume Google can see the rest of it.

 

[Ryuzaki]

It's fine, as @EsR said. I've used jQuery tabs to reduce the visual size of a homepage while cramming tons of content on it, and it works fine. Actually, I know of a site that does the same thing. Let me test it right now...

Yep. This other site has 3 tabs in a block on the homepage. I copied two sentences out of the 3rd tab, which is hidden along with the 2nd, and Google returned 1 result: that homepage.

It's fine, in the specific manner you're talking.

Also, they kind of have to be okay with it in this current day of responsive mobile design that they're pushing so hard.