Comments on: SEO Implications of using CSS Display None/Image Replacement

By: Neil Monroe

Neil Monroe — Mon, 22 Mar 2010 21:26:24 +0000

Also, another disadvantage of using “display: none” is that users will most likely not be able to see the links in your nav when images are turned off. Many still do this to speed up download when on a slower connection (mobile, wifi, etc.)

There are a lot of different techniques that can be used for image replacement and it really depends on your situation.

From a practical standpoint, the method that we all “wished” worked best is just using pure alt text for the value of the nav items, since this requires the least amount of markup and CSS. This also was a method built into the HTML spec, so the authors had this type of use in mind.

However, the one that makes the most sense in real use, if a general case had to be chosen, is to use text-based navigation from the start (CSS3 is making this much more effective).

If this is not possible, then either using the “display:none” technique or overlaying the images on top of the nav item text (only works when the images have no transparency) would work, but require more markup and CSS rules, possibly even JavaScript if some of the extra markup was desired to be hidden from the initial HTML.

By: Jose Thomas

Jose Thomas — Wed, 23 Dec 2009 15:54:50 +0000

I made a dynamic menu for a wordpress CMS site, which uses display: none css property. In my menu, it will display child pages of current page and current page parent only and hide all other child pages using “display:none;”. That is, in each page, my menu will display only links to relevant sections and hide other links using css. Is there any search engine problem in doing so? Please help me.

One More thing, You are saying you would avoid using text-indent: -9999px to hide text. But in your header logo, You are used this way to hide text and added logo as the background image. [in your style.css, line 93] :) I also used this way when created a site 2 weeks ago.

Thanks for your post

By: Tony - Web Designer

Tony - Web Designer — Sat, 21 Nov 2009 01:29:01 +0000

I agree that using image replacement can make a nice looking design / navigation. However, there are 2 main reasons to stick with an all text based nav: Faster download speed and, as you mentioned, rock-solid anchor text.

@Dewgem – If you want to learn CSS, try the videos at lynda.com.

By: Dewgem

Dewgem — Tue, 03 Nov 2009 09:43:01 +0000

Hey! You know how to use CSS! Ah~ so jealous! I was hoping I can learn some too so that I can make my blog more interactive and interesting, but…I am Css-illiterate and even when I tried to read them up, I can’t absorb them, at all. lol :P