Don't hide if you want to rank: how display none and visibility hidden endanger SEO efforts

A big challenge in creating products for ranking at Google and attracting organic traffic is writing code that screen readers can recognize. Text optimization and on-page optimization efforts, such as the use of structural text elements and meta tags and the build-up of internal links and website hierarchy all help getting traction, but none of it matters if those little robots cannot actually index your content.

The indexing nightmare usually starts when you build those fancy accordions of custom content or FAQs, and add interactivity for showing and hiding from the user elements as he plays around with see more/see less buttons. At this time you probably spent a good quota of copywriters' money to end up discovering days later that you are not ranking for all that content hidden on page load.

In the good old days, people would use hidden text to rank for things that users couldn't access in a variation of a bait-and-switch technique. So, depending on the way you choose to hide your content, Google is likely preventing users to end up on a page that has nothing to do with its search intent. Just to be clear, your content is definitely being crawled, but not indexed and you are not ranking for it.

What are our options for hiding web content?

There are three direct ways to hide content on a webpage, you can use display: none, visibility: hidden, or opacity: 0. All of them do the job, but work differently behind the scenes and have consequences for the indexing status of your web page.

1. display: none

Setting display: none removes the element and its children altogether from the HTML tree. They are not only invisible and don't occupy layout space, but the page renders as if they didn't exist. As they don't occupy layout space, elements with display: none don't have size properties active. Their height, width, and all other related properties will be 0.

2. visibility: hidden

The attribute prevents elements from rendering, but includes them in the HTML tree, occupying layout space. By occupying layout space, they do have size properties active in contrast to elements with display: none active.

But here is the tricky part that confuses people. The element has width and height properties, but it's not rendered on page load and all the content inside cannot be accessed because their innerText will be empty.

3. opacity: 0

By setting opacity: 0 you don't prevent the rendering of an element, but add full transparency to it and all its children. They will render and occupy layout space. As a consequence of rendering, all the content is accessible and their innerText will not be empty.

So what should we do to rank for hidden text content?

Search intent is key and as such you will not be ranking for content not accessible to users when they first go to your webpage.

If you want your text content to index, make sure screen readers can access it on page load. The use of display: none and visibility: hidden is not recommended because those attributes will prevent elements from rendering and might set innerText to blank.

The best strategy for building tabbed content is using opacity: 0 in combination with other css attributes, such as max-height: 0 and pointer-events: none. They will allow you to not show content until some event is triggered and also prevent innerText to be set blank on page load.