Как настроить alt-тексты для изображений на сайте в 2026 году

Я обычно начинаю работу с картинок не с «красивой оптимизации», а с простого вопроса: что именно человек должен понять, если изображение не загрузилось или если он пользуется экранным диктором. В 2026 году alt-тексты — это уже не формальность для SEO, а нормальная часть доступности, качества контента и технической дисциплины на сайте.

Зачем alt-текст нужен в 2026 году

Alt-текст — это альтернативное текстовое описание изображения. Он появляется, если картинка не загрузилась, и читается скринридерами. На деле это ещё и сигнал для поисковиков, особенно когда речь идёт о товарах, услугах, скриншотах интерфейса, схемах и инфографике. И вот тут начинается типичная ошибка: на сайт ставят либо пустые alt, либо набор ключей в стиле «купить пластиковые окна Москва дешево». Это плохая идея. Однозначно.

На моей практике alt-тексты часто всплывают уже после аудита. У клиента интернет-магазин на WordPress, 18 000 изображений, часть каталога грузится через WooCommerce, часть — из старого импорта. В логах всё вроде нормально, картинок много, WebP подключён, ленивый рендер работает, а вот в Search Console мусор и слабая видимость по картинкам. Причина банальная: alt-тексты либо отсутствуют, либо дублируются шаблонно. После нормальной переработки и пересборки описаний трафик из картинок вырос примерно на 17% за 3 месяца. Не магия, просто аккуратная работа.

Если у вас сайт на Bitrix или WordPress, alt особенно важен в карточках товаров, новостях, кейсах и статьях. И если задача не ограничивается «поставить пару слов в атрибут», а нужен системный подход, я бы сразу смотрел в сторону доработки сайта под контент и шаблоны вывода. А перед тем как лезть в массовые правки, неплохо бы пройтись по проверке сайта — там быстро видно, где у вас пустые alt, где дубли, а где вообще изображение вёрсткой вставлено криво.

Какие бывают alt-тексты и когда их использовать

Я делю alt-тексты на несколько типов. Это помогает не путаться и не лепить одинаковые фразы на все изображения подряд. Первый тип — описательный. Он нужен для фото, скриншотов, иллюстраций, схем. Второй — функциональный. Это когда изображение выполняет роль кнопки или ссылки. Третий — декоративный. У такого изображения alt обычно пустой, то есть alt="".

Если картинка несёт смысл, alt нужен. Если это фон, разделитель, декоративная плашка — лучше не плодить бессмысленный текст. Многие до сих пор вписывают alt даже в иконку-стрелку или фоновый паттерн. И вот это уже мешает, потому что скринридер начинает читать мусор. А если картинка чисто декоративная, доступность от этого только страдает.

У меня был случай с сайтом на Laravel 11 и админкой, где дизайнеры залили в слайдер 12 огромных баннеров. На каждом alt был одинаковый: «Главный баннер». Для SEO это ноль, для доступности — тоже почти ноль. Я переписал их по смыслу: где акция, где сезонный товар, где отдельная услуга, где кейс. И неожиданно для владельца сайта начали лучше индексироваться страницы с подборками материалов. Потому что поисковик наконец понял, что именно изображено.

• Описательный alt — для фото, товаров, скриншотов, инфографики.
• Функциональный alt — для кнопок, иконок-ссылок, кликабельных баннеров.
• Декоративный alt="" — для элементов без смысловой нагрузки.

Если у вас уже есть база знаний по структуре контента, советую параллельно посмотреть статью про H1, H2 и H3 для SEO и материал про sitemap для изображений. Alt-текст, заголовки и карта изображений работают вместе. По отдельности это просто набор технических штук.

Как писать хороший alt-текст: правила без воды

Хороший alt-текст — это краткое, точное и полезное описание. Я обычно ориентируюсь на правило: что видит человек, который не может посмотреть на картинку, но должен понять её смысл. Не надо писать «изображение», «фото», «картинка» — скринридер и так понимает, что это изображение. Не надо накидывать лишние слова. Не надо пихать в один alt всю семантику страницы. И не надо делать из alt мини-статью.

