The alt attribute describes the content of images to screen readers and search engines. Proper alt tags improve accessibility, help with image search, and give search engines additional context about the page. This article explains how to write alt text for SEO.
Why alt tags are needed
| Purpose | Description |
|---|---|
| Accessibility | Screen readers read alt text instead of the image |
| SEO | Google uses alt text for indexing and image search |
| Fallback | Alt text is displayed when images are disabled |
| Context | Helps search engines understand the page topic |
Without alt text, an image remains “silent” to bots and users with disabilities.
Rules for writing alt text
1. Describe the content, not the format
<!-- Плохо: описание формы -->
<img src="photo.jpg" alt="Фотография прямоугольной формы">
<!-- Хорошо: содержание -->
<img src="photo.jpg" alt="Ноутбук MacBook Pro на деревянном столе">2. Be specific
<!-- Плохо: слишком общее -->
<img src="product.jpg" alt="Товар">
<!-- Хорошо: конкретика -->
<img src="product.jpg" alt="Беспроводные наушники Sony WH-1000XM5 чёрного цвета">3. Include keywords naturally
The keyword should fit into the description, not appear as a list.
<!-- Плохо: переспам -->
<img src="phone.jpg" alt="купить смартфон iPhone смартфон Apple iPhone 15">
<!-- Хорошо: естественное включение -->
<img src="phone.jpg" alt="Смартфон iPhone 15 Pro в титановом корпусе">4. Length: 125 characters or fewer
Google usually truncates long alt text. Ideally, keep it to 125 characters, or up to 150 if necessary.
<!-- Оптимально -->
<img src="chart.jpg" alt="График роста выручки компании за 2025 год: рост на 23% к предыдущему году">5. Decorative images — use empty alt text
For decorative elements (icons, dividers, backgrounds), use alt="". Screen readers will skip them, which is the right approach.
<img src="decoration.svg" alt="">Do not use alt=" " or alt="декоративное изображение" — this creates unnecessary noise for screen reader users.
Image types and alt text examples
Product photos
<img src="shirt.jpg" alt="Мужская рубашка Oxford синего цвета, размер M">Infographics and diagrams
<img src="infographic.jpg" alt="Инфографика: 5 шагов настройки SEO — аудит, ключевые слова, контент, техническая оптимизация, мониторинг">Screenshots
<img src="settings.png" alt="Скриншот настроек Google Search Console, раздел «Файлы Sitemap»">Icons with adjacent text
If an icon has text next to it, you do not need to repeat that text in the alt. Use alt="" or a brief description of its function.
<button>
<img src="cart-icon.svg" alt="">
В корзину
</button>Logos
<img src="logo.svg" alt="Логотип компании Example">Linked images
Alt text describes the link destination.
<a href="/catalog/phones">
<img src="phones-banner.jpg" alt="Перейти в каталог смартфонов">
</a>Common mistakes
| Mistake | Correct approach |
|---|---|
alt="image", alt="img" | A meaningful description or alt="" |
alt="фото", alt="картинка" | Describe the content |
| Starting with “Image” or “Picture” | Screen readers announce the element anyway |
| Keyword stuffing | Include keywords naturally |
| Using the same alt text for different images | Write a unique description for each image |
| Alt text longer than 150 characters | Shorten it to the key information |
Checking alt text on a website
- reChecker image checker — analyzes the alt text, dimensions, and formats of all images on a page
- reChecker technical audit — a comprehensive check that includes images
- Browser extensions (for example, WAVE) — accessibility checking
Impact on image search
Google Images indexes images and uses alt text as one of its signals. Good alt text:
- Improves relevance in image search
- Provides context for understanding the page
- Helps when an image is used as a featured image in search results
Checklist
| Check | Action |
|---|---|
| All img elements have alt text | Add it, or use alt="" for decorative images |
| Alt text describes the content | Rewrite generic descriptions |
| Keywords are included naturally | Remove keyword stuffing |
| Length is up to 125 characters | Shorten long text |
| Decorative images use alt="" | Check icons and dividers |
| Uniqueness | Use different alt text for different images |
Conclusion
Alt tags are essential for accessibility and SEO. Describe the content specifically, include keywords naturally, and use alt="" for decorative images. Check pages with the reChecker image analyzer and technical audit. For more on image optimization, see the guide to image optimization for SEO.
Alt text for different types of websites
Online store
Focus on product characteristics: color, model, and key features. Avoid keyword stuffing.
<img src="shirt.jpg" alt="Мужская рубашка Oxford синего цвета, хлопок, размер M">Blog and media
Describe the scene, action, or idea. For infographics, provide a brief summary.
<img src="interview.jpg" alt="Основатель компании за рабочим столом во время интервью">Corporate website
For team members, include their name and position. For an office, include its location and context.
<img src="team.jpg" alt="Команда разработки в конференц-зале">Alt text and automatic generation
When there are many images, alt text can be generated automatically:
- AI services (description based on the image)
- Templates based on the file name (use with caution — they often produce weak results)
- CMS data (product name, SKU)
Check generated alt text for clarity and uniqueness.
Frequently asked questions
Is alt text needed for background images in CSS?
No. A background-image does not have alt text. For important content, use an img element with alt text. Decorative backgrounds do not need alt text.
What about images inside figure elements?
A figure element can contain an img and a figcaption. The img must have alt text. The figcaption supplements the description for users, but does not replace alt text for screen readers.
Does alt text length affect rankings?
There is no direct impact. Alt text that is too long may be truncated. Ideally, keep it to 125 characters and include the key information.