The Alt attribute provides a textual description of an image used on your web page. Its purpose is to describe the image for those who are unable to see it.
Although these are also referred to as ‘Alt Text’ (alternative text) or ‘Alt Tag’s (although this second term is technically incorrect), we prefer the name ‘alt attribute’ since from a strict HMTL perspective this is the correct definition, since ALT is an attribute of the IMAGE element.
How Alt Attributes are used
Alt attributes are used in the following ways:
- To enhance web accessibility, so that visually impaired users using screen readers can read the attribute to understand what the image represents;
- To be displayed in place of an image, in the event of the image not being able to be loaded, or where a user has turned off image loading in their browser;
- To provide an improved context of the image to search engine crawlers such as the GoogleBot, helping them index the page correctly.
You use the <IMG> element to insert images into your page. This element can inlcude the ALT= attribute, which means alternative text.
Alt Attribute Example
<img src="gorrilaagencylogo.png" alt="black siloutte of a gorilla on a transparent background">
Best practices for ALT text
Alt text should provide an objective description of an image, but should not describe it’s purpose (this is a common mistake). For instance, a web developer for an SEO agency may use an image of a group of professional men and women seated around a table and be tempted to fill the Alt attribute with ‘Leaders in SEO consultancy’. However, this would be a mistake as a poor use of the Alt attribute and would ultimately be penalised by Google.
A more useful Alt description would be ‘group of professional workers, seated around a table in a modern office’. This more accurately describes the image and is more useful to visually impaired users.
Another common mistake that amateur SEO consultants make, is to keyword stuff Alt attributes. This is where Alt tags are stuffed with a range of targeted keywords, relevant to the page or site, but bear little or no relevance to the image. This is another bad practice that should be avoided at all costs. Not only will you drive Google away, but you will also annoy and frustrate your visibly impaired client base.
Let’s look an example of of a beautiful bunch of mixed roses:
<img src="roses.jpg" alt="roses">
<img src="roses.jpg" alt="mixed bunch of red, white and pink roses">
<img src="roses.jpg" alt="flowers roses rose petals florist bouquet floral decoration funeral wedding">
<img src="roses.jpg" alt="">
Top 10 Tips for Writing Good Alt Text
- Do NOT keyword stuff. You might be thinking this will improve the SEO of your page but you’ll be completely wrong. Keyword stuffing is a sure way of having your page penalised by Google and other search engines.
- DO provide full and meaningful descriptions for your images. The Alt attribute is there to describe your image to the visually impaired and screen readers. Don’t go overboard, but do provide good descriptions of what each image represents.
- Do NOT use words like ‘image of’, ‘picture of’, ‘photo of’. These words are uncessarly as it is obvious what you are describing is an image.
- DO use targeted keywords, but ONLY those that relate to the image being described. What we mean here is that if your page is aimed to attract birdwatchers and you are describing an image of a bird, then do use the word ‘bird’ as part of your description as it will support your keyword targeted SEO. However, if the image is of a camera then it is evident that the word ‘bird’ would be inappropriate and use of it would be a form of ‘keyword stuffing’. Google’s crawlers are becoming increasingly sophisticated and it would be only a matter of time before your page is penalised.
- Do NOT use the attribute longdesc= to add extra text and descriptions. Although some SEO consultants are still recommending to use this attribute, most modern browsers no longer support it, having become obsolete in recent years.
- DO keep the length of your Alt text relatively short. Many screen readers cut off alt text around the 125 character mark, so keeping your text within that boundary is best practice.
- Do NOT use Alt text for background or styling images. If an image is purely for styling purposes and does not convey any meaning or serve another purpose then it should not have an Alt attribute at all and live within the CSS, not the HTML.
- Do not be repetitive in your descriptions. Write your alt text to be succinct, precise and accurate.
- DO read your alt text aloud to make sure it makes sense. If your alt text doesn’t make sense to an average user, then it won’t make sense to a search engine crawler, or to a screen reader. Read your alt text out loud to ensure it is well written and to ensure it full describes your image.
- DO keep up to date with Google’s image best practices. By following Google’s own advice you will avoid some of the common pitfalls of SEO, and avoid indexation penalties.