Alt and Title Attributes

Alt and title attributes have been a bit of a grey area for novice web workers and it shows in the constant misuse of the tags I find myself correcting. The two attributes are not interchangeable and they are not intended for the same circumstances, though they are often found used together around linked images. While they may be both okay here, they must be used in the correct tag or their effect is negated.

Having clean, standards correct code is becoming the new hot trend since Google started incorporating page load times and markup validation into their page rank algorithms. This is another step to not only injecting keywords in more places while maintaining valid mark-up on a more robust site.

<img src="..." alt="The Alt Attribute" />

The alt attribute is used in the image tag (<img />) is designed for text-readers and crawlers to help identify an image, especially when there may be text on that image or is contextually relevant. Because bots can't "see" images and that which is contained on it (not yet, anyway), the alt-tag offers them a glimpse as to what's on the image, so they can index it and add in any keywords it may have. It also offers text-readers and those without screens/sight to be able to have some reference to what's on the image and use it in the context of the page.

The alt tag is a way for crawlers and other search engine bots to read what's on the image so regardless, make sure you load it with keyword appropriate copy but always make sure it is relevant; keyword spamming here is no bueno. Just use the phrase on the image if that's all that's there or use a brief description if it's an image without text in it.

<a href="..." title="The Alt Attribute" >The Title Attribute</a>

The title attribute is used to title elements. This can be used for just about any element and, when used with hyperlinks, allows the user and the crawlers a description of what lies ahead if the link is clicked. The user sees the title attribute as a small balloon next to the cursor when a link is hovered over.

This is, again, a great place for keyword injection but as opposed to providing text readers and crawlers context, the title attribute is seen by all users and can be used with more colorful language and longer descriptions. The title attribute acts in the same manner as the text that the hyperlink it contains in that the text and the title are both used to add keyword juice to the page that's being linked to.

Last Minute Tip: If you run out of tasks to do, go back and check to make sure each image has an appropriate alt tag and that elements that should have title tags do have them, but don't get carried away with the keyword spam.