Good alt text describes what an image shows and why it is on the page, in one short, specific phrase, without stuffing keywords. Google calls alt text the most important image metadata. For image SEO, also use descriptive filenames, standard <img> tags, compressed WebP or AVIF files, responsive sizes, and place images near relevant text.
This guide covers how to write alt text for different image types, the technical steps that help Google find and rank your images, and how to make them load fast.
Key takeaways
- Write alt text as one short, specific phrase describing what the image shows and why it is on the page.
- Give decorative images an empty alt attribute so screen readers skip them, rather than leaving alt out.
- Use standard img tags and descriptive filenames, because Google does not index CSS background images.
- Resize and convert images to WebP or AVIF, set width and height, and never lazy load the hero image.
What is alt text and why does it matter?
Alt text is the alt attribute on an <img> element. It does three jobs:
- Accessibility: screen readers read it aloud to people who cannot see the image.
- Fallback: browsers display it if the image fails to load.
- Search: Google uses it, along with the surrounding page content, to understand the image. When an image is a link, its alt text acts like anchor text.
<img src="/images/dalmatian-puppy-playing-fetch.jpg"
alt="Dalmatian puppy playing fetch"
width="1200" height="800">
How do I write good alt text?
Google's own example shows the progression clearly:
| Alt text | Verdict |
|---|---|
| (no alt attribute) | Bad: nothing for screen readers or Google |
alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier" |
Bad: keyword stuffing |
alt="puppy" |
Better |
alt="Dalmatian puppy playing fetch" |
Best |
Practical rules:
- Be specific and concise. Describe what matters about the image in a short phrase or sentence. Long descriptions are tiring to listen to; put extra detail in the page text.
- Write for the context. The same photo might be "Two-bedroom terraced house in Cardiff for sale" on a property page and "Victorian bay window restored by our joinery team" on a services page.
- Do not start with "Image of" or "Photo of". Screen readers already announce it as an image.
- Include a keyword only if it genuinely describes the image. Google says to "avoid filling
altattributes with keywords", because it makes for a poor experience and can look like spam. - Do not repeat the caption word for word. Alt text and visible captions should complement each other.
What alt text should different images have?
The W3C's Web Accessibility Initiative divides images into types, each needing a different approach:
| Image type | What to write | Example |
|---|---|---|
| Informative photo | A short description of what it shows | alt="Stone cottage kitchen with an oak worktop" |
| Decorative (borders, background flourishes) | Empty alt: alt="" |
<img src="divider.svg" alt=""> |
| Functional (a linked logo, an icon button) | What it does, not what it looks like | alt="Home", alt="Search" |
| Image of text | The text itself | alt="20% off all boilers until 31 October" |
| Complex (chart, diagram) | A brief summary, with full detail in the page text | alt="Bar chart of monthly sales, detailed in the table below" |
Note that decorative images still need the alt attribute, just left empty. Leaving it out entirely makes some screen readers read the filename instead. For inline SVGs, use a <title> element inside the SVG to provide the accessible name.
How do I get my images indexed by Google?
Google's image guidelines boil down to a few technical rules:
- Use standard HTML image elements. Google finds images in the
srcattribute of<img>elements, including inside<picture>. It states plainly: "Google doesn't index CSS images," so product photos set as CSS backgrounds will not appear in Google Images. - Use a supported format: BMP, GIF, JPEG, PNG, WebP, SVG or AVIF. Make sure the file extension matches the actual file type.
- Use descriptive filenames. Google advises avoiding generic names such as
image1.jpg,pic.gifor1.jpg. Preferoak-dining-table-six-seater.jpg. - Place images near relevant text on a page about the same topic. Google uses the page's title, headings and nearby text to understand the image.
- Do not block images in robots.txt. If your image folder or CDN is disallowed, Google cannot index the files. The robots.txt generator from MakeItFlow helps you build rules that leave image folders open.
- Consider an image sitemap if images are loaded in ways Google might miss. Image sitemaps can list images hosted on a CDN or another domain.
- Reuse the same URL for an image used on several pages, so Google and browsers can cache it.
How do I make images load faster?
Images are often the largest part of a page's weight, and a slow hero image can drag down your Largest Contentful Paint score.
- Resize images to the largest size they are actually displayed at. A 4,000-pixel camera photo shown at 800 pixels wastes bandwidth.
- Compress and convert to WebP or AVIF, which are usually much smaller than JPEG or PNG at similar quality. Our WebP and AVIF guide covers tools and settings.
- Serve responsive sizes with
srcsetandsizes, keeping asrcfallback as Google recommends. - Set
widthandheightso the browser reserves space and the layout does not jump. This prevents Cumulative Layout Shift. - Lazy-load images below the fold with
loading="lazy", but never the main hero image, which should load immediately.
<img src="/images/oak-table-800.webp"
srcset="/images/oak-table-400.webp 400w,
/images/oak-table-800.webp 800w,
/images/oak-table-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Six-seater solid oak dining table in a bright kitchen"
width="800" height="533"
loading="lazy">
Which image does Google show for my page?
For search result thumbnails and Discover, you can suggest a preferred image with the og:image meta tag or the image property in structured data. Choose an image that is relevant, high resolution and representative of the page, and avoid generic logos or images full of text.
<meta property="og:image" content="https://www.example.com/images/oak-table-1600.webp">
How do I find images with missing alt text?
Check a few key pages by viewing source and searching for <img tags without alt. For a faster route, MakeItFlow reports images missing alt text, along with Open Graph tags, structured data and page speed, when you run a free website audit. Its accessibility check runs Lighthouse's automated accessibility tests, which also flag missing alternative text, though automated checks cannot judge whether your alt text is actually meaningful.
What to do next
Start with the images that matter commercially: product photos, service galleries and hero images. Give each a descriptive filename and context-specific alt text, mark decorative images with alt="", then convert and resize them. Make it part of your upload routine so every new image goes live optimised.
Frequently asked questions
Is alt text a ranking factor?
It helps Google understand images and is the most important signal for ranking in Google Images. For normal web search, it adds context but will not lift a weak page on its own. Its main value is making your images findable and your site accessible.
What is the difference between alt text and the title attribute?
Alt text replaces the image for people who cannot see it and is used by search engines. The title attribute shows a tooltip on hover, is not reliably read by screen readers and is not a substitute for alt text.
Should every image have alt text?
Every <img> should have an alt attribute, but not every one needs a description. Decorative images should use an empty alt="" so screen readers skip them.
Does the image filename matter for SEO?
Yes, slightly. Google says filenames can give it clues about an image's subject. Short, descriptive, hyphen-separated names are best, and if you translate your site you can translate filenames too.
Can AI tools write my alt text?
They can produce a useful first draft, but review every one. Automated descriptions often miss the context, such as which product variant is shown or why the image is on the page, which is exactly what good alt text should convey.
Related reading
- Heading Structure for SEO: H1 Rules, Hierarchy and Accessibility: How to structure H1 to H6 headings for SEO and accessibility: what Google actually says, the WCAG rules that apply, common myths and a quick audit checklist.
Sources
More guides for your industry
Free checklist (PDF)
Free bloggers & publishers website checklist
31 practical checks for bloggers & publishers: website speed and mobile, Google Business Profile and reviews, email security, booking and enquiry handling, and AI search visibility. Each one says why it matters, and many link to a free tool that checks it.
Written by the MakeItFlow team
We build the website audit these guides are based on. Every fact is checked against the primary sources listed above and this guide was last reviewed on 25 October 2026 . How we research and check
Check your own site in 30 seconds
Run a free audit covering speed, SEO, DNS, email authentication and security headers — and get a prioritised fix list.
