CSS Image Replacement

indiana-replacement.jpgDoes your website have a menu with nice shinny buttons that are images? If this is the case, those buttons / menu items probably contain text that you and I can understand, but because it’s in image (JPG, GIF or PNG) format, the search engines will have no idea about how to read it.

Even though a recent patent suggests that Google is going to be getting better at interpreting text used in images, they’re still not quite there yet.

So while we’re waiting for Google to catch-up, let me introduce you to a technique known an CSS Image Replacement.

The basis of this technique is that you wrap your text with tags that are of a special type, class, or id and then use CSS to ‘replace’ them with images.

By doing this you’ll be able to have your pretty image-based menu items while still having a well optimised website. For more information and some great examples of how you can take advantage of this technique, have a look at MezzoBlue.

While on the topic of images and search engines, Matt Cutts made the following video that featured on Google’s Official Webmaster Central Blog about a month ago. The video discusses how to use the ALT attribute more effectively:

Just remember, all the techniques discussed in this article are quite safe and effective as long as they are used correctly. So don’t go replacing your images and ALT text with long blocks of keywords because you will end-up being penalized.

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

If you liked this post, you might also enjoy:

4 Responses to “CSS Image Replacement”


  1. 1 Adam Lyttle Jan 9th, 2008 at 12:56 pm

    Great idea Pete!

    I lean more towards dressing up the text on menus rather than opting to have images. It’s easier to develop a system that my clients can manage (from a Content Management Perspective) and it’s easier for search engines.

    However I do have the occasional site that requires images instead of text. In the past I just create an “alt” parameter to describe the link, but on mobile devices (and text based browsers) it can still be quite hard to navigate. Your suggestion is the way to go for me from now on! :)

  2. 2 Alex Jan 9th, 2008 at 6:25 pm

    Very interesting idea. I will start to optimize my pages straght away.

  3. 3 Krumpet Jan 30th, 2008 at 5:47 am

    My question is how can Google detect ‘bad’ image replacement? I don’t think they can. If you have an image of a cat and you hide ‘basketball’ behind it, there doesn’t seem to be a way Google could figure out those don’t match.

    I’m sick of people getting all freaked out about IR and how it will get you punished by Google. That is bogus. I’m sorry, but as powerful as Google is, they cannot scan online images and determine what text best describes them. That is subjective.

  4. 4 Marcus Feb 26th, 2008 at 1:02 pm

    Pete, thanks for touching on this subject.

    Krumpet, I would be careful because, although Google can’t see what the image is about, competitors can and they have the ability to report your site. Not a very nice thing to do, but it does happen. Also I have heard of manual reviews by Google if certain flags go up. Image replace may be just such a flag.

Leave a Reply




RSS Button
Like what you see here?
Then Subscribe - it's Free!

Enter your email address:

Delivered by FeedBurner

Add to Technorati Favorites

View Peter Newsome's profile on LinkedIn

SEO Book


Close
Powered by ShareThis