Alt texts for images

Contents

What is an alt tag?

An alt tag, also known as "alt description," "alt text," or "alt attribute," is an HTML attribute applied to image tags to describe the appearance and function of an image on a page.

Uses of alt tags

Alt tags have many uses, including:

Web accessibility

When added to photos, alt texts improve web accessibility, especially for visually impaired users. Such users will read the alt descriptions to understand on-page images better.

Display when images can't be loaded


In the event images on your website fail to load, alt tags will display the info describing them.

Provide better image context or descriptions

By doing so, alt tags make it possible for search engine crawlers to index images properly.

Optimal alt text format

The right format for an alt attribute is a sufficient description that doesn't contain spammy content or keywords. For the sake of ease, here are some examples of alt tags for an image of a delicious-looking stack of blueberry pancakes.

Acceptable ways

  • <img src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">
  • <img src="pancakes.png" alt="pancakes">

It is ok to write your alternative text either way, but the first option is much better because it is more descriptive of what is in the image.

Not recommended

  • <img src="pancakes.png" alt="pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe">
  • <img src="pancakes.png" alt="">

What is wrong with the above two examples? Any guesses? Well, the first one demonstrates keyword stuffing. The second doesn't have any alt text (the quotes are empty). So, avoid implanting either of these two practices.

Why are alt tags important?

Accessibility

As mentioned earlier, alt text provides a way for visually impaired people to decipher what on-page images are all about. Besides, if your screen reader or browser is blocking images, you will understand what the image is all about by reading alt descriptions.

Image SEO


Alt texts are also good for SEO. While search engine recognition technology has advanced in recent years, search crawlers yet can't see images on your website as we do - that why it crucial to include the alt text. By having an alt description, you make it easier for them to rank for the right keywords.

How do I write a good alt text?

Keep it short

Try to keep the description around 125 characters. Long descriptions won't give you an upper hand!

Describe the images as precisely as possible

Give enough information and be cautious not to add unnecessary content or keywords so that even users who can't see them can understand what the image is about.

Include your keywords

Alt tag offers you another opportunity to include those keywords you target on your page, making it easier for search engines to see your pages' relevance to particular search queries.

Say no to keyword stuffing

Google hate poorly added alt texts. In fact, you might be in trouble if Google notices you are using alt descriptions as an opportunity to stuff as many relevant keywords as you think. So, don't let that desire to include more keywords drive you.

Don’t forget longdesc=""

Explore using the longdesc="" tag for more complex images that require a longer description.

Don't use images as text

Search engines can't read text within your images. Therefore, avoid using images in place of words. If you must do so, use alt text to explain your photos.

Avoid including "picture of," "image of," etc. in your alt tag

It is already assumed your alt description is referring to an image. So, there is no need to specify it.

Don't neglect form buttons

Those form buttons on your website, such as the "submit" button, make sure to include an alt text if using images. Image buttons should have an alt description that describes the function of the button like "apply now," "search," "sign up," etc.

How to check if an image has an alt description?

Do the following to check if you have added alt descriptions to all images on your website: Go through your content management system and scrutinize every image you included to see if it all has alt text. Note that this can be time-consuming, so you may be better off using a third-party app to go through your website to see if alt text exists on every image. Fortunately, there are many alt tag checkers on the market. Once you notice some images require alt text, instantly correct that.