Image Alt Text Guide: How to Write It, With Examples

Image alt text is a short written description of a picture, placed in the image's HTML alt attribute. It helps screen reader users, appears when an image fails to load, and gives search engines context. Describe what the image shows and why it matters on that page, in plain words, usually under about 125 characters.

What is alt text and where does it live?

Alt text is the alt attribute on an image tag in your page's HTML. It is not part of the photo file itself, so it does not travel with the image when you download or share it.

In code it looks like this:

<img src="kitchen-remodel.jpg" alt="White shaker cabinets and a quartz island in a finished kitchen">

Most website builders hide the code and give you a field labelled "Alt text" or "Alternative text" in the image settings. The label and location vary by platform, but the idea is the same.

Alt text does three jobs:

• Accessibility. Screen readers read it aloud to people who cannot see the image. This is the most important reason to write it.
• Fallback. If the image does not load, browsers can show the text instead.
• Context for search engines. Google's image guidance asks for useful, descriptive alt text. Nobody outside Google knows exactly how much weight it carries, so treat it as one clear signal, not a lever.

What do you need before you start?

You need three things: the image, the page it will appear on, and a clear idea of the image's job on that page.

That last point matters most. The same photo can need different alt text in different places. A photo of a roof on a roofing company's gallery page needs a description of the work. The same photo in an article about storm damage needs to say what the damage looks like.

How do you write good alt text? (Step by step)

Follow these six steps for each image.

1. Decide the image's purpose. Is it informative (it shows something the reader needs), functional (it is a button or link), or decorative (it adds mood only)? Decorative images get empty alt text, covered below.
2. Describe what is actually visible. Name the main subject, action and setting. Answer "If I read this page aloud on the phone, what would I say about this image?"
3. Add the detail that matters on this page. A product colour, a building style, the stage of a job, the place. Include only what helps the reader.
4. Keep it short. Aim for a sentence or a fragment. About 125 characters is a common rule of thumb, because some screen readers have historically handled longer text poorly. It is a guideline, not a technical limit.
5. Work in a keyword only if it is natural. If your page is about "kitchen remodel in Leeds" and the photo shows that, say so. If the phrase does not describe the image, leave it out.
6. Read it without the image. If the sentence makes sense and gives the same information, you are done.

What does good and bad alt text look like?

Good alt text is specific, accurate and brief. Bad alt text is empty by accident, vague, or stuffed with keywords.

Image	Weak alt text	Better alt text
Plumber fixing a sink	plumber	Plumber tightening a pipe fitting under a kitchen sink
Finished deck	deck deck builder best deck cheap deck near me	Cedar deck with built-in bench seating and black metal railing
Team photo	IMG_4821.jpg	Four technicians in blue uniforms standing beside a service van
Living room listing photo	photo of living room	Bright living room with a brick fireplace and oak floors
Logo in the header	logo	Harbour Plumbing home page (if the logo links home)

Notice what the better versions skip. They do not start with "image of" or "picture of", because screen readers already announce that it is an image.

When should alt text be empty?

Use an empty alt attribute (alt="") for purely decorative images, such as background flourishes, divider lines or a photo that repeats what the adjacent text already says.

Empty is not the same as missing. With alt="", screen readers skip the image. With no alt attribute at all, some screen readers read out the file name instead, which is noise like "IMG underscore 4821 dot jpg".

A quick test: if removing the image would not cost the reader any information, it is probably decorative.

How do you handle charts, screenshots and text in images?

Put the essential message in the alt text, then give the full detail in the page text nearby.

• Charts and graphs. Alt text states the takeaway ("Bar chart: job requests doubled between January and June"). Put the data in a table or paragraph on the page.
• Screenshots. Say what the screenshot shows and why you included it. Quote any text the reader needs.
• Images of text. Avoid them where you can. If you use one, the alt text should repeat the words exactly.
• Linked images. Describe where the link goes, not what the picture looks like.
• Infographics. Give a short summary in the alt text and the full content as real text on the page.

How is alt text different from file names, captions and photo metadata?

They are four separate things. Alt text lives in the page HTML. The file name is the name of the file. A caption is visible text under the image. Photo metadata is information stored inside the file itself.

