What is alt text?
Alt text (alternative text) — sometimes called “alt description”, “alt text”, or (misleadingly; see below) “alt tags” — is an attribute used with HTML <img> tags to describe the image.
For instance, if you have an image of a puppy on a page, you might use the HTML
<img src="puppy.jpg" alt="A puppy sat on a bench" />
for that particular image.
Note: alt text is an attribute of the HTML img tag, not a tag on its own, and thus referring to alt text as “alt tags” is incorrect. Despite this, you will often see people discussing “alt tags”, so bear this in mind.
Why is alt text used?
Alt text is used for three main reasons.
- To enhance accessibility — Visually impaired users who aren’t otherwise able to see images embedded on webpages benefit from the description an alt text provides, as their screenreader will be able to read the alt text. See our page on designing for visually impaired users for more information and tips.
- If the image can’t be rendered — If an image fails to load, the alt text is displayed in the image’s place.
- To “explain” an image to search engines — Search engine crawlers (bots) aren’t able to appreciate images like humans, so the alt text is a handy way to describe the contents of images to search engines, which helps them index the image.
How does alt text affect SEO?
Search engines can’t appreciate images like we can, so they need a little help. In addition to the contents of the page the image appears on, as well as other factors, search engines use alt text in order to decide what an image is about.
Well-written alt text will contribute to images appearing higher up in image search results, boosting your website’s SEO. Better yet, you can incorporate your keywords in images’ alt text, where appropriate, which may help your website’s ranking for your chosen keywords.
Alt text will help search engines know your website is relevant for a particular search query. As a general example, an image with the alt text of “Man wearing Manchester United football t-shirt” will let Google know your page is football-related.
Tips for writing SEO-friendly alt text
- Describe the image well — Write useful, specific descriptions of images. Imagine you cannot see the image in front of you; what sort of description would help you appreciate the image?
- Clearly label buttons — Buttons on forms, such as “submit” buttons and similar, should be given appropriate alt text. For example, a button that submits a search query should be given the alt text “search”, and buttons that submit a sign-up form should similarly be given text like “sign up”, “click to join”, etc.
- Stay within 125 characters — Most screenreaders won’t read beyond 125 characters, so don’t write too much. Aim to succinctly explain the image as best as you can.
- Use your keywords — Incorporating your keywords into alt text is a fantastic chance to let search engines know your page is relevant for the search queries containing the keyword. Don’t be tempted to keyword stuff; insert your keyword into images’ alt text only where appropriate, and ideally no more than twice in each page.
- Don’t write “image of” or “a photo of” — Alt text is always describing an image, so this is unnecessary and wastes the 125-character limit you should be aiming for!
- Avoid images of text where possible — Don’t fill your pages with images of text. Not only does this present a major issue for those with visual impairment, it is bad from an SEO perspective, as search engines will not be able to ‘read’ your image.
Examples of good alt text
Consider this image:
Bad:
<img src="puppies.jpg" alt="Puppies" />
Better:
<img src="puppies.jpg" alt="Two puppies in grass" />
Best:
<img src="puppies.jpg" alt="Two yellow Labrador Retriever puppies sitting happily in grass" />
The final alt text above is the most descriptive, while staying nicely concise.
Another example:
Bad:
<img src="car.jpg" alt="Car" />
Better:
<img src="car.jpg" alt="A blue car" />
Best:
<img src="car.jpg" alt="A blue BMW sedan parked on tarmac with grass and trees behind" />