Прописать alt для всех изображений

Зачем прописывать alt для изображений

Атрибут alt (альтернативный текст) — это текстовое описание изображения в HTML-коде. Он решает две задачи одновременно. Первая — доступность: если изображение не загрузилось или пользователь использует программу чтения экрана (скринридер), alt-текст объясняет, что изображено. Вторая — SEO: поисковые роботы не «видят» картинки так, как видит человек. Они анализируют alt-текст, чтобы понять содержание изображения и связать его с тематикой страницы.

Изображения с правильным alt-текстом попадают в поиск по картинкам — Яндекс Картинки и Google Images. Это дополнительный канал трафика, который часто упускают. Для интернет-магазинов, портфолио, сайтов услуг с визуальным контентом поиск по картинкам может давать ощутимый поток посетителей. Кроме того, Яндекс и Google учитывают alt-текст при ранжировании основной выдачи: он усиливает релевантность страницы по ключевым словам, которые в нём содержатся.

Пошаговая инструкция

Шаг 1. Проверьте текущее состояние alt-текстов на сайте

Прежде чем писать alt-тексты, оцените масштаб проблемы. Сколько изображений на сайте, сколько из них без alt?

Через Screaming Frog: просканируйте сайт, перейдите на вкладку «Images». Отфильтруйте по «Missing Alt Text» — вы увидите все изображения без альтернативного текста. Также проверьте фильтр «Alt Text Over 100 Characters» — слишком длинные alt-тексты тоже проблема. Экспортируйте список в Excel: URL изображения, страница, где оно размещено, текущий alt (если есть).

Через расширение браузера: установите Web Developer Toolbar (Chrome/Firefox). Функция «Images» → «Display Alt Attributes» покажет alt-текст прямо на странице рядом с каждым изображением. Пустые alt будут видны сразу. Этот метод удобен для точечной проверки отдельных страниц.

Через WordPress: в разделе «Медиафайлы» → «Библиотека» переключитесь в режим списка. Столбец «Заголовок» показывает название файла, но alt хранится отдельно. Кликните на изображение — в правой панели увидите поле «Альтернативный текст». К сожалению, WordPress не позволяет массово отфильтровать изображения без alt, поэтому для масштабной проверки лучше использовать Screaming Frog.

Шаг 2. Разберитесь, каким должен быть хороший alt-текст

Alt-текст — это краткое, точное описание того, что изображено. Он должен быть информативным для человека, который не видит картинку, и содержать ключевые слова, релевантные контексту страницы.

Принципы хорошего alt-текста:

• Описывайте содержание, а не функцию. Не «картинка 1» или «фото», а «стоматолог осматривает пациента в кабинете клиники».
• Будьте конкретны. Не «здание», а «фасад стоматологической клиники Дентал на ул. Ленина 15».
• Включайте ключевые слова, но естественно. Если страница про SEO-аудит, а на ней скриншот отчёта, alt может быть: «отчёт по SEO-аудиту сайта — таблица с техническими ошибками». Ключевое слово вписано органично.
• Оптимальная длина — 5-15 слов (до 125 символов). Скринридеры полностью зачитывают alt, и слишком длинный текст утомляет. Поисковики тоже лучше обрабатывают лаконичные описания.
• Не начинайте с «изображение», «фото», «картинка». Браузер и скринридер уже знают, что это изображение — дублировать не нужно.

Шаг 3. Пропишите alt для разных типов изображений

Подход к alt-тексту зависит от типа и назначения изображения:

Фотографии товаров: описание товара с ключевыми характеристиками. Пример: alt="кухонный стол из массива дуба 120x80 см натуральный цвет". Включите название, материал, размер, цвет — то, что пользователь может искать.

Фотографии работ (портфолио): описание результата. Пример: alt="результат отбеливания зубов — до и после процедуры". Для строительства: alt="ремонт ванной комнаты под ключ — плитка и сантехника".

Инфографика и схемы: краткое описание содержания. Пример: alt="схема этапов SEO-продвижения сайта от аудита до результата". Полное содержание инфографики должно быть продублировано в тексте страницы.

Скриншоты интерфейсов: описание того, что показано. Пример: alt="настройка целей в Яндекс Метрике — форма создания цели по событию".

Декоративные изображения: фоны, разделители, иконки оформления — для них alt должен быть пустым: alt="". Пустой alt сообщает скринридеру, что изображение декоративное, и его можно пропустить. Не путайте пустой alt (alt="") с отсутствующим alt (когда атрибута нет вовсе) — отсутствующий alt считается ошибкой.

Шаг 4. Пропишите alt в WordPress через медиабиблиотеку

В WordPress alt-текст задаётся при загрузке изображения или позже через медиабиблиотеку:

