Как написать хороший ALT-тег для изображений
ALT-тег (альтернативный текст) — это атрибут тега <img>, который описывает содержание изображения словами. Он выполняет сразу три важнейшие функции: помогает поисковым системам понять, что на картинке, делает сайт доступным для людей с нарушениями зрения и подстраховывает, если изображение не загрузилось. И, конечно, ALT-тег напрямую влияет на ранжирование в Яндекс.Картинках и Google Images — а это дополнительный, часто недооценённый источник целевого трафика.
В этом материале разберём всё: от базового синтаксиса до продвинутых стратегий, опираясь на официальные руководства Яндекса и Google.
Зачем нужен ALT-тег: три кита
1. SEO и поиск по картинкам
Поисковые роботы не «видят» картинки так, как люди. Они анализируют код страницы и считывают текстовые сигналы: название файла, окружающий текст, подписи и — в первую очередь — атрибут alt. Без него изображение для робота — белое пятно.
Официальная позиция Google: в руководстве по Google Images прямо сказано: «Используйте описательные alt-тексты. Это помогает нам понять тематику изображения и показывает его пользователям, которые пользуются скринридерами».
Официальная позиция Яндекса: в рекомендациях для вебмастеров Яндекс пишет: «Чтобы картинки попали в поиск, робот должен понять, что на них изображено. Для этого заполняйте атрибут alt». Также Яндекс советует использовать осмысленные названия файлов — к этому вернёмся позже.
2. Accessibility (доступность)
Люди с нарушениями зрения используют программы экранного доступа (скринридеры), которые буквально зачитывают alt-текст вслух. Это закреплено в международном стандарте WCAG 2.1 (Web Content Accessibility Guidelines). Без alt-тега скринридер либо промолчит, либо скажет что-то вроде «изображение», что бесполезно для пользователя. Доступность — это не только этика, но и юридическое требование во многих странах.
3. Запасной вариант при ошибках загрузки
Если изображение не загрузилось из-за медленного интернета или ошибки на сервере, браузер покажет вместо него пустой прямоугольник с alt-текстом внутри. Это даёт пользователю хотя бы контекст, что должно было быть на этом месте.
Базовый синтаксис
Атрибут alt прописывается внутри тега <img>:
<img src="put-trevogi-k-sestri.jpg" alt="Мужской классический пиджак серого цвета с двумя пуговицами">Обратите внимание: название файла тоже имеет значение. Поисковые системы анализируют его как дополнительный сигнал. Сравните:
| Параметр | Плохо | Хорошо |
|---|---|---|
| Имя файла | IMG_4321.jpg | muzhskoy-klassicheskiy-pidzhak-seryy.jpg |
| ALT-тег | пиджак | Мужской классический пиджак серого цвета с двумя пуговицами и карманами |
Как составить идеальный ALT-текст: 7 правил
Правило 1. Будьте конкретны и описательны
Представьте, что вы описываете картинку коллеге по телефону. Что важно упомянуть? Цвет, форму, материал, контекст, ключевые детали.
<!-- Плохо: слишком общее описание -->
<img src="pidzhak.jpg" alt="Пиджак">
<!-- Хорошо: конкретное описание с деталями -->
<img src="pidzhak-seryy-klassicheskiy.jpg" alt="Мужской классический пиджак серого цвета из натуральной шерсти, две пуговицы, приталенный крой">Правило 2. Соблюдайте длину: 100–125 символов
Большинство скринридеров обрезают alt-текст примерно на 125 символах. Поисковые системы также отдают предпочтение лаконичным, но информативным описаниям. Укладывайте основную мысль в 10–15 слов.
Правило 3. Не спамьте ключевыми словами
Это прямой путь под фильтры. Google и Яндекс хорошо распознают переспам.
<!-- Ужасно: переспам ключевиками, бесполезно для пользователя -->
<img src="pidzhak.jpg" alt="Купить пиджак мужской, пиджак цена, недорогой пиджак Москва, классический пиджак">
<!-- Отлично: один ключ вписан естественно -->
<img src="pidzhak-muzhskoy-klassicheskiy.jpg" alt="Мужской классический пиджак синего цвета, однобортный, из итальянской шерсти">Правило 4. Не начинайте с «Изображение…» или «Фотография…»
Поисковые системы и скринридеры и так знают, что это изображение. Лишние слова съедают драгоценную длину и раздражают пользователей экранного доступа.
<!-- Плохо: лишние вводные слова -->
<img src="rubashka-belaya.jpg" alt="Фотография белой мужской рубашки">
<!-- Хорошо: сразу к делу -->
<img src="rubashka-belaya.jpg" alt="Белая мужская рубашка из хлопка, классический воротник, длинный рукав">Правило 5. Для товаров указывайте ключевые характеристики
Бренд, модель, материал, цвет, особенности кроя — всё, что важно для покупателя. Это помогает ранжироваться по длинному хвосту запросов в картинках: «пиджак серый в клетку», «рубашка белая классическая мужская» и т.д.
<!-- Слабо: нет деталей -->
<img src="bryuki.jpg" alt="Классические брюки">
<!-- Сильно: характеристики, помогающие покупателю -->
<img src="bryuki-muzhskie-klassicheskie-chernye.jpg" alt="Мужские классические брюки чёрного цвета, прямые, со стрелками, из полушерстяной ткани">Правило 6. Декоративные изображения оставляйте с пустым alt
Фоновые паттерны, разделители, иконки-украшения не несут смысловой нагрузки. Им нужно прописывать пустой атрибут: alt="". Это сигнал для скринридера: «пропусти этот элемент». Если вообще не указать alt, скринридер может зачитать название файла, что ухудшит опыт.
<!-- Правильно: декоративный элемент — пустой alt -->
<img src="decorative-line.png" alt="">
<!-- Неправильно: alt вообще не указан — скринридер может прочитать "decorative-line.png" -->
<img src="decorative-line.png">Правило 7. Учитывайте контекст страницы
Одно и то же изображение на разных страницах может требовать разного alt-текста. Например, фото пиджака на странице категории и на странице конкретного товара:
<!-- На странице категории: общее описание -->
<img src="pidzhak-siniy.jpg" alt="Мужской классический пиджак синего цвета">
<!-- На карточке товара: полное описание с брендом и артикулом -->
<img src="pidzhak-siniy.jpg" alt="Мужской пиджак Peplos модель «Классик» синего цвета, артикул PL-2024-01, шерсть 100%, приталенный крой">Сравнительная таблица: плохой vs хороший ALT
| Ситуация | Плохой ALT | Хороший ALT |
|---|---|---|
| Товар: рубашка | рубашка | Белая мужская рубашка из хлопка с классическим воротником и длинным рукавом |
| Товар: жилет | жилет мужской классический купить недорого | Классический мужской жилет тёмно-серого цвета, пять пуговиц, спинка из шёлка |
| Блог: тренды | мода 2026 | Мужские пиджаки на подиуме Недели моды в Милане, весна-лето 2026 |
| Инфографика | инфографика размеры | Таблица размеров мужских пиджаков: обхват груди, плечи, длина рукава в сантиметрах |
| Логотип | лого | Логотип компании Peplos — мужская классическая одежда |
Чего категорически нельзя делать: красные флаги
- Оставлять alt пустым для контентных изображений. Если картинка несёт смысл — она должна иметь описание. Пустой alt только для декора.
- Использовать alt как место для скрытых ключей. Раньше так делали для SEO, сейчас это спам и вредит.
- Дублировать Title или название файла. Это избыточно. Alt должен дополнять, а не повторять.
- Писать километровые описания. Если нужно длинное описание (например, для инфографики), лучше использовать атрибут longdesc или разместить текст прямо на странице рядом с изображением.
Как проверить, что ALT-теги на сайте в порядке
- Яндекс.Вебмастер: раздел «Диагностика сайта» → «Статистика обхода». Там видно, сколько изображений без alt найдено роботом.
- Google Search Console: отчёт «Файлы, не проиндексированные Google» может косвенно указать на проблемы с изображениями.
- Браузерные расширения: Alt Text Tester для Chrome или Web Developer Toolbar позволяют одним кликом подсветить все alt-атрибуты на странице и найти пустые или пропущенные.
- Ручная проверка: откройте DevTools (F12), вкладка Elements, найдите тег <img> и посмотрите на атрибут
alt.
Чек-лист: 10 пунктов для аудита ALT-тегов
- Все контентные изображения имеют заполненный атрибут alt.
- Декоративные элементы имеют alt="" (именно пустой, не отсутствующий).
- Длина каждого описания — не более 125 символов.
- Текст описывает именно то, что на картинке, а не просто содержит ключевые слова.
- Нет переспама: ключи вписаны естественно, не через запятую.
- Нет фраз «изображение», «фото», «картинка» в начале alt.
- Для товаров указаны: цвет, материал, модель, ключевые детали.
- Названия файлов осмысленные (не IMG_0001.jpg), с дефисами между словами.
- Alt-тексты уникальны для каждой страницы, даже если изображение одно и то же.
- Инфографика и сложные изображения имеют либо развёрнутый alt, либо текстовую расшифровку на странице.
Заключение
ALT-тег — это не просто строчка кода, а полноценный инструмент для привлечения клиентов. Хорошо прописанные alt-атрибуты:
- улучшают позиции сайта в поиске по картинкам (а это дополнительный трафик);
- делают сайт доступным для людей с ограниченными возможностями;
- повышают общее качество SEO, так как поисковики ценят продуманную разметку контента.
Проведите аудит своего сайта по чек-листу выше — скорее всего, вы найдёте десятки изображений, которые можно улучшить за 15 минут. И это окупится ростом позиций и переходов из картинок. Если нужна помощь с аудитом или внедрением — обращайтесь, мы с командой занимаемся этим профессионально.
