Alt-тексты изображений: зачем нужны и как писать правильно

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

Что такое alt-текст и где он используется

Alt, или альтернативное описание, это атрибут HTML-тега img. В нем кратко описывают содержание и назначение изображения. Например, для фотографии товара подойдет описание «Черный кожаный рюкзак с отделением для ноутбука», а для фотографии команды, «Сотрудники агентства на встрече в переговорной».

Alt-текст решает сразу несколько задач:

• помогает пользователю понять смысл изображения, если оно не загрузилось;
• передает содержание картинки посетителям с нарушением зрения через скринридер;
• дает поисковым системам дополнительные данные о странице и ее визуальном контенте;
• поддерживает поиск по изображениям, особенно для товаров, услуг и инструкций;
• повышает качество сайта с точки зрения доступности.

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

Каким должен быть хороший alt-текст

Хорошее описание отвечает на вопрос: что изображено и зачем посетителю это видеть? Текст должен быть коротким, точным и написанным естественным языком. Обычно достаточно одной фразы без точки в конце.

Alt описывает не все детали фотографии, а ее смысл в контексте конкретной страницы.

Сравните варианты:

• Плохо: «картинка», «фото», «изображение 1», «баннер».
• Слабо: «диван».
• Лучше: «Серый угловой диван с текстильной обивкой в интерьере гостиной».

В первом варианте нет полезной информации. Второй слишком общий. Третий описывает объект и его ключевые характеристики, но не превращается в перечень поисковых запросов.

Ориентируйтесь на роль изображения

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

Если изображение содержит текст, его смысл нужно передать в alt, когда текст нельзя получить из HTML. Например: «Скидка 15 процентов на установку кондиционеров до 30 июня». Но не стоит дублировать в описании весь рекламный слоган, если он уже размещен рядом обычным текстом.

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

Товарные фотографии

Укажите название товара и признаки, которые помогают отличить его от других позиций. Для интернет-магазина важны цвет, модель, материал, комплектация и ракурс, если они влияют на выбор.

• «Белые кроссовки Nike Air Max, вид сбоку»;
• «Настольная лампа из матового стекла с латунным основанием»;
• «Комплект кухонных ножей из нержавеющей стали, пять предметов».

Не добавляйте характеристики, которых не видно на изображении. Если размер, мощность или гарантия указаны только в описании товара, их не нужно переносить в alt.

Услуги и рабочие процессы

Для сайта компании описывайте не абстрактную сферу, а действие или результат. «Команда разрабатывает дизайн интернет-магазина» информативнее, чем «Разработка сайтов». Такой подход делает изображение полезным для посетителя и не выглядит как механическое размещение ключевых слов.

Иконки и функциональные изображения

Если картинка является кнопкой или ссылкой, alt должен объяснять действие: «Открыть корзину», «Скачать каталог», «Перейти в Telegram». В этом случае описание отвечает не столько на вопрос «что изображено», сколько на вопрос «что произойдет после нажатия».

Декоративные изображения

Фоновый узор, разделитель, абстрактная фигура и фотография, не добавляющая смысла, должны иметь пустой атрибут alt: alt="". Это не ошибка. Скринридер пропустит декоративный элемент и не заставит пользователя слушать названия файлов или бессмысленные описания.

Alt-тексты и SEO: что действительно работает

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

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

Ключевая фраза уместна, когда она естественно описывает объект. Для страницы услуги можно написать «Дизайн главной страницы корпоративного сайта», если именно это показано на скриншоте. Не стоит добавлять «заказать сайт недорого Москва» к фотографии офиса, где таких сведений нет.

Типичные ошибки при заполнении alt

• Одинаковый текст для всех изображений. Он не помогает различать картинки и может выглядеть как шаблонная оптимизация.
• Перечень ключевых слов. Набор запросов через запятую не описывает изображение и ухудшает восприятие скринридером.
• Слишком длинное описание. Пользователю приходится прослушивать лишние подробности. Если нужна развернутая схема или инфографика, основной текст следует разместить рядом.
• Описание файла вместо содержания. Название вроде IMG_4837.jpg ничего не говорит посетителю.
• Слово «фото» в каждом атрибуте. Программа экранного доступа и так понимает, что перед ней изображение.
• Alt у декоративной графики с текстом. Если декоративную картинку описать, она начнет отвлекать от содержания страницы.
• Alt не соответствует видимому объекту. Нельзя описывать на фото красный стул, если он синий, даже если цвет нужен в ключевой фразе.

Как проверить alt на готовом сайте

Проверку лучше проводить не только на главной странице, но и в шаблонах каталога, карточках товаров, статьях, кейсах и посадочных страницах. Минимальный алгоритм выглядит так:

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

В CMS alt обычно редактируется в медиабиблиотеке или непосредственно в поле изображения. Важно убедиться, что внесенное описание действительно попадает в HTML, а не сохраняется только во внутренней карточке файла. На большом сайте полезно автоматизировать поиск пустых alt у контентных изображений, но исправлять тексты лучше вручную или по понятным правилам.

Что делать с уже опубликованными страницами

Не обязательно сразу переписывать все изображения. Начните с тех, которые расположены на страницах с органическим трафиком, приносят заявки или участвуют в выборе товара. Затем обработайте шаблоны, от которых зависит большое количество URL. Это позволяет получить практический результат без несистемной работы по всему сайту.

Как организовать работу с alt в команде

Чтобы качество не зависело от конкретного редактора, добавьте правила в контент-гайд. Зафиксируйте, какие характеристики указывать для товаров, когда использовать пустой alt, как описывать кнопки и где нельзя дублировать текст из подписи.

Для интернет-магазина можно использовать формулу: тип товара, бренд или модель, ключевая видимая характеристика, ракурс или назначение. Для кейсов: объект, действие, результат или экран. Формула нужна как ориентир, а не как жесткий шаблон для автоматической подстановки.

Перед публикацией задайте простой вопрос: поймет ли человек смысл этой картинки, если он ее не увидит? Если ответ отрицательный, описание нужно уточнить. Если картинка не несет смысла, пустой alt будет правильнее попытки заполнить поле любыми словами.

Итог

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

Если сайт создается с нуля или требует системной SEO-доработки, в RDMN можно учесть работу с изображениями еще на этапе проектирования структуры, контента и шаблонов. Это помогает не исправлять типовые ошибки после запуска и поддерживать единые правила на всем проекте.