Most webmasters don’t see any difference between image alt text and title mostly keeping them the same. A great discussion over at Google Webmaster Groups provides an exhaustive information on the differences between an image Alt attribute and an image title and standard recommendations of how to use them.
Alt text is meant to be an alternative information source for those people who have chosen to disable images in their browsers and those user agents that are simply unable to “see” the images. It should describe what the image is about and get those visitors interested to see it.
Without an alt text an image will be displayed as an empty icon: 
In Internet Explorer Alt text also pops up when you hover over an image. Last year Google officially confirmed that it mainly focuses on an alt text when trying to understand what an image is about.
Image title (and the element name speaks for itself) should provide additional information and follow the rules of the regular title: it should be relevant, short, catchy and concise (a title “offers advisory information about the element for which it is set“). In FireFox and Opera it pops up when you hover over an image:
So based on the above, we can discuss how to properly handle them:
- the both tags are primarily meant for visitors (though alt text seems more important for crawlers) - so provide explicit information on an image to encourage them to view it or get them interested.
- include your main keywords in both of them but keep them different. Keyword stuffing in Alt text and Title is still keyword stuffing, so keep them relevant and meaningful.
Another good point to take into consideration:
- According to Aaron Wall, alt text is crucially important when used for a sitewide header banner.
or Buzz it at Yahoo :
Comments
5 responses so far ↓
claye on May 19, 2008 at 9:13 am
We should also keep the disabled in mind while writing alt tags because text-to-speech browsers read the alt tag as a description of what the image is so that blind users understand what you are trying to communicate in an image.
It’s useful when writing title tags to think of what the caption for that image would be.
log homer on May 20, 2008 at 8:59 am
thanks for the tips, but i have one question: what about punctuation and special characters in alt. and title descriptions? can you use any of the following? @ | , . \ ?
Chris G. on May 20, 2008 at 11:44 am
Let’s be clear - In IE, the alt attribute is used as a tool tip/pop up only if a title attribute is not used.
When you use both an alt attribute and a title attribute, the title overrides the alt text and becomes the tool tip/pop up when the mouse is placed over an image.
@Iog - I know you can use the following symbols, but I’m not sure about the others.
,.?
SEO Canada on May 20, 2008 at 6:14 pm
@Log
I’ve used , and . before so I’m sure that ? is fine as well. But if your putting a @ or | in your Alt or Title tag then you should reread what this article was talking about as there not used in the english language in any way you would be describing the relevance of the image. And if your putting an email address in an image as spam protection then putting the address in the alt tag would negating trying to hide it from the spiders.
log homer on May 20, 2008 at 9:46 pm
@SEO Canada | You’re right | No One Talks Like This | Point Taken
: )
I appreciate the advice, I’ve got a lot of changes to make.
Leave a Comment