Image Replacement

As discussed in a previous article, header tags enable search engines to take a snapshot view of a web pages document outline, which then describes the nature of the content in that web page. Many developers employ a system of placing keywords and phrases into these headers, legitimatly incorporating suitable sub-titles, or building short headlines so that search engines will pick them up.

In these header tags, the H1 tag carries the most weight in terms of SEO, and as such, it makes sense to optimise as many keywords and key phrases as you can get away with. However in using this SEO technique, many develors arive at a common problem; they don't want a huge span of text covering the top of their page.

Indeed, before the CSS outbreak this may have been acceptable behaviour, but as we aproach the dawn of web 3.0, there is no excuse for such bad design.

There are several techniques to replacement text with image. Scalable Inman Flash Replacement (sIFR) is one method of achieving a custom font that isn't normally web safe. Though, this technique has drawbacks in that it is driven by Flash, and a javascript framework such as JQuery. However, there is a better, much more simplified technique, that is more flexible for SEO, so forget sIFR, it is rather old school these days anyway.

The real solution is known as Image Replacement, a simple CSS based technique that substitutes the span of an element with a background image.

While hidden keywords and phrases is often referred to as spamming, it could be argued that image replacement is a black hat method of SEO, and thus web pages risk being penalised for employing such techniques. However it could also be argued that keywords are not hidden, but replaced.

Should CSS be switched off (in the highly unlikely event), then the header tags will display. Also, a background image cannot be printed. If the web page is 'print previewed', it can be noticed that the background image of the header anchor tag has been replaced with its text content.

How to Use Image Replacement

In this instance, and any other instance, the method of image replacement is only ever used for the H1 tag, to hide the keywords and keyphrases you have crammed in there, in an attempt to optimise a document outline.

There are three parts to do this:

1. The HTML
2. The CSS
3. The Image

HTML - This part is split into another three parts; the header tag, the anchor tag and the anchor text (the keywords and phrases), and this would normally look something a little like this...

<h1>
  <a href="index.html">
    Contemporary Travel Photography, Seasonal Photography
  </a>
</h1>

CSS - The second part is your creating your 'h1 a' attributes in your style sheet. See the follow CSS...

h1 a {
background:url(../images/contemporary_photography.png);
display: block;
height: 0pt;
overflow: hidden;
padding-top: 108px;
width: 318px;
}

The only attributes you need to be awar of are the width, height and padding attributes.

The width is obviously the width of the background image, but if this isn't set then the whole row will become a link to the page specified, at the height set in the padding-top attribute.

The height must be set to 0px otherwise text in your header will be displayed.

The padding attribute is the height of your background image.