What Is Alt Image Text, and Why Should I Use It?
Alt image text is a short description associated with an image that conveys the contents of that image. It was originally created for the benefit of visually impaired users with screen readers or programs that attempt to audibly provide and describe the text/content of an online webpage. (I found out about screen readers when my kid was playing around on the computer, pressing random buttons, and enabled the feature.)
Today alt image text additionally helps users understand the picture if the image is blocked or doesn’t load properly. The purpose of alt image text was—and still is—to provide a good user experience.
Why Does Alt Image Text Matter?
Images are important to Google because images contribute to a positive user experience by supplying supplemental, useful, and relevant context to the text on a page. Alt image text also matters because search engine crawlers can’t read images.
Search engines like Google want to verify that an image helps instead of inhibits the user experience.
If I sell a miracle product that removes stains from clothes, an image showing the results of the product will help users decide whether they want that product. However, while Google can see that an image exists, they do not know what the image is about unless I let them know through alt image text.
What Does It Look Like?
In HTML coding, you see two basic parts to an image: the source of the image, notated with “src,” and the alt tag, notated with “alt.”
<img src=“ ” alt=“ ”>
An example of the image with a defined source and tag looks like the following:
<img src=“example.com” alt=“image of an example”>
What Not to Do
While writing alt image text, you should avoid these practices:
- Stuff the alt tag with keywords.
<img src=”stain.jpg” alt=”stain remover best stain remover stain remover product blood stain removal ink stain removal best stain remover product miracle stain remove miracle stain removal”/>
Stuffing looks spammy, is not good for user experience, and will most likely have negative consequences for your website visibility.
- Leave the alt tag blank.
<img src=”stain.jpg” alt=””/>
This practice is better than keyword stuffing, but it doesn’t describe the image to the search engines or benefit your website.
What to Do
Instead, follow these tips as you write alt image text:
- Name the product.
<img src=”stain.jpg” alt=”stain remover”/>
By doing so, you’ll let the search engine know what the image is and why it is relevant to the page.
- Describe the image.
<img src=”stain.jpg” alt=”Product removing stain from shirt”>
This text is more specific to and explains the image. It is good for user experience, and search engines such as Google can fully understand the image and its purpose in relation to the text on the page. Place the image around content that is relevant. It wouldn’t make sense to have a properly optimized image with alt text if the content around the image is talking about the plotline of a movie you went to see last week. The point of alt image text is to give search engines a better understanding of how the image relates to the rest of the page.
What Is the Difference Between the Alt Attribute and Title Attribute?
Some editing systems, like WordPress, will give you the option of adding alt image text and a title to the image. A title attribute will usually show up if you hover over an image in a browser like Opera or Firefox. I get a lot of questions about which one is more important and which one should be used.
The alt attribute as discussed is used to describe an image. The title attribute is used to supplement the alt attribute. In the stain remover example, we would keep the alt image text as “Product removing stain from shirt.” We could then expand and make the title something like “View an enlarged version of this picture.”
If you have to choose between filling in the alt attribute or title attribute, go with the alt attribute.
Now that you know why you should implement and how to implement effective alt image text, go forth and optimize your images!
