Your Website Profit

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

Varying opinions have been voiced on whether search engines penalize sites for image replacement, but I believe they will not if you do things correctly and without an intent to deceive. Using image replacement for important headings is a lot better from a user perspective than simply using images. But lets start from the beginning.

What Is Image Replacement?

Image replacement is popular web design technique, where headings or navigational objects are displayed as text to users without CSS support and images for users with more advanced web browsers. The idea is to make sure everyone sees everything correctly, without sacrificing any cool effects you can have with images.

From a search engine optimization perspective, image replacement has the additional benefit of making the search engine understand the meaning of the image. There is a great difference to the search engine between an image saying ‘home’ and text saying the same.

Why Should it be Bad?

Some sites (or webmasters) use CSS to hide text intended for search engines instead of visitors. This is known as cloaking and can get websites banned from search engines very easily, if spotted. These black hat SEO techniques will sometimes look just like image replacement in the markup and to search engines.

Google is able to filter sites based on whether they use CSS to hide text, but at least according to one statement by Matt Cutts on October 2005, using image replacement shouldn’t be a problem in itself. The way I see it, they are likely to manually check sites that use these techniques extensively, but automatic penalization seems unlikely.

CSS Replacement Techniques

There are several different ways to hide text in CSS. The ones usually used for image replacement are ‘display: none’, ‘visibility: none’ and large (usually negative) indentation. The final method often needs a complementary ‘overflow: hidden’ to work correctly.

Of these ‘display: none’ might be the most often used, but negative indentation is the method I recommend. The reason for this choice is that some screen readers are known to skip completely hidden items, while they would notice an item simply moved to the left.

Example Replacement

For an example of the technique at work, let’s look at the source code for this site. Here’s the HTML markup for the title at the top:

<h1><a href=”http://blog.yourwebsiteprofit.info”>Your Website Profit</a></h1>

That’s basic markup for a heading that links to my home page. Now the CSS code:

#header {
background: #ccd url(header.jpg) no-repeat center left;
}

#header h1 {
text-indent: -1000em;
overflow: hidden;
}

The header area has a background image, and the h1 containing the title is hidden using negative indentation and hidden overflow. This results in what you see above: an image containing the text, but also leaves the text into the markup for those with no CSS support.

by Sutocu | January 19, 2008