Element	Where it lives	Who sees it
Alt text	Page HTML	Screen reader users, search engines, anyone if the image fails
File name	The file, and the image URL	Search engines, people who save the file
Caption	Visible on the page	All visitors
Metadata (EXIF, IPTC, XMP)	Inside the photo file	Anyone who inspects the file, and some software

This is where people get confused. Writing a title or description into a photo's metadata does not create alt text on your website. Some content management systems can read a file's embedded description when you upload, but behaviour varies, and you should always check the alt text field after uploading.

Metadata still has a place in your workflow. A tool like Geotagr can write GPS coordinates, a title, a description, keywords and business details into JPG files in your browser, and the files are not uploaded to Geotagr's servers. A description you have already written there can be a handy first draft for alt text, but you will usually want to edit it for the page. For the file-level side, see EXIF data explained and how to check photo metadata.

Be realistic about metadata, too. Google has not published how it uses photo metadata, and some platforms strip it on upload. Our post on whether geotagging helps local SEO covers what is known. Alt text, by contrast, sits in visible page code and is a well-documented accessibility requirement.

How do you add alt text on a website or platform?

Open the image settings in your editor and fill in the alt text field. The steps differ by platform, so look for terms like "Alt text", "Alternative text" or "Image description".

• WordPress. Click the image in the editor or the media library and fill in the Alt Text field.
• Shopify, Wix, Squarespace. Each offers an alt text or image description option in the image or product media settings.
• Email and social platforms. Many offer an alt text option on uploaded images. Where it exists it is often tucked away in an "edit" or "accessibility" menu.
• Hand-coded HTML. Add alt="..." to every <img> tag.

If you have dozens of images, such as a property listing, work through them in the order they appear and write each description for its position on the page. For listings specifically, see geotagging real estate listing photos.

What are the most common alt text mistakes?

Most problems come from rushing, not from technical issues.

• Keyword stuffing. Lists of search terms read badly in a screen reader and add nothing for people.
• Using the file name. "DSC_0042" tells nobody anything.
• Repeating the same text on every image. A gallery of 20 photos all labelled "Our work" is not helpful.
• Starting with "image of". The screen reader already says it.
• Describing too much. Do not narrate every detail. Choose what the reader needs.
• Forgetting linked images. A logo or icon that links somewhere needs alt text that says where.
• Assuming metadata replaces alt text. It does not. Check the page itself.

How do you check your alt text?

Review the page without images and with a screen reader if you can. Browser developer tools also let you inspect the HTML and confirm each <img> has the alt attribute you expect.

A simple audit routine:

1. Open the page and view its source or inspect an image.
2. Confirm every meaningful image has specific alt text.
3. Confirm decorative images use alt="".
4. Read the alt text in sequence. Does the page still make sense?

To see what is stored inside the files you upload, the free photo metadata checker shows the embedded fields so you can tell metadata apart from the alt text on your page.

Frequently asked questions

How long should alt text be?

There is no official limit, but about 125 characters is a widely used guideline. Most good alt text is a short phrase or one sentence. If you need more detail, put it in the visible text on the page.

Does alt text help SEO?

Google's image guidance recommends useful, descriptive alt text, so it is worth writing well. Google has not said how much weight it carries, and no one can promise a ranking effect. Write it for the people who need it first and treat any search benefit as a bonus.

Should I put keywords in alt text?

Only if they accurately describe the image. A natural phrase like "emergency boiler repair in Leeds" is fine on a photo of that job. Repeating keywords the image does not show is keyword stuffing, and it makes the page harder to use with a screen reader.

Do I need alt text on every image?

Every image should have an alt attribute. Meaningful images need a description. Decorative images should have an empty one (alt="") so screen readers skip them.

Is alt text the same as a photo's description metadata?

No. Alt text is part of your web page's HTML, while descriptions in EXIF, IPTC or XMP are stored inside the image file. Some systems may import the embedded description on upload, but you should not rely on it. Always check the alt text field after you upload.

Can I add alt text to a photo before uploading it?

Not in a way that works everywhere. Alt text is set where the image is placed, such as your website editor. You can prepare the wording in advance, for example in a spreadsheet, and paste it in when you publish.