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:

Display None Menu Example 1

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:

Display None Menu Example 2

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:

Display None Code Example

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:

Amazon Menu Example

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:

Display None Code Example

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.

Opinions expressed in the article are those of the guest author and not necessarily Search Engine Land.

Related Topics: Channel: SEO | SEO: General

Sponsored


About The Author: is the president of Stone Temple Consulting, an SEO consultancy outside of Boston. Eric publishes a highly respected interview series and can be followed on Twitter at @stonetemple.

Connect with the author via: Email | Twitter | Google+ | LinkedIn



SearchCap:

Get all the top search stories emailed daily!  

Share

Other ways to share:
 

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. Comments may also be removed if they are posted from anonymous accounts. You can read more about our comments policy here.

Comments are closed.

Get Our News, Everywhere!

Daily Email:

Follow Search Engine Land on Twitter @sengineland Like Search Engine Land on Facebook Follow Search Engine Land on Google+ Get the Search Engine Land Feed Connect with Search Engine Land on LinkedIn Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Search News Recap!

SearchCap is a once-per-day newsletter update - sign up below and get the news delivered to you!

 


 

Search Engine Land Periodic Table of SEO Success Factors

Get Your Copy
Read The Full SEO Guide