Alt text (alternative text) are used to give images a description on web pages. The alt text resides in the HTML code of a webpage. This information has a variety of important uses.
- Accessibility. Those with visual impairment are able to better understand the page’s content if images are descriptively explained to them.
- If an image fails to load, the alt text will be shown in place of the missing image.
- Search engines like Google cannot understand what an image is – therefore they rely on alternative text to be able to understand, categorize and display images in search results. If done properly, this can benefit your SEO ranking.
There is a right way and a wrong way to create proper alt text. Alternative text should NOT contain any spammy attempts at keyword stuffing. Here is an example:
<img src="Moose-on-Road-1.jpg" alt="Moose">
This alt tag is barely adequate as it’s not very descriptive. There is more to this image then just a moose, and so it doesn’t adequately describe the image.
<img src="Moose-on-Road-1.jpg" alt="Moose crossing a rural road in front of a car">
This alt tag more accurately describes the image so that we know exactly what is going on in the image if it cannot be seen. Yes you should use keywords in the image IF they apply to the image. Your alt text shouldn’t be too long though. Screen readers normally cut the text off around 125 characters.
Do NOT use and empty alt tag for an image that contains content.
<img src="Moose-on-Road-1.jpg" alt=" ">
Do NOT make spammy alt text to try and increase your SEO. The text should be a readable sentence and not random words. Repeating words within the alt tag is not recommended.
<img src="Moose-on-Road-1.jpg" alt="Moose Bull Car Van Road Moose Wilderness Rural Alaska Moose Daytime ">
Do NOT use “image of…”. Screen readers will declare to the user that this is an image before reading the alt text, so you don’t need to re-declare that it is an image.
<img src="Moose-on-Road-1.jpg" alt="Image of a moose crossing the road in front of a car ">