Image’s Alt Attribute

Defining an image’s ALT attribute

What is an alt tag?

An alt tag, also known as “alt attribute” and “alt description,” is an HTML attribute applied to image tags to provide a text alternative for search engines. Applying images to alt tags such as product photos can positively impact an ecommerce store’s search engine rankings.

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Example:

An image with an alternate text specified:

<img src=”img_girl.jpg” alt=”Girl in a jacket” width=”500″ height=”600″>

Syntax: <img alt=”text”>

Attribute Values:

“Text” specifies an alternate text for an image.

Guidelines for the alt text:

• The text should describe the image if the image contains information
• The text should explain where the link goes if the image is inside an <a> element
• Use alt=”” if the image is only for decoration

Where is an alt tag located?

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

What purpose do alt tags serve?

Search engines and other robots cannot interpret images, but images can play a crucial part in how people interpret a particular web page. Alt tags solve for this by providing text which is read by the search engines. When Googlebot or other search engine crawlers inspect a page, images with properly formatted alt text contribute to how the page is indexed and where it ranks.

Alt tags are also useful for users viewing a webpage on screen readers or browsers that can’t process images.

https://www.youtube.com/watch?v=xcWwcTRS79s

Why is image alt text important?

Understanding these reasons will help you write the best alt text possible for your images:

1. Accessibility. Any webpages including images (or movies, sounds, applets, etc.) should include equivalent information to its visual or auditory content.
2. User Experience. Say, a visitor has a low-bandwidth connection so the images on your webpage aren’t loading. Instead of just seeing a broken link icon, they’ll also see the alt text. This will allow them to glean what the image was meant to convey. 
3. Image Traffic. One of the most important things image alt text can do for you is turn your images into hyperlinked search results that appear either in Google Images or as image packs. Image packs are special results displayed as a horizontal row of image links that can appear in any organic position (including the #1 spot on a SERP, as seen in the example in the intro).

Images that appear in either Google Images or image packs provide yet another way to receive organic visitors. This can result in thousands of more visitors.

Importance in seo

Alt text helps Google to better understand not only what the images are about, but what the webpage as a whole is about. This can help increase the chances of your images appearing in image search results.

When creating content on a topic, consider how your audience might prefer to find answers to their questions on that topic. In many cases, Google searchers don’t want the classic blue, hyperlinked search result — they want the image itself, embedded inside your webpage.

For example, a visitor looking up how to remove duplicates in excel might prefer a screenshot so they can understand how to complete the task at a glance. Because the image has optimized alt text, it appears in image search results for the longtail keyword “how to remove duplicates in excel.” Since the post also appears in the web search results for the same keyword, visitors could land on the blog post through these two different channels. 

When to use alt text?

• Images and pictures
• Diagrams, flow charts, and charts
• Videos

When not to use alt text?

• Decorative visual objects
• Slicers and tables

Good vs Bad Alt Text Examples

Bad Alt Text

alt=”Baseball player hitting a ball at a baseball field”

The line of alt text above technically follows the first rule of alt text — be descriptive — but it’s not being descriptive in the right way. Yes, the image above shows a baseball field and a player hitting a baseball. But this is also a picture of Fenway Park — and the Red Sox’s #34 David Ortiz clocking one over right field. These are important specifics Google would need to properly index the image if it’s on, say, a blog post about Boston sports.

Good Alt Text

With the bad alt text (above) in mind, better alt text for this image might be:

alt=”David Ortiz of the Boston Red Sox batting from home plate at Fenway Park”