What is an alt tag?

An alt tag or “alt attribute” is an HTML attribute applied to an image tag that describes the function of an image on a page. Applying images to an alt tag such as a product photo can positively impact an eCommerce store’s search engine rankings.

What role do alt tags play?

1. Its primary purpose is to describe images to visitors who are unable to see them using screen readers and browsers that block images.
2. Visually impaired users using screen readers read alt attributes to better understand an on-page image. Including alt text with your images ensures all users, regardless of visual ability, can appreciate the content on your site.
3. Alt text will be displayed in place of an image if an image file cannot be loaded.
4. Alt text provides better image context/descriptions to search engine crawlers, contributing to how the page is indexed and where it ranks.

With on-page keyword usage still pulling weight as a search engine ranking factor, it’s in your best interest to create alt text that both describes the image.

Optimal Alt Text Format

The best format for alt text is sufficiently descriptive but doesn’t contain any spammy attempts at keyword stuffing. If you can close your eyes, have someone read the alt text to you, and imagine a reasonably accurate version of the image, you’re on the right track.  Let’s look at this example of alt text for this image of a delicious bowl of jollof rice: Okay: <img src=”rice.png” alt=”Jollof”>  This alt text is only “okay” because it’s not very descriptive. Yes, this is an image of a plate of Jollof. But, there’s more to be said about this image. Good:  <img src=”rice.png” alt=”A plate of delicious jollof rice with loaded meat and salad”> This alt text is a better alternative because it is far more descriptive of what’s in the image. This isn’t just a rice plate of “Jollof” (as the first alt text example demonstrated); it’s a plate of delicious jollof rice with loaded meat and salad.

Where is an alt tag located?

Alt text is contained within the image tag: <img src=”myimage.png” alt=”nike_air_zoom” />.

Best practices

• Keep product image optimised for site speed and use the same keyword as the product page itself.
• Keep it (relatively) short. The most popular screen readers cut off alt text at around 125 characters, so it’s advisable to keep it to that character count or less. 
• Refrain from keyword stuffing.  You’ll be in trouble with Google if you use your alt text as an opportunity to stuff as many relevant keywords as you can think of into it. Find the best keywords to use here.
• Don’t prioritize alt tags over SEO deliverables such as titles, inter-linking, and meta descriptions. Alt tags should only be prioritized for image-heavy pages that are very light on text.
• Describe the image as specifically as possible. If an image truly doesn’t convey any value, it should live within the CSS, not HTML.
• Alt text provides you with another opportunity to include your target keyword on a page. Thus, an opportunity to signal to search engines that your page is highly relevant to a particular search query. While your first priority should be describing and providing context to the image, include your keyword in the alt text of at least one image.
• Don’t include “image of,” “picture of,” etc. in your alt text. It’s already assumed your alt text is referring to an image, so there’s no need to specify it.
• Don’t neglect form buttons. If a form on your website uses an image as its “submit” button, give it an alt attribute.