What is alt text? How to write alt text for images, with examples

The short version

• Alt text describes an image in words, for people using screen readers, for anyone whose images do not load, and for Google.
• Write what the image means on that page, not a literal inventory of what is in it. One short sentence is usually plenty.
• Decorative images get an empty alt (alt=""). Missing it out altogether is worse: some screen readers then read out the file name.
• A logo that links to your home page should say where it goes, not that it is a logo.
• Do not stuff keywords into it. Google says that can make your site look like spam.
• We checked every page of our own site, twice. Every image had alt text, but 72 pages give their link-preview picture no description at all.

What is alt text?

In the code of a web page, an image looks something like <img src="puppy.jpg" alt="Dalmatian puppy playing fetch">. The alt part is the alt text: a few words standing in for the picture. It is invisible to most visitors, and it matters to three groups of readers.

Google’s own guide to image SEO names two of them 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.”

The third is Google itself: "Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image." And if an image is a link, the same page adds that "alt text in images is useful as anchor text if you decide to use an image as a link."

How to write alt text for images

The W3C, which writes the web’s accessibility standards, has an images tutorial that starts from one rule: "Images must have text alternatives that describe the information or function represented by them." Its most practical tip is on the tips page:

“Imagine that you’re reading the web page aloud over the phone to someone who needs to understand the page.”

Whatever you would say about the image in that phone call is your alt text. If you would say nothing, the image is probably decorative. Two more rules from the same page: "The alt text should be the most concise description possible of the image’s purpose." And there is usually no need to start with "image of" or "picture of", because "screen readers announce the presence of an image".

What you write then depends on what the image is doing. The W3C sorts images into a handful of kinds, and four cover almost everything on a small business site.

1. Informative images: say what it means here

A photo of your shop front, a product, your team at work. The W3C’s page on informative images makes a point people often miss: "The text alternative should convey the meaning or content that is displayed visually, which typically isn’t a literal description of the image." A product photo on a product page needs the product, its colour and anything a buyer would want to know; a photo of your workshop on the "about us" page might only need "our workshop in Leeds".

2. Decorative images: leave the alt empty, not missing

Background textures, dividers, a stock photo that only sets a mood. For these the W3C’s page on decorative images says to use an empty alt, written alt="", so screen readers skip the image. The trap is leaving the attribute out entirely:

“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.”

So a missing alt can turn a harmless decoration into a screen reader reading out "IMG underscore 4 0 7 1 dot jpeg". And the tips page adds a detail worth checking in your own code: for an empty alt, "make sure that there is no space character in between the quotes". It is also a judgement call, and the W3C says so: "Whether to treat an image as decorative or informative is a judgment that only the author can make".

3. Images that are links or buttons: say what they do

This is where most small business sites go slightly wrong, usually with the logo. When an image is the only thing inside a link, its alt text is the link’s name. The W3C’s page on functional images says the text should describe the action, not the picture, and its first example is a linked logo with the text alternative “W3C home”. Get it wrong by leaving the alt out and, it warns, "Screen readers will typically announce the image file name, the image URL, or the URL for the link destination".

So a logo that takes you to your home page should say something like "Acme Plumbing home", not "Acme Plumbing logo". Hold that thought for the section on our own site.

4. Images of text, and charts

If an image contains words, such as a flyer or a menu saved as a picture, the tutorial is direct: "If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image." For a chart or map, one short phrase cannot carry the data, so the W3C’s page on complex images says "a two-part text alternative is required": a short alt that says what it is, and a longer description in the page text nearby.

Not sure which kind you have? The W3C publishes a short decision tree that walks you through it in five questions.

Alt text examples

Google’s guide uses one image of a puppy to show the range, from worst to best:

• Bad (missing alt text): <img src="puppy.jpg"/>
• Bad (keyword stuffing): the same image with a long run of every dog-related word you can think of in the alt.
• Better: alt="puppy"
• Best: alt="Dalmatian puppy playing fetch"

On keywords, Google is plain: "Avoid filling alt attributes with keywords", because it "results in a negative user experience and may cause your site to be seen as spam." Its positive advice is to write "useful, information-rich content that uses keywords appropriately and is in context of the content of the page."

