Using title and alt attributes effectively

by Brittany Horton on August 24, 2009

In a recent post, we discussed how the new Firefox does not show the alt text when hovering over an image. Alt tags allow adaptive users to be able to “read” rather than view the content of an image or link. In addition to providing an additional avenue for keyword integration, an accessible website ranks better in the search engines. They are necessary for a WC3 Compliant website.

As with many things in life, there is a work-around to have the information you desire to show up when you hover over an image or link. This particular work-around takes the form the title attribute. The title attribute is a sort of elemental metadata that allows you to give additional information about your image or link (or any HTML element for that matter). Firefox does show the title attribute when hovering over your element. This is great for user expectations, accessibility, and SEO.

When writing code for a web page you should keep in mind that alt tags and title attributes are both considered by the search engines when ranking your site. There are discussions going on about which one is considered more important when determining rank, it seems like the alt tag is winning the fight. According to W3C and SEOBOOK.com, alt tags are ranked higher than the title attribute.

At Content Solutions, we include both the alt tag and title attributes to our images and links to allow for optimum accessibility and organic SEO. However, if you choose one over the other, consider the purpose of each

  • Alt attribute: the alt attribute should describe the content of the image in a way that allows users to understand what they are unable to “see”.
  • Title attribute: a kind of elemental metadata that allows you to give extra information about the image.

Used in tandem, they give you an excellent opportunity to incorporate keyword integration. However, you don’t want to over-do it. What is most important for links on a site is the anchor text to be keyword heavy, with the title tag adding to those keywords while giving a good description that makes sense.

Leave a Comment

Previous post:

Next post: