How to Write Alt Text Correctly: Examples, Rules & Typical Mistakes

Alt text – also known as the alt attribute or alternative text – is one of those small details that carries a disproportionate amount of weight. Get it right, and you improve both accessibility and search visibility. Get it wrong, and you risk confusing screen readers, frustrating visually impaired users, and leaving image content invisible to search engines. 

This guide covers everything you need to know: 

• what alt text is
• why it matters for SEO
• the rules for writing it well
• real-world examples
• the most common mistakes to avoid

Contents 

1. What is alt text and why does it matter? 
2. The alt attribute in HTML: a quick explainer 
3. Alt text and SEO: what Google actually uses it for 
4. Rules for writing alt text correctly 
5. Good and bad alt text examples 
6. Typical alt text mistakes and how to fix them 
7. When to leave alt text empty
8. Alt text for different image types 
9. Tools and how to audit your alt tags
10. Alt Text Checklist
11. Summary

What Is Alt Text and Why Does It Matter? 

Alt text – short for alternative text – is a written description of an image embedded in your HTML code. It serves three core purposes: 

1. Accessibility: Screen readers read alt text aloud to visually impaired users, allowing them to understand what an image depicts. 
2. SEO: Search engines cannot see images the way humans do. Alt text tells crawlers what an image contains, helping them index it correctly. 
3. Fallback display: If an image fails to load, the alt text is displayed in its place, preserving the context of the page. 

Meaningful alt attributes for images have been essential since the earliest HTML standards. Poor or missing alt text remains one of the most common accessibility failures on the web. 

The Alt Attribute in HTML: A Quick Explainer 

The alt attribute sits inside the <img> tag in HTML. Here is the basic syntax: 

A few important technical notes about the alt attribute: 

• It is not the same as the title attribute, which appears as a tooltip on hover. 
• It is distinct from the image filename. Renaming your file does not create alt text. 
• It is not the image caption, though the two can complement each other. 
• It should be present on every meaningful image. Decorative images should use an empty alt attribute (alt=””) rather than having the attribute omitted entirely. 

The alt attribute is part of HTML specification and is required for valid, accessible markup. Omitting it entirely, rather than leaving it empty, triggers accessibility errors and can negatively affect how search engines interpret the page. 

Alt Text and SEO: What Google Actually Uses It For 

The relationship between alt text and SEO is well-established. Google’s own documentation confirms that alt text helps the search engine understand the subject matter of images, influencing both web and Google Images rankings. 

Here is what alt tags contribute to from an SEO standpoint: 

• Image search rankings
  Google Images is a substantial source of traffic for many websites. Well-written alt attributes accurately describing the image, while naturally incorporating relevant terms, improve the likelihood that the image appears in image search results. 
• Page-level relevance signals
  Images with descriptive alt text reinforce the topical relevance of the surrounding content. A page about artisan bread that includes images with alt text describing specific loaves, techniques, and ingredients sends consistent topical signals to Google. 
• Core Web Vitals and accessibility overlap
  Google’s ranking systems increasingly reflect user experience quality. Accessible pages – including those with meaningful alt text –  often perform better across a range of experience metrics. Alt text genuinely serves all users while functioning as an SEO tactic.

Rules for Writing Alt Text Correctly 

These rules reflect both accessibility best practices and SEO guidance. Follow all of them consistently for the best results. 

1. Be specific and descriptive

The purpose of alt text is to convey the image to someone who cannot see it. Vague descriptions fail that test. Describe what you actually see: the subject, the setting, any relevant detail. 

Weak: dog 

Better: A golden retriever sitting on a wooden floor next to a fireplace 

2. Keep it concise, but complete

Most recommendations suggest keeping alt text under 125 characters, as many screen readers truncate at that point. Aim for a single sentence that covers the essential content of the image. 

3. Do not begin with ‘image of’ or ‘picture of’

