Image ALT vs TITLE: Using ALT & TITLE Attributes In Image Tags

Let’s talk about “title tags” and “alt tags” for a minute. I’m writing this post because, despite there being a wealth of information on the matter, I still see ALT and TITLE being misused pretty regularly… So think of this as an SEO PSA.

First off, let’s clear something up. The element is a tag, while ALT and TITLE are attributes of that tag. I often catch myself referring to “ALT tags”, but they’re technically attributes.

Image ALT Attribute

This video from Matt Cutts speaks on the importance of the ALT attribute. He reminds us that ALT stands for alternative, as in “alternative text”. If someone is using a screen reader, or they can’t load the image for some reason, your browser can show you this alternative text instead. The video may be a bit dated, but the info is still accurate.

So the image ALT text should serve as “a textual substitute for an image within a given context” (source). It’s not only helpful for people with disabilities who are using screen readers, it’s also helpful for Google.

Image TITLE Attribute

The image TITLE attribute “offers advisory information about the element for which it is set” (w3). It is displayed in a “tool tip” when you hover your cursor over the image. When written in conjunction with the ALT attribute, the TITLE text should complement the ALT text.

Implementation of TITLE and ALT Attributes for Images

To make this a little more entertaining, I’m going to use this image of my girlfriend’s daughter that recently made the rounds on Facebook and some other fairly large sites.

Now let’s take a look at the HTML code for this image:

<a href=”https://www.johnvantine.com/slayer-sidewalk-chalk-the-worlds-cutest-metalhead/”><img src=”http://www.wpromote.com/blog/wp-content/uploads/2012/09/makena-slayer-sidewalk-chalk.jpg” alt=”Child draws Slayer logo with sidewalk chalk” title=”Makena drawing the Slayer logo on a sidewalk using colored sidewalk chalk.” width=”630″ height=”471″ /></a>

As you can see:

• The image itself is linked to the original source.
• The image filename is makena-slayer-sidewalk-chalk.jpg, because you should always use descriptive image filenames, ’nuff said.
• The image ALT text briefly describes the contents of the image.
• The image TITLE text elaborates a bit on what was established by the ALT text.

When writing an ALT attribute for an image, don’t overdo it. The ALT text doesn’t need need 50+ words. Just a basic description of what’s going on in the image is sufficient. You can elaborate a bit in the TITLE text.

Keep in mind that filling the image ALT and TITLE attribute with keywords is considered keyword stuffing, and puts you at risk of being penalized. It’s not worth the risk.

SEO Benefit of ALT and TITLE Text

The TITLE attribute isn’t indexed by the search engines, and it won’t improve your rankings, but it can still be helpful to the user. If you decide to use TITLE text on an image, don’t just copy the ALT text – use the TITLE attribute to complement the ALT text.

Okay, so when does the ALT attribute have SEO benefit? Well, if you’re using an image to link to something, you don’t have any anchor text, right? In this scenario, the search engines may look to the ALT attribute of the linking image to determine what that link is about – so the ALT text essentially becomes the anchor text for that particular link.

Using descriptive ALT text can also result in more image search traffic! Utilizing the ALT attribute to write descriptive, relevant alternate text for your image will help the search engines to figure out what your image is about, and the image is therefore more likely to list highly in image searches. If the image has a descriptive filename, that helps too. The image above could potentially list in image search for things like “slayer sidewalk chalk”, “slayer logo”, “slayer chalk”, etc because of the text used in the filename and the ALT attribute.

So… Should I Use Both?

While the ALT attribute provides alternative text when images cannot be displayed, the TITLE text offers supplementary information about the element in which it is contained. According to this post on the Google Webmaster Blog, Google tends to focus on the information in the ALT text. So there you have it! If you’re only going to use one attribute… ALT it is!

TL;DR:
In the context of the image tag, the ALT attribute displays when an image doesn’t load, and the title attribute displays on mouseover. ALT has potential SEO benefit, TITLE does not.