A phone names its photos with a string of letters and digits, and a search engine reads that string the way a cook reads a delivery slip with no item written on it. I have done this work on real sites myself, and what follows rests on Google’s own documentation and the web accessibility standards group, not on any story of mine, because those are the two places that actually say what the words are for.

How To Write Great Image Alt Text And Get More SEO Traffic, HubSpot Marketing on YouTube

Google’s page on image SEO best practices has a short section titled “Use descriptive filenames, titles, and alt text.” The W3C Web Accessibility Initiative’s images tutorial covers the same ground from the side of people who cannot see the picture. They agree more than you would expect, and the places where they pull in slightly different directions are the interesting part.

What alt text is for

It is a replacement for the picture, not a tag for the search engine

Alt text is the text a browser shows or a screen reader speaks when the image itself is not available to the reader. Google says alt text is the most important piece of metadata you can give an image, and that it should be useful and relevant to the page. It also says to focus on “useful, information-rich content that uses keywords appropriately.”

The W3C approach asks a different question first: what would a person miss if the picture were gone? For an informative image, its guidance is that the text alternative should be “at least a short description conveying the essential information” the picture carries. Both sources land on the same sentence, written by different hands, which is a decent sign the advice is sound.

Context decides the wording. The W3C tutorial gives the example of a photo of a bird, which might need only a short description on a parks website and a much fuller one on a site about birds. The photo is identical and the right words are not, because the words answer the question the page is asking.

I find this easiest to see on a restaurant site. The Heritage Diner website carries images, videos, daily specials, phone numbers, links and menu items, and a photo of a plate on the specials page is doing a different job from the same plate on a page about the kitchen. On the first it is the offer. On the second it is an illustration.

Writing it

Laptop on a desk showing a grid of photo thumbnails to be sorted and renamed

Describe what is in the picture the way you would say it across a counter

Google’s examples are plain on purpose. For a puppy photo it rates alt="puppy" as better than nothing and alt="Dalmatian puppy playing fetch" as best. The jump is from a category to a description, and it costs four extra words.

Keywords are allowed to appear when they are true. Google also says not to stuff them: a string of search terms in an alt attribute makes for a bad experience for anyone using a screen reader and may cause the site to be seen as spam. If a description of the image naturally contains the thing you sell, say so. If it does not, leave the word out.

A few habits follow from the two sources.

  • Describe the content, not the file. A phrase like “image of” or “picture of” spends words the screen reader already announces.
  • Keep it short. The W3C standard asks for “at least a short description,” and a sentence is usually enough.
  • Match the page. If the picture shows a product, the alt names the product the way the page does.
  • When an image is also a link, say where the link goes. Google notes that the alt text of a linked image acts as its anchor text.

When to leave it empty

A decorative image gets an empty alt on purpose

The W3C draws a line that most small sites never notice. When an image is purely decoration and adds nothing to the content, the right move is a “null text alternative,” which means an alt attribute that exists and is empty. A screen reader then skips it. Filling every picture with a description would make that reader wade through ornament.

The point is the word “exists.” Leaving the attribute off altogether is a different thing from leaving it empty, and the W3C tutorials treat them as different cases. Most editors add the empty attribute for you when you leave the field blank, though I would check one page on your own site rather than take that on faith.

The W3C also has an alt decision tree that walks through the question for each kind of image: informative, decorative, functional, text, complex. It is worth ten minutes if the site has charts or pictures of text, which need more than a short phrase.

File names

Rows of printed photographs on a table being sorted with blank labels

Short, descriptive, and not what the camera called it

Google’s guidance on file names is the simplest part of the whole page. Use names that are short but descriptive. Its example, my-new-black-kitten.jpg, is rated better than IMG00023.JPG. It also says to avoid generic names such as image1.jpg, pic.gif or 1.jpg where possible, and that for a large library you might automate the naming.

If you localize images for another language, Google says to translate the file names too, following URL encoding rules for special characters.

Here are some examples I made up for illustration, written for an imaginary diner page and not taken from any real site:

Camera or default nameBetter file nameAlt text
IMG_4821.JPGturkey-club-sandwich-with-fries.jpgTurkey club sandwich cut in half, served with fries
image1.pngdiner-counter-morning-light.pngCounter stools and a pie case in morning light
photo (3).jpgchalkboard-daily-specials-wall.jpgDaily specials written on a wall-mounted chalkboard

The file name and the alt text do not have to match word for word. The name is a short label with hyphens, and the alt is a sentence a person might actually read. Neither is a place to type everything you want to rank for.

Where the picture sits on the page

A search engine reads the neighbors, too

Google says it works out what an image is about from the content around it, including captions and image titles, and recommends placing images near relevant text on pages that match the image’s subject. An alt attribute is a strong hint, but a photo of a sandwich dropped into a page about parking rules will be misread no matter how well it is labeled.

The technical side is short. Google says to use standard HTML image elements with a source attribute so crawlers can find the file, and states that it does not index CSS images. If your theme sets a picture as a background through the stylesheet, the picture is decoration as far as Google is concerned, and anything meaningful should go in as a real image element instead.

Google lists the file formats it supports: BMP, GIF, JPEG, PNG, WebP, SVG and AVIF, and asks that the file extension match the real file type. It also says image quality attracts clicks but that large images are often the biggest part of a page’s weight, so the work is a balance between sharp and fast. It points to PageSpeed Insights for checking.

An honest turn against my own point: all of this is cheap on a small site and can become tedious on a site with thousands of pictures, which is why Google brings up automating the file naming. If you have a hundred photos, do the hundred by hand once and set a naming habit for the next one. If you have ten thousand, you need a rule, not willpower.

A routine that fits in a minute

Empty diner counter with stools and a pie case in morning light

Before uploading a picture, rename the file to say what it shows. After uploading, fill the alt field with a sentence that describes it for someone who cannot see it, with the page’s subject in mind. Put the image beside the paragraph that discusses it. If the picture is only ornament, leave the alt empty on purpose.

An existing site is a separate chore from a new one, and it is better done in small bites. Pick the five pages that matter most, the ones people reach from search or from a printed card, and go through their pictures in order. Rename what can be renamed without breaking a link, and rewrite the alt text on the rest. Renaming a file that other pages already point to can leave a broken picture behind, so change one, load the page, and only then move on to the next. The pages nobody visits can wait.

Then look at one finished page with the images switched off, or read it aloud to yourself. If the page still makes sense, the descriptions are doing their job. If you hit a gap where a picture should be, that gap is the missing alt text.

For informational purposes only. Search engines change how they treat images, and nothing here guarantees a ranking; if your site has legal accessibility obligations, consult a licensed attorney.

Sources