Screen readers already announce that the element is an image. Get straight to the description. 

Avoid: Image of a woman using a laptop 

Use instead: A woman working on a laptop at a standing desk in a bright office 

4. Include keywords naturally

If a relevant keyword fits naturally into the description, include it. If it does not fit naturally, leave it out. The description should read like a sentence written for a human. 

Keyword-stuffed: SEO alt text best practices alt tags alt attribute SEO image 

Natural: A diagram showing how alt text is used in an HTML image tag 

5. Match the context of the page

The same image used in different contexts may warrant different alt text. A photo of a person cooking pasta on a recipe blog needs different alt text than the same photo appearing on a biography page. Always write alt text in relation to the page’s purpose. 

6. For functional images: Describe the function, not just the appearance

Buttons, icons, and linked images should have alt text that describes their function. A magnifying glass icon used as a search button should read ‘Search’, not ‘magnifying glass icon’. 

7. Use empty alt text for decorative images

Purely decorative images such as dividers, background textures and abstract flourishes that carry no informational value should have alt=”” (an empty alt attribute). This tells screen readers to skip the image entirely, rather than announcing a meaningless description.

Alt Text Examples: Good and Bad 

The easiest way to understand what good alt text looks like is through direct comparison. Here are examples across a range of image types. 

Typical Alt Text Mistakes and How to Fix Them 

Most alt text errors fall into a handful of patterns. Here are the most common ones, along with guidance on how to correct them. 

Mistake 1: Leaving alt text blank or missing it entirely 

Omitting alt text entirely (not even including the attribute in the tag) is both an accessibility failure and a missed SEO opportunity. Every meaningful image should have an alt attribute, even if that attribute is intentionally empty for decorative images. 

Fix: Add alt=”” to decorative images and a meaningful description to all content images. 

Mistake 2: Using the filename as alt text 

Alt text such as ‘IMG_4523.jpg’ or ‘hero-banner-v3-final-FINAL.png’ tells users and search engines nothing. CMS tools sometimes populate alt text with the filename by default. You should always override this. 

Fix: Write a fresh description for each image that reflects its content and context on the page. 

Mistake 3: Keyword stuffing or repetitive descriptions 

Filling alt text with keywords such as ‘best SEO alt text alt attribute image SEO optimisation’ does more harm than good. It is recognised as spam by modern search engines and is disruptive for screen reader users. 

Fix: Write naturally. If the target keyword fits into an honest description of the image, include it once. If it does not fit, leave it out. 

Mistake 4: Writing the same alt text for every image 

Copying and pasting identical alt text across multiple images is a common shortcut that undermines accessibility and search relevance. Each image is different; each alt text should be too. 

Fix: Take the time to write unique alt text for each image. This is especially important for product images, where small visual differences may be significant to users. 

Mistake 5: Describing the wrong thing 

Alt text that describes the wrong aspect of an image (i.e., the background rather than the subject) fails the accessibility test. It can also confuse search engines about the image’s relevance. 

Fix: Focus on the main subject of the image and any relevant details for the surrounding content. 

Mistake 6: Writing alt text that duplicates the caption 

If an image already has a visible caption that describes it, the alt text does not need to repeat it word for word. Doing so creates a redundant and frustrating experience for screen reader users, who hear the same description twice. 

Fix: If a caption is present, write complementary alt text that adds context rather than repeating it. For purely decorative images with a caption, alt=”” is appropriate. 

Mistake 7: Treating all images the same 

A decorative background texture, a product photograph, an infographic, a team headshot, and a chart all require different approaches to alt text. Treating them identically will result in either over-description (for decorative elements) or under-description (for complex informational images). 

Fix: Categorise your images before writing alt text and apply the appropriate rules to each type. 

When to Leave Alt Text Empty 

Empty alt text (alt=””) is the correct choice for images that are: 

