What’s the Difference Between Alt and Title Attributes on Images?
Today’s tip was inspired by a client question: how do you get text associated with an image to pop up when you hover over the image?
There are two attributes that allow you to associate text with an image. This is helpful not only for your visitors, but also for search engines to understand what the image is.
Alt Text
Alt (alternative) text should be used to describe the image. If a visitor has disabled images from displaying in their browser, they would see this text in its place. Take for instance this image of a cup of coffee.
By adding the alt attribute like so:
<img alt="Cup of coffee and coffee beans on wooden background" />
You can now “see” that this is a cup of coffee and coffee beans on a wooden background.
How is this helpful?
For your visitors, particularly those who may be visually impaired, this allows them to understand what the image is, and helps ensure compliance with ADA requirements.
For your website, it can help support your search efforts. If this image was on a page about coffee, adding the supportive keywords will give your page a little SEO boost. Most of us have searched for something and then clicked on the “Images” results – it works in the same fashion as regular keyword searches.
Title Attribute
The original question we were asked was how to make text appear when you hover over the image, like so:
<img title="Our locally sourced coffee is the best!" />
In this case, it’s more a visual cue for the visitor. In the coffee example, the Alt attribute described what it was a picture of. The Title, meanwhile, is short and catchy, and we hope it will be helpful for the visitor to decide to buy from us.
How is this helpful?
While the Alt attribute is more important for being crawled, the Title is more of a benefit for the visitor. It’s not entirely essential.
Note: for both Alt and Title text, it’s important to avoid keyword stuffing, the same as for regular content. That’s a search engine no-no!