Headsetoptions.org Web Design, SEO, WordPress, Etcetera

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Using images in place of text can be tempting especially since an image can offer you more visually than just text does. However, most of us end up using text for the simple reason that Google and Yahoo’s search engines are not able to read your images effectively (even with alt text?). Here’s a quick, simple, tried and tested SEO friendly CSS only Javascript free fix for one such scenario; replacing your navigation menu text with SEO friendly images:

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