Don't hide if you want to rank: how display none and visibility hidden endanger SEO efforts
Tags: seo, css, javascript, webdev
Published: 2022-12-10 20:54:57

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. 

{% codepen https://codepen.io/pedrodrocha/pen/eYKoQON %}



### 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.

{% codepen https://codepen.io/pedrodrocha/pen/jOKRQwO %}


### 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. 

{% codepen https://codepen.io/pedrodrocha/pen/oNyOQeE %}

## 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.