Как прописать alt-теги изображений
Разделы
- Все
- Блог 44
- Начало работы 10
- Интернет магазин 26
- Домены 10
- Заявки и заказы 5
- Продвижение сайтов 20
- Интеграции 28
- Повышение конверсии 6
- Тарифы и оплата 4
- Редактор конструктора 25
- Технические вопросы и частые ошибки 129
- Другие вопросы 18
- Создание сайтов 240
- Копирайтинг 33
- Интернет маркетинг 1411
- Бизнес обучение 214
- Заработок в интернете 129
В современном веб-дизайне изображения играют ключевую роль: они привлекают внимание, иллюстрируют сложные идеи и улучшают пользовательский опыт. Однако без правильной разметки картинки могут стать «невидимым барьером» для двух важнейших аудиторий: поисковых систем и людей с ограниченными возможностями зрения.
Именно здесь на помощь приходит атрибут alt (alternative text, альтернативный текст). Это краткое текстовое описание изображения, которое:
- Для доступности: Озвучивается программами-скринридерами, позволяя незрячим и слабовидящим пользователям понять, что изображено на картинке.
- Для SEO: Помогает поисковым системам (таким как Google) индексировать и понимать содержание изображения, что может положительно сказаться на вашей позиции в поиске по картинкам и обычном поиске.
- Для пользователей: Отображается на месте изображения, если оно не загрузилось из-за медленного соединения или ошибки.
Качественный alt - это не просто техническая формальность, а важный элемент вежливости и эффективности вашего сайта.
Как прописывать alt-теги в разных ситуациях? В таблице ниже приведены конкретные примеры для самых распространенных типов изображений.
| Тип изображения | Назначение | Пример плохого alt-тега | Пример хорошего alt-тега | Почему это правильно |
|---|---|---|---|---|
| Декоративное изображение | Элемент дизайна, не несущий смысловой нагрузки (фон, разделители, чисто для красоты). | alt="Картинка" | Пустой атрибут: alt="" | Скринридеры игнорируют пустой alt, не засоряя навигацию пользователя лишней информацией. |
| Информативное изображение | Иллюстрирует или дополняет контент страницы (диаграмма, схема, фото товара). | alt="Фотография кота" | alt="Рыжий мейн-кун сидит на подоконнике и смотрит в окно" | Описание передает конкретные детали, которые важны для понимания контента. |
| Функциональное изображение | Выполняет роль кнопки или ссылки (иконка «Корзина», логотип, ведущий на главную). | alt="Кликните сюда" | alt="Корзина товаров" или alt="Перейти на главную страницу" | Четко описывает действие, которое произойдет при нажатии. Избегайте неоднозначных фраз вроде «кликните сюда». |
| Изображение текста | Текст, сохраненный в виде картинки (логотип, акция). | alt="Логотип компании" | alt="Логотип компании «ВкусВилл»" | Точное воспроизведение текста, который содержится на изображении. |
| Сложное изображение | Графики, диаграммы, сложные инфографики. | alt="График продаж" | alt="График роста продаж смартфонов в 2023 году. По оси Y - объем продаж в штуках, по оси X - кварталы. На графике виден пик в третьем квартале." Лучшая практика: описать ключевые выводы в alt, а полные данные предоставить в тексте рядом или в longdesc. | Дает краткое, но содержательное описание основных тенденций и выводов, делая сложную информацию доступной. |
Ключевые принципы написания качественных alt-тегов
Помимо примеров из таблицы, руководствуйтесь несколькими простыми правилами:
- Будьте точны и кратки. Старайтесь уложиться в 125 символов. Этого обычно достаточно для передачи сути.
- Описывайте содержание, а не форму. Не пишите «фото дерева», лучше - «Старый дуб с раскидистой кроной в летнем лесу».
- Используйте ключевые слова естественно. Включайте релевантные SEO-ключи, но не спамьте. alt="Купить черные кожаные ботинки Dr. Martens" - хорошо. alt="Ботинки, купить ботинки, ботинки недорого, обувь" - плохо.
- Не начинайте с «Изображение...» или «Картинка...». Программы-скринридеры и так сообщают пользователю, что это изображение.
- Для групп изображений можно использовать один общий описательный alt для родительского элемента, если они показывают одно и то же (например, товар с разных ракурсов).
Проблемы и решения для ALT-тегов
Проблема: отсутствие ALT-тега
- Описание: Изображение не имеет атрибута alt. Это худшая практика, особенно для скринридеров и SEO.
- Решение: Всегда добавлять атрибут alt. Даже если изображение декоративное, используйте пустой атрибут: alt=" ".
Проблема: неинформативный или общий ALT-текст
- Описание: Использование шаблонных названий вроде image001.jpg, pic.png, photo, рисунок.
- Решение: Создавать точное и краткое описание сути изображения. Например: alt="Черный кофе в белой керамической чашке".
Проблема: избыточный текст
- Описание: ALT-тег превращается в длинное предложение или абзац, перегружая пользователей скринридеров.
- Решение: Делать описание лаконичным. Обычно достаточно 5-10 слов. Детальное описание лучше вынести в текст на странице или в атрибут longdesc.
Проблема: ключевые слова (спам)
- Описание: ALT-тег используется для перечисления ключевых слов, не относящихся к изображению: alt="купить дешево кофе чашка москва доставка".
- Решение: Описание должно быть в первую очередь полезным для человека. Ключевые слова можно использовать только если они точно описывают изображение.
Проблема: использование "изображение" или "картинка"
- Описание: Скринридер и так сообщает, что это изображение. Фраза alt="изображение чашки кофе" будет озвучена как "изображение, изображение чашки кофе".
- Решение: Опускать слова "изображение", "картинка", "фото". Описывать только содержание: alt="Чашка кофе".
Проблема: ALT-текст для декоративных изображений
- Описание: Декоративные элементы (разделители, фоновые иконки) получают ненужные описания, засоряя аудиопоток.
- Решение: Использовать пустой ALT-атрибут: alt=" ". Скринридер будет игнорировать такое изображение.
Проблема: описание текстовых изображений
- Описание: Изображение содержит текст (например, инфографика). ALT-тег не передает эту информацию.
- Решение: В ALT-атрибут нужно поместить весь текст, который содержится на изображении. Если текст очень длинный, продублируйте его в основном контенте на странице.
Проблема: ALT для ссылок-изображений
- Описание: Если изображение является ссылкой, а
altотсутствует или неинформативен, непонятно, куда ведет ссылка. - Решение: ALT-текст должен описывать действие или цель ссылки, а не само изображение. Например, для иконки лупы в поиске: alt="Найти", а не alt="Лупа".
Проблема: игнорирование контекста
- Описание: Одно и то же изображение в разных контекстах может нести разный смысл.
- Решение: Учитывать окружающий текст. Изображение яблока в статье о здоровом питании и на сайте компании Apple будет иметь разный ALT: alt="Полезный фрукт яблоко" и alt="Логотип компании Apple".
Вывод
Прописывание alt-тегов - это небольшое усилие, которое приносит огромную отдачу. Это проявление заботы о всех пользователях без исключения, будь то человек, который не может видеть ваши изображения, или поисковый робот, стремящийся понять содержание вашего сайта.
Превратите эту практику в привычку. Потратив несколько секунд на каждое изображение, вы сделаете свой ресурс более инклюзивным, профессиональным и дружелюбным к SEO. Ваш контент станет по-настоящему доступным для всех.