Атрибут alt у изображений описывает их содержание для скринридеров и поисковых систем. Правильные alt-теги улучшают доступность, помогают в поиске по картинкам и дают поисковикам дополнительный контекст о странице. В этой статье — как писать alt для SEO.
Зачем нужны alt-теги
| Назначение | Описание |
|---|---|
| Доступность | Скринридеры зачитывают alt вместо изображения |
| SEO | Google использует alt при индексации и поиске по картинкам |
| Fallback | При отключённых картинках показывается текст alt |
| Контекст | Помогает поисковику понять тему страницы |
Без alt изображение остаётся «немым» для роботов и пользователей с ограниченными возможностями.
Правила написания alt
1. Описывайте содержание, а не форму
<!-- Плохо: описание формы -->
<img src="photo.jpg" alt="Фотография прямоугольной формы">
<!-- Хорошо: содержание -->
<img src="photo.jpg" alt="Ноутбук MacBook Pro на деревянном столе">
2. Будьте конкретны
<!-- Плохо: слишком общее -->
<img src="product.jpg" alt="Товар">
<!-- Хорошо: конкретика -->
<img src="product.jpg" alt="Беспроводные наушники Sony WH-1000XM5 чёрного цвета">
3. Включайте ключевые слова естественно
Ключевое слово должно вписываться в описание, а не быть списком.
<!-- Плохо: переспам -->
<img src="phone.jpg" alt="купить смартфон iPhone смартфон Apple iPhone 15">
<!-- Хорошо: естественное включение -->
<img src="phone.jpg" alt="Смартфон iPhone 15 Pro в титановом корпусе">
4. Длина: 125 символов или меньше
Google обычно обрезает длинные alt. Оптимально — до 125 символов, при необходимости можно до 150.
<!-- Оптимально -->
<img src="chart.jpg" alt="График роста выручки компании за 2025 год: рост на 23% к предыдущему году">
5. Декоративные изображения — пустой alt
Для декоративных элементов (иконки, разделители, фоны) используйте alt="". Скринридеры пропустят их, что правильно.
<img src="decoration.svg" alt="">
Не используйте alt=" " или alt="декоративное изображение" — это создаёт лишний шум для скринридеров.
Типы изображений и примеры alt
Фото товаров
<img src="shirt.jpg" alt="Мужская рубашка Oxford синего цвета, размер M">
Инфографика и схемы
<img src="infographic.jpg" alt="Инфографика: 5 шагов настройки SEO — аудит, ключевые слова, контент, техническая оптимизация, мониторинг">
Скриншоты
<img src="settings.png" alt="Скриншот настроек Google Search Console, раздел «Файлы Sitemap»">
Иконки с текстом рядом
Если рядом с иконкой есть текст, дублировать его в alt не нужно. Используйте alt="" или краткое описание функции.
<button>
<img src="cart-icon.svg" alt="">
В корзину
</button>
Логотипы
<img src="logo.svg" alt="Логотип компании Example">
Изображения-ссылки
Alt описывает цель перехода.
<a href="/catalog/phones">
<img src="phones-banner.jpg" alt="Перейти в каталог смартфонов">
</a>
Частые ошибки
| Ошибка | Правильно |
|---|---|
alt="image", alt="img" | Осмысленное описание или alt="" |
alt="фото", alt="картинка" | Описание содержания |
| Начинать с «Изображение», «Рисунок» | Скринридеры и так объявляют элемент |
| Переспам ключевыми словами | Естественное включение |
| Одинаковый alt для разных картинок | Уникальное описание каждой |
| Alt длиннее 150 символов | Сократить до ключевой информации |
Проверка alt на сайте
- Проверка изображений reChecker — анализ alt, размеров, форматов всех изображений страницы
- Технический аудит reChecker — комплексная проверка, включая изображения
- Расширения браузера (например, WAVE) — проверка доступности
Влияние на поиск по картинкам
Google Images индексирует изображения и использует alt как один из сигналов. Хороший alt:
- Улучшает релевантность в поиске по картинкам
- Даёт контекст для понимания страницы
- Помогает при использовании изображения в качестве featured image в выдаче
Чек-лист
| Проверка | Действие |
|---|---|
| У всех img есть alt | Добавить или alt="" для декоративных |
| Alt описывает содержание | Переписать общие формулировки |
| Ключевые слова естественно | Убрать переспам |
| Длина до 125 символов | Сократить длинные |
| Декоративные — alt="" | Проверить иконки, разделители |
| Уникальность | Разные alt для разных изображений |
Заключение
Alt-теги — обязательный элемент доступности и SEO. Описывайте содержание конкретно, включайте ключевые слова естественно, для декоративных изображений используйте alt="". Проверяйте страницы через анализатор изображений reChecker и технический аудит. Подробнее об оптимизации изображений — в руководстве по оптимизации изображений для SEO.
Alt для разных типов сайтов
Интернет-магазин
Фокус на характеристиках товара: цвет, модель, ключевые особенности. Избегайте переспама ключевыми словами.
<img src="shirt.jpg" alt="Мужская рубашка Oxford синего цвета, хлопок, размер M">
Блог и медиа
Описание сцены, действия или идеи. Для инфографики — краткое содержание.
<img src="interview.jpg" alt="Основатель компании за рабочим столом во время интервью">
Корпоративный сайт
Для команды — имя и должность. Для офиса — локация и контекст.
<img src="team.jpg" alt="Команда разработки в конференц-зале">
Alt и автоматическая генерация
При большом количестве изображений alt можно генерировать автоматически:
- AI-сервисы (описание по изображению)
- Шаблоны на основе имени файла (осторожно — часто дают слабый результат)
- Данные из CMS (название товара, артикул)
Проверяйте сгенерированный alt на осмысленность и уникальность.
Часто задаваемые вопросы
Нужен ли alt для изображений в background (CSS)?
Нет. Background-image не имеет alt. Для важного контента используйте img с alt. Для декоративного фона alt не требуется.
Как быть с изображениями в figure?
Элемент figure может содержать img и figcaption. Alt у img обязателен. Figcaption дополняет описание для пользователей, но не заменяет alt для скринридеров.
Влияет ли длина alt на ранжирование?
Прямого влияния нет. Слишком длинный alt может обрезаться. Оптимально — до 125 символов с ключевой информацией.