SEO & CSS Display None: Is it Bad To Hide Content
UPDATE (07/28/2020)
Since writing this article several years ago, Google has stated multiple times that content hidden in accordions or tabbed boxes using CSS display:none; will no longer have a negative impact in a “mobile first world”.
no, in the mobile-first world content hidden for ux should have full weight
— Gary 鯨理／경리 Illyes (@methode) November 5, 2016
What is interesting is that a recent case study done by search pilot found that their page received a 12% increase in organic traffic when they simply removed content from tabbed boxes. Keep in mind, this is just one test, but an interesting find none the less.
In my opinion I would look to try and have content completely visible when possible, but I would also not stress if you need to tuck it away in an accordion or tab box.
The body content on any page is always important to help that page rank for the topic and keywords being discussed. Good SEO best practices are to always have your content in plain text (never in flash of images), have good quality content above the fold and ensure your pages have enough content on them. The last point, having enough content on a page, is usually a pain point with a lot of websites. Sites like to be flashy and image heavy to capture the users interest and this usually limits the amount of quality text on a page.
SEO’s and wed/graphic designers always butt heads when it comes to adding more content to a web page, especially the home page. What seems to be a common compromise is to include content on the page but to hide or reveal it based on user interaction. Think of tabbed or accordion sections. Although this can be a good compromise in many cases, according to John Mueller in his latest Google Webmaster Central Office Hours Hangout, this may be limiting the value of that content. He goes on to explain that if a webmaster is setting content to display:none; (a functionality usually required by tabbed content/accordions), then that content is not immediately visible to users or search engines and is assumed to not be of high importance. I have seen many instances of quality content, highly relevant to a page, “hidden” in tabbed sections. Sites often list their indivualy services in tabbed sections, or ecommerce websites that have product specs and reviews in tabbed sections
What Is A Better Compromise For SEO
Don’t hide high quality content using display:none; or other techniques. Take that content out of the tabbed box or accordion. I know that is not much of a compromise for the designer so another option could be to ensure that each tabs content is individually crawlable by search engines. Perhaps by using URL parameters on each tab. Can you think of some other ways that designers and SEOs can compromise when it comes to putting plain text content on a page? Let me know in the comments!