Если это фото товара, пишите конкретно: «Кроссовки Nike Air Max 270 белые, вид сбоку». Если это скриншот интерфейса: «Панель управления WordPress 6.8 с открытым разделом “Медиафайлы”». Если это схема: «Схема подключения CDN к сайту через Nginx и Cloudflare». Это работает лучше, чем абстрактные формулировки вроде «картинка товара» или «наша услуга».

И ещё момент. На практике люди часто путают alt и SEO-спам. Alt не должен быть переоптимизирован. Если на странице 20 изображений и в каждом вы пишете одну и ту же ключевую фразу, это уже выглядит подозрительно. Google и Яндекс давно умеют распознавать неестественные шаблоны. Лучше писать по-разному, но по смыслу.

Чего делать не стоит

Не дублируйте заголовок страницы в каждом alt. Не пишите один и тот же alt для всех товаров одного бренда. Не вставляйте туда название компании, адрес, телефон и прочую ерунду. Alt — не место для визитки. И уж точно не надо делать что-то в стиле: «купить, заказать, недорого, Москва, доставка». Это старый SEO-подход, и он давно выглядит как мусор.

Если страница многоязычная, alt-тексты тоже должны быть на языке той версии сайта, на которой находится пользователь. Тут полезно почитать мой материал про многоязычный сайт и про hreflang. На международных проектах я часто вижу одну и ту же ошибку: интерфейс переведён, а alt оставили на русском или английском вперемешку. Это не просто некрасиво, это ломает смысловую целостность.

Ошибки в alt-текстах, которые я вижу почти на каждом втором сайте

Самая частая ошибка — пустые alt на значимых изображениях. Особенно этим грешат сайты на старых шаблонах Bitrix и на WordPress, где изображения выводятся через стандартные циклы, а разработчик просто не предусмотрел передачу поля alt из медиабиблиотеки. В результате картинка есть, смысл есть, а доступности нет. И поисковик тоже получает меньше сигнала.

Вторая ошибка — шаблонные alt для массовых сущностей. Например, все изображения товаров получают alt вида «Фото товара». Это почти бесполезно. Третья ошибка — alt, набитый ключевыми словами. Четвёртая — слишком длинные описания. Пятая — alt отсутствует, потому что изображение вставлено как background-image в CSS. Вот это уже особенно плохо, если картинка важная. CSS-фон не заменяет контентное изображение.

И был ещё случай у одного клиента на Битриксе 26.0 с каталогом мебели. Разработчики вывели фото товаров через компонент, но alt формировался из названия раздела, а не из названия товара. То есть у дивана alt был «Мягкая мебель», у стула — «Мягкая мебель», у кресла — снова «Мягкая мебель». После правки шаблона и нормальной массовой генерации alt страница каталога стала получать больше показов по низкочастотным запросам. Не скажу, что всё выросло мгновенно, но эффект был заметный.

• Пустой alt у смысловой картинки.
• Одинаковый alt для разных изображений.
• Переспам ключами.
• Слишком общий текст вроде «изображение».
• Критичные картинки, вставленные как CSS background.

Если у вас ещё и скорость сайта хромает, посмотрите материал про Core Web Vitals и Lazy Loading изображений. На деле alt-тексты часто всплывают уже после оптимизации картинок, когда сайт начинает быстрее грузиться и наконец видно, сколько изображений вообще не описано.

Как настроить alt-тексты в WordPress, Bitrix и Laravel

На практике настройка alt зависит от CMS и от того, как у вас устроен вывод изображений. В WordPress всё обычно крутится вокруг медиабиблиотеки и полей attachment. В Bitrix — вокруг свойств элементов инфоблоков, шаблонов компонентов и кастомных полей. В Laravel чаще всего всё делается руками: через Blade-шаблоны, модельные поля и административную панель.

