layout: post title: "SEO: Use Images Wisely" created: 1078657560 categories:

• validation
• SEO
• img
• longdesc
• alt
• Search Engine Voodoo

As part of validation, you may have noticed warnings if you failed to add alt attributes to your img tags. The alt attribute isn't there just to conform to a standard - it's actually useful! It stands for "alternative" and can be used to add a textual description to any image. As we've discussed earlier, search engines are blind, so this description is vital for letting search engines know what your image represents.

A picture of a kitten might have an alt attribute as follows:

<img src="kitten.jpg" alt="A white Persian kitten" />

A search engine would then associate the file kitten.jpg with the text "A white Persian kitty".

Additionally, the title attribute can be used to add text that acts as a caption for an image. Continuing with the previous example, we might use the following text:

<img src="kitten.jpg" alt="A white Persian kitten" title="Allie's Kitten" />

Now we've given the image a short descriptive phrase (alt) as well as a caption (title). The title attribute can actually be used for other elements as well, including the anchor tag. Many browsers will show the text of the title attribute in a floating "tool tip" box when the mouse pointer is placed over the element.

If you really want to go overboard, you can consider using the longdesc attribute, which is for including descriptive text that is too long to fit into the alt attribute.

But back to the wise use of images. Just as a page filled with images won't be very useful for a blind person, a search engine won't care much either. The critical portions of a page that should never be replaced with images are the various headings, company names, and pull quotes. While it is understandable to want to make these areas visually appealing, a search engine won't be able to "read" any text that appears in these graphics.

Two options exist. One is to use stylesheets to apply styling to text to make it standout. The second is to use one of a number of CSS tricks to replace the text with graphics (the most common one probably being the Fahrner Image Replacement [FIR] technique).

What's that? You're still not convinced? You want pretty looking graphics, or exact control over how content is going to appear? Let me go back to what I said earlier: search engines can't read graphics. Now let's imagine that your marketing department decides to start releasing press releases as images, or PDFs. Well, if the whole press release is a graphic, the entire contents of the press release will be invisible as far as the web is concerned.

PDFs are slightly better (Google, for example, can read the text inside of PDFs) but consider users that don't have a PDF reader installed. Or those browsing the web on handheld devices. Don't make things harder than they have to be! If you can generate a PDF, you can generate an HTML page of the press release.