On-page

Alt text: how to write it for people and for search

6 min readUpdated

Alt text is the description in an image's alt attribute that stands in for the image when it cannot be seen, read by screen readers and search engines alike. Google calls it "the most important attribute when it comes to providing more metadata for an image." It is one of the on-page signals that serves readers first.

What alt text is

Alt text is a short text alternative written into the alt attribute of an <img> element. Google's image documentation gives a plain example:

<img src="puppy.jpg" alt="A golden retriever puppy" />

The attribute is for the content of the image in the context of the page, not for its file name or its caption. Google's SEO Starter Guide, last updated on , describes it as "a short, but descriptive piece of text that explains the relationship between the image and your content."

Who reads it

Three kinds of reader depend on alt text, and they need the same thing.

  • People who cannot see the image

    Screen readers read the alt text in place of the image. Google notes that alt text "improves accessibility for people who can't see images on web pages, including users who use screen readers or have low-bandwidth connections."

  • Browsers when the image fails

    If the image does not load, many browsers show the alt text instead, so the page still makes sense.

  • Search engines

    Google's image documentation, last updated on and checked on , says: "Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image."

How to write it

Describe what the image shows that matters to this page. Google advises "creating useful, information-rich content that uses keywords appropriately and is in context of the content of the page."

  • Say what a reader would miss

    For a photo of a product, the alt text names the product and the detail the page is about. For a chart, it states what the chart shows, not that it is a chart.

  • Keep it short

    A sentence or less is usually enough. Long explanations belong in the page text, where everyone can read them.

  • Skip "image of"

    Screen readers already announce that an element is an image; starting with "image of" repeats it.

  • Do not stuff it

    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."

Two versions for the same photo on a product page:

  • "backpack travel backpack best backpack cheap backpack"
  • "Atlas 40 backpack with the side zip open, showing the laptop sleeve"

The second helps every reader. The first helps none and is the kind Google warns about.

Images that need an empty alt

Not every image carries information. A decorative divider, a background flourish or an icon next to text that already says the same thing adds nothing for someone who cannot see it. The W3C's Web Accessibility Initiative, in its images tutorial updated on , says to "provide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page."

An empty alt="" is different from a missing attribute. The empty value tells screen readers to skip the image; a missing attribute leaves them to guess, often by reading out the file name. For groups of images that together convey one piece of information, the same tutorial advises that "the text alternative for one image should convey the information for the entire group."

When an image is the only content of a link, its alt text becomes the link's text. Google notes that "alt text in images is useful as anchor text if you decide to use an image as a link." In that case, describe where the link goes, not what the picture looks like: a logo linking to the home page needs alt text that says so.

Alt text in a CMS

Most alt text is written in a content system rather than in HTML. Google's SEO Starter Guide notes that "your CMS may have an easy way to specify a description for an image when you're uploading it to your site." That field is the alt attribute under another name, and it is easy to skip.

Two habits keep it filled. Write the alt text when the image is added to a page, not when it is uploaded to a library, because the right description depends on the page that uses the image: the same photo of a backpack says different things on a product page and in a packing guide. And check the template for images it inserts on its own, such as author photos, logos and icons, since those often ship with empty or missing alt attributes on every page.

Alt text and social cards

Images shared on social platforms through Open Graph tags have their own description field, separate from any alt on the page. What a preview card contains, and how it is built, is covered under preview images. AI SEO enrichment fills missing title, description, Open Graph, card and JSON-LD tags; it does not write alt attributes, which describe images in the page's own content.

FAQ

What is alt text?

Alt text is the description written in an image's alt attribute that stands in for the image when it cannot be seen. Screen readers read it aloud, browsers show it when the image fails to load, and Google uses it, along with computer vision and the page's text, to understand what the image shows.

How long should alt text be?

There is no official length, and this page does not invent one. Write the shortest text that says what the image shows that matters to the page, usually a phrase or a sentence. Longer explanations belong in the page text, where every reader can see them.

What is the difference between alt text and the title attribute?

Alt text replaces the image for people and programs that cannot see it, and it is required for meaningful images. The title attribute adds extra information, usually shown as a tooltip on hover, and many readers never see it. When an image is a link, Google uses the alt text as anchor text.

Do decorative images need alt text?

They need an empty one. The W3C's accessibility guidance is to use alt="" when an image is purely decorative, which tells screen readers to skip it. Leaving the attribute out entirely is worse, because a screen reader may read out the file name instead.