1. Перейдите в «Медиафайлы» → «Библиотека».
2. Кликните на изображение.
3. В правой панели найдите поле «Альтернативный текст» (Alt Text).
4. Введите описательный текст с ключевым словом.
5. Нажмите «Обновить».

Важно: alt, заданный в медиабиблиотеке, автоматически подставляется при вставке изображения в контент через редактор. Но если изображение уже вставлено в запись, изменение alt в медиабиблиотеке не обновит его в контенте — нужно отредактировать блок изображения в редакторе Gutenberg (или HTML-код в классическом редакторе).

В редакторе Gutenberg: выделите блок изображения → в правой панели «Блок» найдите поле «Текст alt (альтернативный текст)» → введите или отредактируйте текст.

Шаг 5. Обработайте изображения, вставленные через код темы

Не все изображения на сайте вставляются через редактор контента. Логотип, иконки в шапке, изображения в шаблонах страниц, баннеры — часто прописаны в коде темы (PHP-шаблоны) или в CSS.

Для изображений в PHP-шаблонах проверьте, что тег <img> содержит атрибут alt:

<img src="logo.png" alt="Название компании — логотип" width="200" height="60">

Для фоновых изображений в CSS (background-image) alt-текст не применяется — это одна из причин, почему важный контент не стоит размещать как CSS-фон. Если изображение несёт смысловую нагрузку, используйте тег <img>.

Шаг 6. Не допускайте переспам в alt-текстах

Соблазн набить alt ключевыми словами понятен, но это ошибка. Поисковики распознают переспам в alt так же, как в обычном тексте.

• Переспам: alt="SEO аудит SEO продвижение SEO оптимизация заказать SEO аудит сайта"
• Нормально: alt="фрагмент отчёта по SEO-аудиту с перечнем технических ошибок"

Одного-двух ключевых слов в alt достаточно. Если на странице 10 изображений, не нужно вписывать один и тот же ключ во все 10 — варьируйте описания, используйте синонимы и связанные фразы.

Шаг 7. Проверьте результат массово

После проработки alt-текстов пересканируйте сайт через Screaming Frog. Фильтр «Missing Alt Text» на вкладке «Images» должен показывать минимум записей — в идеале только декоративные изображения (но у них должен быть пустой alt, а не отсутствующий).

Дополнительно проверьте в Яндекс Вебмастере раздел «Диагностика» — Яндекс может предупреждать об изображениях без alt-текста. В Google Search Console проверьте отчёт «Удобство страниц» — отсутствие alt влияет на оценку доступности.

Типичные ошибки

• Оставлять alt с названием файла. alt="IMG_20240315_142856.jpg" или alt="screenshot-2024-03-15" — бессмысленно для пользователя и бесполезно для SEO. Замените на описательный текст.
• Писать одинаковый alt для всех изображений на странице. Если на странице 8 фотографий с одинаковым alt «стоматология в Москве» — это переспам. Каждое изображение заслуживает уникального описания.
• Забывать про alt в слайдерах и галереях. Плагины слайдеров и галерей часто имеют собственные поля для alt, которые остаются пустыми. Проверьте настройки каждого слайдера и галереи отдельно.
• Путать alt, title и подпись. Alt — текст для роботов и скринридеров, отображается при незагруженном изображении. Title — всплывающая подсказка при наведении мыши (менее важен для SEO). Подпись (caption) — видимый текст под изображением. Для SEO критичен именно alt.
• Не прописывать alt для иконок социальных сетей и навигации. Иконка «телефон» в шапке без alt — скринридер не скажет пользователю, что это кнопка вызова. Пропишите: alt="Позвонить" или alt="Телефон для связи".
• Делать alt длиннее 125 символов. Скринридеры обычно зачитывают alt целиком. Длинный текст утомляет. Если описание требует больше слов — используйте подпись под изображением или текст рядом.
• Полностью игнорировать изображения в старом контенте. Новые статьи получают alt сразу, а сотни изображений в старых записях остаются без описания. Пройдитесь по старому контенту — хотя бы по самым посещаемым страницам.

Что проверить в итоге

• Все смысловые изображения на сайте имеют заполненный атрибут alt с описательным текстом.
• Декоративные изображения имеют пустой alt (alt=""), а не отсутствующий.
• Alt-тексты содержат ключевые слова, релевантные странице, без переспама.
• Каждое изображение на странице имеет уникальный alt — нет повторяющихся описаний.
• Длина alt-текста не превышает 125 символов.
• Alt-тексты прописаны не только в контенте, но и в шаблонах темы: логотип, иконки, баннеры.
• Изображения в слайдерах, галереях и виджетах имеют заполненные alt.
• Screaming Frog → вкладка «Images» → фильтр «Missing Alt Text» показывает минимум записей.
• Фотографии товаров и работ содержат в alt ключевые характеристики: название, материал, тип, локацию.