Как прописать alt-теги изображений
Разделы
- Все
- Блог 6
- Начало работы 10
- Интернет магазин 21
- Домены 16
- Заявки и заказы 5
- Продвижение сайтов 23
- Интеграции 28
- Повышение конверсии 5
- Тарифы и оплата 4
- Редактор конструктора 61
- Технические вопросы и частые ошибки 86
- Другие вопросы 3507
- Создание сайтов 237
- Копирайтинг 51
- Интернет маркетинг 3499
- Текстовые редакторы 281
- Бизнес обучение 437
- Фоторедакторы 505
- Заработок в интернете 125
В современном веб-дизайне изображения играют ключевую роль: они привлекают внимание, иллюстрируют сложные идеи и улучшают пользовательский опыт. Однако без правильной разметки картинки могут стать «невидимым барьером» для двух важнейших аудиторий: поисковых систем и людей с ограниченными возможностями зрения.
Вы можете создать сайт визитку за 30 минут на платформе Tobiz.
Именно здесь на помощь приходит атрибут 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. Ваш контент станет по-настоящему доступным для всех.
Наш конструктор интернет магазина включает в себя все для онлайн-торговли.