Image Optimisation for Search

This page was originally written by Robert Morrison on 17 Sep 2007 as an article for Oyster Web.

Since the introduction of the <img> tag by the Mozilla browser towards the end of 1992, the Web has grown become a very visual medium.

The basis of a good web page is, of course, good textual content, but what can we do to best optimise for those pages with images?

Search engine Spiders cannot 'understand' the meaning of an image so they'll look for textual (and contextual) clues, but with HTML you have at your disposal several means to represent your image in a text format. Of course some images cannot be summed up in a few words, but we can start with a title, and a description.

Here is a basic image tag:

<img src="image.gif" height="50" width="150">

we can add a title like this:

<img src="image.gif" height="50" width="150" title="18th Century Iron Widget">

Most browsers will display this text when the mouse hovers over the image.

The guardians of accessibility like us to use the <alt> tag, comme ca:

<img src="image.gif" height="50" width="150" alt="18th Century Iron Widget">

In fact, IE will display the alternative text as a tooltip when you mouse over the image. To disable this feature, simply use an empty title attribute along with the alt you want to use.

For especially important images, we can include a londesc= attribute. Here you provide the url of a document that describes the image in detail.

Since we are here for SEO and accessibility, it is important to remember that Spam is a bad thing. Over-use of any of these tag attributes could cause search engine rankings to drop. Instead, use these optimisation techniques sparingly by applying them only to images that deserve special attention. If you happen to use spacer images in your design just apply an empty alt="" attribute to keep the HTML and accessibility checks in order.

We live in material times. Marketing is important to small website businesses, and in particular branding is an important exercise. But step away from that logo! Put down the splash page! Lets talk about <h1> tags.

The whole point of HTML is to give structure to a page of text. The point of that is to make it easily readable and understandable: It breaks down the paragraphs and applies headings. It can add emphasis or denote quotation from body text. It can, as we've seen, add illustrations in order to reinforce a point. In short, it has all the properties to format a good piece of text into an articulate document. It is not there to make the words look pretty.

Using an image to represent page headings is not the optimal solutions. Instead, you should make use of the HTML h tags, and stick to the following rules:

• Only one <h1> per page.
• Nesting. An <h2>must only follow an <h1> or another <h2>, and an <h3> must only follow an <h2> or another <h3>.
• Style as much as your marketing manager likes using CSS