Is Hiding Content With “Display: None” Legitimate SEO?

If you’re doing SEO on a site with thousands or tens of thousands of pages, it’s likely you’re working with some sort of content management system (CMS). However, CMS systems frequently cause problems with search engines. The great majority of the time these problems arise through ignorance on part of the CMS software developers. Basically, if the developers are not familiar with how search engines work, they may use coding practices that are not intended to be deceptive, but could be perceived that way by a search engine.

One technique used by many huge sites is to pre-load code, navigation, or content in the background so that it can be dynamically displayed as needed. The most common technique for accomplishing this is through the use of the CSS display: none attribute. This article will look at the display: none attribute in detail.

Overview of display: none

On large sites you may have large and complex menu structures. For example, let’s imagine you have 10 major topic areas on your site, and each of these has 5 to 10 subtopics. You could design your navigation system to show all the major topics, and all of their subtopics on every page of the site.

On the other hand, you might decide that this leads to a bad user experience. You may want to show only the major topics on pages like the home page, and when you are within a certain major topic area of the site, you may want to only show the subtopics that are directly related to the subtopics. Since that may be a bit confusing to read, let’s look at a couple of pictures.

When you are on the pages on the site related to topic 1 (Category 1 below), you might want the menu to appear to the user as follows:

However, when you are on the pages on the site related to topic 2 (Cat 2 below), you might want the menu to appear to the user as follows:

These things are often implemented using a display: none attribute within a div tag. If you define a menu structure within a web page, you might implement a div tag as follows:

Why use the display none attribute?

One basic reason to use display: none is simply that it makes for neater code organization. You can place the same menu code on each page of the site, and control what displays simply through the display: none attribute.

However, you may want to go further than that. If you have a dynamic web application, you may want to show the sub menus on mouseovers. Here is an example of that from Amazon:

Note how the mouseover has highlighted the Movies, Music & Games submenu. Amazon’s CMS has all the menu items loaded in the HTML of the page, but hides all the submenus until you do the mouseover, at which point Amazon shows you the related subcategories. This is just one example of its use.

Other sites use display: none in their skip links and screen reader implementations for the visually impaired. Since screen readers read the content of the screen, you often want to modify the design of your page a bit to help these people out. One classic example is with a menu that has 100 items—you probably want your screen reader to skip all those links. After all, the user probably wants to hear the main content of the page, not listen for several minutes to your list of links.

The way people do this is that they create a bookmark to a spot after the end of the navigation in their HTML, and then make the first link on the page a jump to that bookmark. This allows users who are using screen readers to save a lot of time, and significantly improve the usability of the page.

The dark side of the display: none attribute

Unfortunately, you can also use display: none to simply hide text. Here is a code sample for that:

This is where the perceived problem comes in. People worry that the use of display: none to build menus or for code that is really meant for screen readers can lead them into trouble. I had someone ask me about this quite recently.

The legitimate use of this technique is so prevalent that I would rarely expect search engines to penalize a site for using the display: none attribute. It’s just very difficult to implement an algorithm that could truly ferret out whether the particular use of display: none is meant to deceive the search engines or not.

In particular, if you are using a CMS system that is used by many others, and the CMS uses display: none in some of the ways discussed above, I doubt you’ll have a problem. What you want to stay away from is custom and exotic new ways to use display: none. They might be neat coding tricks, and fun to learn, but they will increase your exposure to potential negative reaction by a search engine.

Eric Enge is the president of Stone Temple Consulting, an SEO consultancy outside of Boston. Eric is also co-founder of Moving Traffic Inc., the publisher of Custom Search Guide.