CSS Image Replacement

Does 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.