Alt (Alternative Text)

What Is Alt

Alt (short for alternative) is an attribute of the img tag that provides a text description of an image. It appears in three cases: when the image fails to load, when a user is using a screen reader (for blind people), and when a search bot analyses the page. HTML code example:

<img src="product.jpg" alt="Red Nike Air Max sneakers on a white background">

Why Alt Matters for SEO

Search bots do not 'see' images. To them, an image is just a file path and a few bytes of metadata. The alt attribute is the only way to convey the meaning of the image to the bot. Here’s what it gives for SEO:

• Helps rank in Google Images — with proper alt, the image may appear for relevant queries.
• Increases page relevance — if alt contains keywords, it's an additional signal for web search.
• Improves accessibility — sites with correct alt earn user goodwill and may have an advantage in behavioural signals.
• Context for internal linking — an image with alt can pass link equity if linked.

How to Write Alt Text Correctly

The main rule: alt should accurately and concisely describe the image. Here are several principles:

• Be specific — instead of 'sneakers', write 'blue Asics Gel-Kayano 30 running sneakers'.
• Do not spam keywords — 'buy cheap sneakers sneakers moscow' is a violation.
• Consider page context — if the image is decorative, use alt="".
• Length — 50–120 characters is usually enough to stay natural.
• Avoid phrases like 'image of', 'picture of' — screen readers already announce it's a graphic.

Good vs Bad Alt Examples

Consider the same image — a Dell XPS 13 laptop on a table. Alt variations:

❌ Bad: 'laptop' (too generic) 
❌ Bad: 'buy dell xps 13 laptop cheap laptop moscow' (spam) 
✅ Good: 'Silver Dell XPS 13 on a wooden table' 
✅ Great: 'Dell XPS 13 laptop with lid open, coffee and notebook nearby — programmer's workspace'

Best Practices

• Always add alt to meaningful images (products, graphics, blog photos).
• For decorative images (backgrounds, icons without meaning) use alt="" and add presentation role if needed.
• Use the same description as the image title on hover — but don't copy blindly; title is typically longer and more creative.
• Test your site with a screen reader (VoiceOver, NVDA) — is the description audible?
• Avoid identical alt for different images on the same page — reduces informativeness.