And some everyday examples of our own, following the rules above. These are ours, not Google’s or the W3C’s:

• A product photo: alt="Navy wool jumper with a round neck, folded".
• A photo of your team: alt="Our three electricians outside the van".
• Your logo, linking home: alt="Acme Plumbing home".
• A decorative swirl between sections: alt="".

Alt text on social posts and link previews

People also search for alt text on Instagram, Facebook and in Word. Each app puts the setting in its own place. We could not read Instagram’s help centre with our tools, so we are not going to describe its steps from memory; the app’s own help page is the place to check.

One place almost nobody thinks about is the picture that appears when someone shares a link to your page. That picture comes from a tag called og:image, and the Open Graph protocol that defines it has a matching description tag, og:image:alt: "A description of what is in the image (not a caption)." Its own rule is short: "If the page specifies an og:image it should specify og:image:alt".

What we found on our own site

We would rather test the advice than repeat it, so on 26 September 2026 we fetched all 117 pages in our sitemap and read every image tag. Some of this we are publishing before we fix it.

• Every image had alt text. All 234 image tags carry it; none is missing, none is empty by mistake, and none is a file name.
• But every one of them is the same image. Our pages have no photographs in them at all (the home page has a video, which is a different question): the 234 images are our logo, twice on every page, and each says "Lola Squared". A result that tidy made us suspicious of our own script, so we also looked for pictures it could have missed: there were no <picture> elements, no CSS background images and no role="img" elements.
• The logo is a link, and says the wrong thing for one. All 234 sit inside a link to our home page. By the W3C’s own example they should read "Lola Squared home". On 10 September we wrote that this alt text gives the link a name "perfectly well", and as a name it does; it just names the thing rather than where it goes.
• 72 of our 117 pages give their link-preview picture no description. Every page sets an og:image; only 45 also set og:image:alt. The 72 include our home page and our blog index.
• Our Instagram posts send no alt text either. They go out through a small script of ours that sends a picture and a caption and nothing else, and the caption says the image is AI-generated without saying what it shows.

We ran it again on 28 September, the morning this post went out. One new page had been published in between, so there were 118 pages and 236 image tags, all still the logo and all still saying "Lola Squared". The new page has a preview description, so the count became 46 with one and still 72 without. Nothing else had moved, because nobody had touched the old pages.

None of this is dramatic, and that is the point. Alt text failures are rarely an image with nothing; they are the places nobody looks: a logo in the footer, a preview image in a tag, a post sent by a script. We will fix ours and add a dated note here when we have.

What argues the other way

• Alt text is a small part of accessibility. A page can have perfect alt text and still be hard to use with a keyboard or a screen reader. Our post on website accessibility covers the wider picture, including the failures we found that had nothing to do with images.
• The W3C tutorial is guidance. It explains how to meet the accessibility standard rather than being the standard itself, and it says some calls, like decorative or informative, are yours to make.
• A tool that writes alt text for you is not the same as good alt text. "Alt text generator" is the second suggestion when you start typing "alt text" into Google. We have not tested any, so we are not recommending one; if you use one, read each result against the phone-call test above, because only you know what the image is doing on your page.
• We have an interest. We build websites, so we would like you to care about how yours is made. The advice above is Google’s and the W3C’s, and it costs nothing to follow.

Sources, and what we checked

• Google Search Central: Image SEO best practices, last updated 2 March 2026.
• W3C Web Accessibility Initiative, Images Tutorial: overview, informative images, decorative images, functional images, complex images, tips and tricks and the alt decision tree. Links taken from the tutorial’s own navigation.
• The Open Graph protocol, on og:image:alt.
• Our own site: every page in our sitemap, fetched and parsed on 26 September 2026 (117 pages) and again on 28 September 2026 (118 pages).
• All sources were fetched raw on 26 September 2026, and again on 28 September, the day of publication, when their text was unchanged. Every quotation above was tested automatically against the stripped source text before publication. We could not read Instagram’s help centre or Meta’s developer documentation with our tools, so this post makes no claims about either.