Если проект небольшой, можно править alt вручную в админке. Но на сайтах с каталогом на 500, 5 000 или 50 000 изображений это уже не вариант. Там нужна системная схема: либо автоподстановка alt из названия сущности, либо массовая переработка через импорт, либо отдельный модуль. И если у вас WordPress на PHP 8.2 с WooCommerce, я бы сразу смотрел, как заполняется поле _wp_attachment_image_alt. Если его никто не заполняет, картинка будет без alt, даже если подпись у медиафайла красивая.

В Bitrix я обычно проверяю шаблон компонента: там часто делают что-то вроде $arItem['PREVIEW_PICTURE']['ALT'], но сам ALT в админке не заполнен или не подтягивается из свойства. Это решается либо доработкой шаблона, либо обработчиком событий, либо массовым импортом. На старых проектах это почти всегда часть большой доработки сайта, потому что alt редко живёт отдельно от общей структуры каталога.

<?php
// Пример для WordPress: вывод изображения с alt из медиабиблиотеки
$image_id = get_post_thumbnail_id(get_the_ID());
$alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);

if (!$alt) {
    $alt = get_the_title(get_the_ID());
}
echo wp_get_attachment_image($image_id, 'large', false, [
    'alt'   => esc_attr($alt),
    'loading' => 'lazy',
    'decoding' => 'async',
]);
?>

Для Laravel логика похожая, только вы сами решаете, где хранить alt: в таблице media, в отдельной связке media_items, в JSON-поле или в CMS-пакете. Я часто делаю alt как отдельную колонку в таблице изображений, потому что это удобно для редакторов и не требует шаманства в шаблонах. Важно только не смешивать alt с названием файла. Файл img_1234.jpg — это не alt.

<img
    src="{{ asset($image->path) }}"
    alt="{{ $image->alt ?: $product->name }}"
    width="1200"
    height="800"
    loading="lazy"
    decoding="async">

Если проект на Bitrix, и у вас десятки шаблонов, иногда проще отдать это на настройку специалисту, чем пытаться вручную править всё через шаблон за шаблоном. Для таких задач у меня на сайте есть не только доработка сайта, но и поддержка Битрикс — потому что именно на Битриксе чаще всего всплывают проблемы с компонентами, кешем и старыми шаблонами.

Массовое заполнение alt-текста: скрипты, импорт и здравый смысл

Когда изображений много, руками это делать долго и бессмысленно. На проекте с несколькими тысячами карточек я обычно предлагаю два пути: либо массовая генерация alt по шаблону с последующей ручной правкой важных позиций, либо импорт из CSV/Excel. В реальности лучше комбинировать оба подхода. Автоматикой закрываем 80% типовых случаев, руками добиваем то, что действительно влияет на SEO и доступность.

Например, для товарного каталога шаблон может быть таким: «{Название товара}, {цвет}, {вид}, вид спереди». Для услуги: «{Название услуги} в Москве, пример результата». Для кейса: «Скриншот панели аналитики после внедрения SEO-структуры». Для новостей — по смыслу фотографии, а не по теме статьи в целом. Это уже не магия, а нормальная систематизация.

Но я бы не советовал делать полностью автоматический alt без проверки. Иначе вы получите странные сочетания вроде «Смеситель латунный черный, вид сбоку, вид спереди, вид сверху» или «Фото фото фото». Автоматизация хороша там, где она экономит время, но не заменяет редакторский контроль. Иначе потом всё это приходится переделывать.

Если у вас есть выгрузка из 1C, МойСклад или другой системы, можно вытаскивать alt из названия, артикула и характеристик. Иногда достаточно даже одного правила на уровне импорта. Например, на стороне MySQL 8.0 это можно готовить через отдельную таблицу сопоставления, а дальше прогонять обновление по товарам. Грубо говоря, сначала налаживаем данные, потом уже шлифуем тексты.

SEO, доступность и почему грань между ними почти исчезла

