An alt attribute, also known as "alt description" or "alt text" is an HTML attribute applied to image tags to describe the appearance and function of an image on a page. Here's an example of an image alt attribute:
<img src="/images/pancakes.jpg" alt="Pancakes with maple syrup">
As you see, the alt text of an image provides a short description of what can be seen in the image. This article explains why you should use it, and what alt texts mean for SEO.
There are various good reasons to add an alt text to every image, such as:
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.
In the event images on your website fail to load, alt texts will display the info describing them.
Search engines have a hard time understanding images. By providing an alt text, the search engine's bot can understand what is in the image.
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.
- <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.
- Too much similar keywords (keyword stuffing): <img src="pancakes.png" alt="pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe">
- No alt text: <img src="pancakes.png" alt="">
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.
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.
Try to keep the description around 125 characters. Long descriptions won't give you an upper hand!
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.
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.
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.
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.
It is already assumed your alt description is referring to an image. So, there is no need to specify it.
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.
SiteGuru's site audit report checks every page for image alt texts. The image report shows you for every page which images do not have an alt text.
You can find the image report in the site audit report under Content.