Большинство разработчиков и контент-менеджеров заполняют alt у картинок автоматически или по шаблонам из 2010-х годов. На практике это часто не только не помогает продвижению, но и ухудшает доступность сайта, создавая токсичный для современных алгоритмов SEO-спам.
В эпоху, когда нейросети способны мгновенно увидеть объект на фото без всякого текста, роль alt радикально изменилась. Теперь это не инструмент для набивки ключей, а контекстуальный мостик между визуалом, пользователем и поисковым роботом.
Основное на 2026 год:
- Атрибут alt="" обязан присутствовать рядом с каждым тегом img src="" — это базовый стандарт валидности кода.
- Изображение несёт смысл? Заполняйте alt ёмким, уникальным описанием.
- Изображение декоративное/дублирует текст? Оставляйте alt пустым.
- Оптимальная длина: от 3 до 15 слов (до 125 символов). Всё, что длиннее, скринридеры для незрячих могут просто обрезать.
Зачем нужен alt в эпоху развитого ИИ
Исторически атрибут alt решает две задачи:
- Доступность: скринридеры озвучивают его пользователям с нарушениями зрения.
- SEO-индексация: поисковые системы используют его для понимания контента.
Зачем писать alt, если Google и так умеет распознавать образы на картинках? Компьютерное зрение поймёт, что на фото изображена кружка. Но алгоритм не узнает, что это «Термокружка ШвейПром 500 мл хаки с карабином», пока вы не укажете это в тексте. ИИ определяет объект, а alt задаёт его бизнес-контекст.
Если вся информация о картинке уже есть в соседнем тексте, дублировать её в alt слово в слово — грубейшая ошибка. Робот посчитает это спамом, а скринридер прочитает пользователю одно и то же дважды.
1. Контентные изображения
Если картинка содержит важную для понимания информацию, alt должен кратко, ёмко и конкретно её описывать.
Плохой вариант описания (SEO-спам или размытый смысл):
- фото товара;
- картинка;
- пошив одежды оптом спецодежда.
Правильный вариант (описательный контекст):
- Мужской рабочий костюм Спец-1, цвет хаки, размер 52.
- Швеи за работой на промышленных швейных машинах в цеху.
- Производственный швейный цех с рядами оборудования.
Всё зависит от контекста страницы
Один и тот же графический файл может иметь абсолютно разный alt в зависимости от того, на каком сайте и в каком разделе он опубликован.
Сценарий А (каталог спецодежды): фокус на деталях товара.
<img src="jacket.jpg" alt="Куртка зимняя мужская, мембрана, цвет чёрный">
Сценарий Б (страница О компании / Наше производство): фокус на процессе и действии.
<img src="jacket.jpg" alt="Сотрудник склада в зимней спецодежде проверяет партию товара">
2. Функциональные изображения (кнопки и ссылки)
Если изображение вложено в тег ссылки или кнопки и само по себе является кликабельным элементом, его alt обязан описывать целевое действие, а не внешний вид.
Плохо: alt="логотип" или alt="лупа". Робот поймёт, что нарисована лупа, но не поймёт, что произойдёт при клике.
Хорошо: alt="На главную — ШвейПром" или alt="Поиск по сайту".
<button type="submit" aria-label="Искать">
<img src="search.svg" alt="Поиск по сайту">
</button>
3. Декоративные изображения
Если изображение используется исключительно для визуального оформления и не несёт смысловой нагрузки, alt обязан быть пустым.
Сюда относятся:
- Иконки преимуществ рядом с готовыми заголовками.
- Фоновые узоры, разделители, стрелочки и декоративные плашки.
<img src="calendar.png" alt="">
<h3>Соблюдение сроков заказа</h3>
Критичная ошибка: полное отсутствие атрибута alt (даже пустого). Если атрибута нет вообще, скринридеры начнут вслух читать пользователю техническое имя файла. Это ухудшает технические метрики качества сайта.
Прокачиваем Core Web Vitals через CSS
Если графика нужна только для красоты, лучшая практика — вообще убрать её из HTML-потока в CSS:
.hero-section {
background-image: url("pattern.png");
}
4. Сложная графика (схемы, диаграммы, инфографика)
Для графиков и аналитики короткого alt физически недостаточно. В таких случаях используется связка из короткого alt и расширенного описания через семантический тег figure и атрибут aria-describedby.
<figure>
<img
src="chart.png"
alt="График роста объемов производства спецодежды (2020–2024)"
aria-describedby="chart-details"
loading="lazy">
<figcaption id="chart-details">
Данные графика: объем выпуска продукции увеличился с 1200 единиц в 2020 году до 4800 единиц в 2024 году за счет модернизации раскройного цеха.
</figcaption>
</figure>
Помните: текст в alt и текст в figcaption не должны дублировать друг друга. В alt даётся общая суть, в подписи — конкретные цифры и факты.
3 частые ошибки оптимизации, за которые Google пессимизирует сайты
- Keyword Stuffing (SEO-спам): скрытый текст, под завязку набитый ключевыми словами — прямой маркер поискового спама. Современные фильтры Google легко распознают несовпадение изображения и текста, снижая позиции страницы.
- Использование мусорных слов: робот на уровне исходного кода знает, что тег img — это картинка, а скринридер сам добавляет слово «изображение» перед чтением. Не тратьте полезные лимиты символов на воду.
- Alt-дублирование: когда на странице каталога идёт блок из 20 товаров, и у каждого стоит абсолютно одинаковый alt. Добавляйте артикул, цвет или уникальную характеристику в автоматический сборщик alt.
Краткий чек-лист для проверки
- У всех картинок в коде физически прописан атрибут alt (пустой или заполненный).
- Для смысловых фото alt отвечает на вопрос: что изображено в контексте этой страницы?
- Длина описания не превышает 120–125 символов.
- Элементы интерфейса (иконки, кнопки) описывают действие, а не форму.
- Из текста полностью удалены слова фото, картинка и бессмысленные перечисления ключевых запросов.
