Альтернативный текст — как описать изображение для сайта
Что такое альтернативный текст
Альтернативный текст — это словесная замена изображения, которая передаёт его смысл или назначение. В HTML его обычно записывают в атрибуте alt изображения.
Представьте карточку велосипеда. На фото видно, что это складная модель с багажником. Человек, который не видит фото и пользуется экранным диктором, может услышать описание. Альтернативный текст должен сообщать существенную деталь, например «Складной велосипед с задним багажником».
Перед написанием определите задачу картинки.
- Передаёт сведения. Опишите то, что важно в этом месте. Для товара это может быть цвет или вид детали.
- Выполняет действие. Если картинка — единственный элемент ссылки, назовите назначение перехода.
- Украшает страницу. Если без неё ничего не теряется, обычно указывают пустой
alt="".
Чем альтернативный текст отличается от подписи
Альтернативный текст заменяет изображение при чтении без картинки. Подпись видна рядом с изображением и добавляет контекст. Это разные роли.
| Альтернативный текст | Подпись под изображением |
|---|---|
| Задача. Передать содержание, которое иначе видно только на фото. | Задача. Дать пояснение к фото для всех читателей. |
| Пример. «Складной велосипед с задним багажником». | Пример. «Велосипед в комплектации для поездок по городу». |
Где находится. В атрибуте alt изображения. | Где находится. В видимом тексте рядом с изображением. |
Если подпись уже полностью передаёт смысл картинки, подумайте о повторении при озвучивании страницы. Для декоративного элемента рядом с тем же текстом отдельное описание может быть лишним. Для информативного фото альтернативный текст полезен, когда передаёт деталь, которую подпись не сообщает.
Как написать альтернативный текст
Сначала определите, что читатель должен узнать из изображения именно на этой странице. Одно и то же фото может потребовать разных описаний. В каталоге важна модель, а в инструкции — положение детали.
- Назовите предмет. Например, «Городской велосипед».
- Добавьте важное отличие. Если фото показывает сложенную раму, укажите это. Тогда становится понятно, что именно демонстрирует кадр.
- Сократите лишнее. Уберите повтор заголовка и слова, которые не помогают понять изображение.
- Прочитайте в контексте. Представьте, что картинка недоступна. Проверьте, сохраняется ли нужная информация.
Альтернативный текст для сложной схемы может кратко назвать её тему. Если из схемы нужно понять порядок действий или точные числа, опишите их рядом обычным текстом. Тогда читатель получает данные в удобном виде, а поле alt не превращается в длинный абзац.
Как проверить альтернативный текст и связь с SEO
Для поиска альтернативный текст помогает пояснить, что изображено и как картинка относится к странице. Поисковик также учитывает окружающий текст и само изображение. Поэтому описывайте содержание точно, без механического перечисления запросов.
- Откройте настройки изображения. Найдите поле «Альтернативный текст» и проверьте, что описание относится именно к этой картинке.
- Проверьте ссылку с изображением. Если она ведёт в каталог и другого текста рядом нет, описание должно объяснять, что откроется каталог.
- Проверьте декоративные элементы. Убедитесь, что у них задан пустой
alt, если картинка действительно не несёт смысла. - Послушайте страницу. По возможности проверьте, не звучит ли один и тот же текст несколько раз подряд.
Такую проверку стоит повторить после замены фотографии. Если на месте велосипеда теперь показан крупный план тормоза, прежнее описание вводит в заблуждение. Обновите альтернативный текст одновременно с картинкой и проверьте результат в опубликованной карточке. Если не знаете, сколько деталей включить, сравните два варианта альтернативного текста. «Велосипед» на странице с несколькими моделями сообщает мало. «Складной велосипед с задним багажником» передаёт различие. В инструкции о тормозах важнее назвать показанную деталь. Проверьте, что выбранный текст отвечает на вопрос, ради которого в этом месте показана фотография.