What is alt text, and how should I write it?

Alt text, explained

The syntax is <img src="…" alt="Dashboard showing weekly clicks rising from 2 to 45">. For people using screen readers, alt text is the image. For search engines, it's one of the main clues about what the image shows and how it relates to the page, alongside the filename and surrounding text.

Google's image SEO guidance asks for alt text that's useful and information-rich, uses keywords appropriately and fits the context of the page. It warns that filling alt attributes with keywords results in a negative user experience and may cause your site to be seen as spam. So describe the image the way you'd describe it to a colleague over the phone.

Some practical rules. Describe what matters about the image in this context, not every detail. Screenshots should say what they show, like "Search Console Performance report, three months". Charts should state the takeaway. Decorative images, like background shapes or icons next to text that already says the same thing, should use an empty alt="" so screen readers skip them. Avoid starting with "image of"; screen readers already announce images.

Alt text only works on real <img> elements. Images set as CSS backgrounds can't have alt text, and Google's guidance recommends HTML image elements for images you want found.

Why it matters for founders

It's the accessibility basic that also helps image search. For product screenshots and diagrams, good alt text is how Google knows what they show.

Example

A hero screenshot has alt="screenshot". You change it to alt="Launch page with weekly leaderboard and upvote button", which tells both screen reader users and Google what the product looks like.

Common mistakes

• Keyword lists in alt attributes.
• Missing alt on meaningful images.
• Describing decorative images instead of using alt="".
• Important images set as CSS backgrounds.