SEO Friendly Images to Replace Text in Navigation Menus

Let’s start with making our images that will be used in place of menu text, in this example I am using images 30px tall and of varying width. I make two images for each menu item, one for mouse-over or hover and second for all other conditions.

Here are the images of varying width:

Mouse-over/hover:



Normal:

Now create your XHTML menus structured as below:

1. <div id=”menu”>
2. <ul>
3. <li class=”home”><a href=”<?php echo get_settings(’home’); ?>”><span>Home</span></a></li>
4. <li class=”coll”><a href=”<?php echo get_settings(’home’); ?>”><span>Collection</span></a></li>
5. <li class=”design”><a href=”<?php echo get_settings(’home’); ?>”><span>Design Consultation</span></a></li>
6. </ul>
7. </div>

Next, you will open your stylesheet and define the following conditions:

#menu ul { list-style:none; margin:0; padding:0 10px 0 0; }
#menu li { float:left; }
#menu li a { display:block; background-position:center top; background-repeat: no-repeat; }
#menu li a:hover span { display: block; position: relative; z-index: 1; }

#menu li.home a { background-image:url(images/home.gif); text-indent:-5000px; height:30px; width:100px; }
#menu li.home a:hover span { background-image:url(images/home-hover.gif); text-indent:-9000px; height:30px; width:100px; }

#menu li.coll a { background-image:url(images/coll.gif); text-indent:-5000px; height:30px; width:100px; }
#menu li.coll a:hover span { background-image:url(images/coll-hover.gif); text-indent:-9000px; height:30px; width:100px; }

#menu li.design a { background-image:url(images/design.gif); text-indent:-5000px; height:30px; width:200px; }
#menu li.design a:hover span { background-image:url(images/design-hover.gif); text-indent:-9000px; height:30px; width:200px; }

In the style above, the classes ‘home’, ‘coll’ and ‘design’ are now defined for 2 conditions, the mouse-over/hover state and the normal state. Notice how we offset the text to -9000px, what this essentially does is set the text outside the view of your screen, however, it will be available for search engines (view source code) as defined by the XHTML structure. This is the search engine preferred method, other CSS properties that will hide the test includes display: none; or visibility: hidden; but I would stay away from using both those properties where possible.

When you view the page using a browser, you will notice the image in place of the text with mouse-over and all. View the page source to see what the search engines index and you will notice the menu text intact. Simple eh!

If you are reading via a RSS reader, visit the link to view the final outcome