What Is Alt Text and How Should You Write It
Alt text, short for alternative text, is the HTML attribute that describes an image in words, written as <img src="shoe.jpg" alt="Men's blue trail running shoe, side view">. Screen readers read it aloud, browsers show it when an image fails to load, and search engines use it to understand the image. You should write it as a short, specific description of what the image shows, or of what it does if it is a button or link, and leave it empty for images that are purely decorative or whose meaning the text right beside them, such as the words of the same link, already gives.
Why It Matters for People and for Search
Google’s image SEO guidance puts both purposes in one sentence: “The most important attribute when it comes to providing more metadata for an image is the alt text (text that describes an image), which also improves accessibility for people who can’t see images on web pages, including users who use screen readers or have low-bandwidth connections.” It adds: “Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image.”
A description that helps someone who cannot see the image is the same description that tells a search engine what the image is.
How to Write Good Alt Text
- Describe what matters in the image, specifically. “Running shoe” says little; “Men’s trail running shoe in slate gray, three-quarter view” says what the visitor would see.
- Leave out “image of” and “picture of.” Screen readers already announce that the element is an image.
- Describe the function of a functional image. A magnifying glass that opens search should read “Search,” not “magnifying glass icon.” A linked logo should say where the link goes.
- Keep it concise. If the image needs a paragraph of explanation, put that paragraph in a caption or the surrounding text and keep the alt text to the image itself.
- Do not stuff keywords. Google warns: “Avoid filling alt attributes with keywords (also known as keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam.”
Google’s own example shows the range:
| Version | Alt text | Verdict |
|---|---|---|
| Missing | No <!–INLINECODE1–> attribute | Bad |
| Keyword stuffing | <!–INLINECODE2–> | Bad |
| Generic | <!–INLINECODE3–> | Better |
| Specific | <!–INLINECODE4–> | Best |
Decorative Images
Some images add nothing to the content: a background texture, a divider, a flourish. The W3C’s guidance on decorative images says that such images should get “a null (empty) alt text” (alt="") “so that they can be ignored by assistive technologies, such as screen readers.” Leaving the attribute out is not the same: “Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.”
Whether an image is decorative is a judgment about why it is on the page. The W3C’s alt decision tree walks through the questions.
Images Used as Links
When an image is the link, its alt text does the job of anchor text. Google’s link best practices state that when an image is used as a link, Google treats its alt attribute as the anchor text. When the image is the only content of the link, describe where the link goes or what it does; an empty alt there leaves the link without a name. When the same link also contains visible text, such as a product photo above the product name, the text already names the link, and the W3C’s functional images tutorial shows empty alt text for the image so the name is not read twice.
Quick Reference
| Image type | Alt text approach |
|---|---|
| Informative, such as a product photo or illustration | A concise, specific description of what is shown |
| Decorative, such as a texture or divider | Empty: <!–INLINECODE6–> |
| Functional, such as an icon button or linked logo | The action or destination |
| Complex, such as a chart or diagram | Short alt text that says what the image shows and where the details are, with the full data or description in the page text directly next to it |
| The only link to a destination | Written like anchor text for that destination |
What Alt Text Is Not For
Alt text is not a place for a keyword list, for marketing copy unrelated to the image, or for information the page text should carry. The image’s filename and the text around it also tell Google about the image; Google’s guidance asks you to place images close to related text, so the description and its context support each other.
Auditing Alt Text
Crawl the site with a tool that reports images without an alt attribute and images with empty alt text, then review them by type. Start with product images, images that act as links, and the main image on important pages, where a missing or generic description costs the most for both visitors and search.