Ещё несколько лет назад alt воспринимали как «что-то для SEO». Сейчас это уже узкое мышление. В 2026 году нормальный сайт должен учитывать и поисковые системы, и пользователей с ограничениями, и поведение ассистивных технологий. Это особенно видно на e-commerce, медиа и корпоративных сайтах, где много визуального контента и много повторяющихся шаблонов.

Я часто советую смотреть на alt в связке с доступностью. Если вы уже внедряете WCAG, ARIA, улучшаете контраст, делаете удобную клавиатурную навигацию, то alt — это просто ещё один кирпич в той же стене. У меня есть отдельный материал про доступность сайта и WCAG/ARIA, и там хорошо видно, что alt — это не изолированная задача. Он работает вместе с подписями, ARIA-label, семантическими заголовками и правильной структурой страницы.

С SEO тоже всё понятно. Alt помогает картинкам попадать в поиск по изображениям и лучше распознавать содержимое страницы. Но если сам сайт медленный, кривая верстка, битые ссылки, дубли, отсутствует sitemap для изображений, то один alt вас не спасёт. Поэтому я обычно советую смотреть на комплекс: sitemap для изображений, WebP или AVIF, lazy loading, правильные размеры, CDN и нормальные атрибуты. И да, если у вас картинка весит 2,4 МБ и грузится по HTTPS через кривой редирект, alt тут вообще не приоритет.

На проектах с большим количеством медиа я иногда сначала провожу проверку сайта, потом уже иду в доработки. Потому что иначе можно потратить время на alt, а потом выяснить, что у вас половина изображений не индексируется из-за robots.txt, или страницы с картинками блокируются настройками. Бывало и такое.

Практический чек-лист для настройки alt в 2026 году

Если свести всё к рабочему чек-листу, то я бы делал так. Сначала выгрузил бы все изображения и проверил, где alt пустой, где повторяется, где заполнен мусором. Потом определил бы типы изображений: смысловые, декоративные, функциональные. Затем настроил бы шаблоны для автозаполнения там, где это уместно. И только после этого перешёл бы к ручной редактуре самых важных блоков.

Дальше проверил бы, как alt ведёт себя на реальных страницах. Не в админке, а именно во фронтенде. Потому что очень часто в базе alt есть, а в шаблоне он не выводится. Или выводится не тот. Или динамически подменяется плагином. Или пропадает после кеширования. Особенно это весело на связке WordPress + кеш-плагин + CDN + оптимизация изображений. Вроде всё включено, а HTML на выходе неправильный. И вот тут уже нужна нормальная диагностика и, возможно, настройка силами специалиста.

1. Собрать список изображений и проверить заполненность alt.
2. Разделить изображения на смысловые, декоративные и функциональные.
3. Настроить шаблоны alt для типовых сущностей.
4. Проверить вывод на фронтенде.
5. Сделать ручную правку ключевых страниц и карточек.
6. Заложить контроль в процесс публикации контента.

И ещё полезно связать alt с другими SEO и техническими задачами. Например, если вы уже делали WebP и оптимизацию изображений, то alt стоит проверять одновременно. Если у вас настроен PageSpeed, проверьте, не ломает ли оптимизатор вывод атрибутов. Если есть редизайн, загляните в материал про редизайн сайта — там часто всплывает вопрос переноса всех медиа и их описаний без потерь.

Честно говоря, alt-тексты — одна из тех мелочей, которые и отделяют «просто сайт» от аккуратно сделанного проекта. Их почти не видно пользователю, пока всё работает хорошо. Но когда они отсутствуют, это сразу чувствуется. И в доступности, и в SEO, и в качестве админки, и в общем впечатлении от проекта.

Если у вас старый сайт на WordPress 6.x или Bitrix 26, и alt заполняется хаотично, я бы не откладывал это в долгий ящик. Сначала проверка, потом шаблоны, потом массовая правка. На небольшом сайте это можно сделать за один-два дня. На крупном каталоге — уже отдельный проект. И это нормально. Главное — не оставлять всё как есть.