Display: None Issues

The display:none property is common and has may uses, as well as misuses. It's not always obvious what effect its use has on SEO and its impact on accessibility can be problematic. I hope this post helps to clarify the situation.

Types of invisibility

'Display none' means exactly that. It removes the element (and its child elements) from the display. Unlike visibility:hidden, which makes elements invisible but maintains their shape in the layout (much like setting their opacity to zero), display:none leaves no trace at all. Bearing this in mind, it's tempting to use display:none as a substitute for actually removing elements from the markup. The question is this: what is the hidden content getting up to behind my back?

SEO concerns

Very few people understand precisely how search bots work or what algorithms to which they are conforming. If someone tells you they are party to that information, there's a good chance they are a charlatan. This being the case, we must rely on our own common sense when it comes to constructing and styling our content. So, in the case of display:none, what should we suppose? My best guess is this:

Given that Google's bots are surely designed to retrieve content as accurately as possible, and given that display:none is commonly used as part of javascript-enhanced navigation schema, surely the bot cannot afford to ignore content set (on page load) to display:none. This would mean it was foregoing content that the user can access with the simple click of a tab, for example. Remember: the poor bots are just trying to find the same stuff that the humans are after. That said, you could say there is no 'display none issue' regarding SEO.

However, if you are not persuaded by this argument, one safety measure would be to set 'display:none' on the content that requires it via javascript so that the display:none property only takes effect in the generated markup (the markup after javascript has run in the browser) because google's bots pay this manipulated content little attention. This practise is arguably rather drastic since most believe that Google will ignore your CSS file (where you would otherwise write your display:none code) anyway. Regardless, the code to do it simply in jQuery would be as follows:

$(document).ready(function() {
     $('.thing-to-hide').hide();
});
     
// which is equivalent to...

$(document).ready(function() {
     $('.thing-to-hide').css('display', 'none');
});

Accessibility and hidden content

A good search bot, like a good archiver, will attempt to store all the information available in a document or documents. A screen reader's task is quite different. It is designed to emulate the experience of traversing a document visually. As Wikipedia puts it:

A screen reader is a software application that attempts to identify and interpret what is being displayed on the screen

In order to achieve this end, most screen readers will 'step over' content that they are aware has been hidden from view. This is sound logic; if the average sighted viewer can't see it then surely it is not intended for viewing. As I noted, not all screen readers conform to this convention. Well, not all browsers conform to the same standards, but we know which ones are right and which are wrong, don't we? Ignoring content that has been set to display:none is a standard amongst screen readers so - except in special circumstances - we should cater for the majority and only use display:none on content we do not need visually impaired users to read.

Conclusion

To summarise, 'don't worry'. Unless you are doing something counterintuitive, you should not expect to encounter a display:none issue. This is unless you are the sort of 'webmaster' who likes to use black hat SEO practices and stuff lots of hidden keywords into your antiquated web pages. Even then, it will be the repetition of content that gets you penalised - not the display:none declaration used to hide it.

Perhaps the only scenario where the use of display:none becomes seriously contentious relates to text replacement and I shall write my next coding post on this subject.