• Decorative – borders, dividers, background patterns, aesthetic flourishes 
• Redundant – where the image is accompanied by adjacent text that conveys the same information 
• Used only for visual spacing or layout purposes 

The key distinction is between a missing alt attribute and an empty one. A missing alt attribute means the image has no accessibility or SEO treatment at all. An empty alt attribute is an intentional signal: ‘this image is decorative, ignore it.’ 

Example: 

Alt Text for Different Image Types 

Different types of images call for different approaches. Here is a breakdown of the most common categories. 

Product images 

Include the product name, colour, and any distinguishing features visible in the image. For e-commerce, this is particularly important: product images without accurate alt text may not appear when users search Google Images for specific items. 

Example: 

Infographics and data visualisations 

For complex infographics, a brief alt text summary may not be sufficient. Consider providing a full text alternative elsewhere on the page (in a collapsible section, for instance) and use the alt text to summarise the key insight: 

Charts and graphs 

Describe the type of chart, what it measures and the key finding or trend. Do not merely label it ‘bar chart’. 

Example: 

People and team photos 

For staff photographs, include the person’s name and role where relevant. For generic stock photos of people, describe the activity and setting. 

Examples: 

Logos 

When a logo is a standalone image with no nearby text, the alt text should be the company name. When a logo is linked to the homepage, describe its function too. 

Example:  

Screenshots 

Describe what the screenshot shows, including the interface and any key information visible within it. 

Example: 

How to Audit Your Alt Tags 

Reviewing alt text across an established website can feel daunting. These approaches make the process manageable. 

Browser-based tools 

Chrome DevTools allows you to inspect any image’s alt attribute directly. Right-click on an image, select ‘Inspect’ and look for the alt value within the <img> tag. This is fine for checking individual images but does not scale. 

Screaming Frog SEO Spider 

Screaming Frog crawls your site and exports a spreadsheet of all images, including their alt text. Filter for blank or missing alt attributes to identify the most urgent fixes. This is the most efficient method for sites with hundreds or thousands of pages. 

Google Search Console 

The Enhancements section of Search Console can surface some image-related issues, though it does not report specifically on alt text in the way a dedicated crawler does. 

Accessibility checkers 

Tools such as WAVE (Web Accessibility Evaluation Tool) and axe flag images without alt text as accessibility errors. Running a page through WAVE is a quick way to get a visual overview of which images need attention. 

CMS-level audits 

If your site runs on WordPress, Shopify, or a similar CMS, the media library or bulk editing tools may allow you to review and update alt text directly. Some plugins (such as Yoast SEO or RankMath) prompt you to add alt text when uploading images. 

Alt Text Checklist 

Use this checklist when writing or reviewing alt text: 

• Does every meaningful image have an alt attribute? 
• Are purely decorative images using alt=””? 
• Does the alt text describe the image accurately and specifically? 
• Is the alt text under 125 characters? 
• Does it avoid starting with ‘image of’ or ‘photo of’? 
• Does it include keywords only where they fit naturally? 
• Is each image’s alt text unique? 
• For functional images (icons, buttons), does it describe the function? 
• For complex visuals (infographics, charts), is a full text alternative provided? 
• For linked logos, does the alt text note the destination? 

Summary 

Alt text is a small investment with a big return. When it’s done well, it makes your site accessible to users who rely on screen readers, improves your visibility in Google Images, reinforces the topical relevance of your pages, and future-proofs your content as AI-driven search continues to interpret the web more contextually. 

The rules are straightforward:  

• be specific  
• be concise 
• write naturally  
• match the context 
• never stuff keywords  

The most common mistakes (blank alt text, filename defaults, repetition, and keyword abuse) are all easy to fix once you know what to look for. 

If you haven’t audited your site’s alt attributes recently, now is a good time to start. Run a Screaming Frog crawl, filter for missing or thin alt text, and work through the results systematically. It’s one of the quickest technical wins available in SEO, and one that benefits your users just as much as the search engines.