Атрибут Alt (Альт) – это элемент тега img языка html, позволяющий установить альтернативный текст для изображения. Свое название этот атрибут получил как сокращение от английского «alternative».
В языке html синтаксис атрибута alt выглядит следующим образом:
<img src="images/yellow-sports-car.jpg" alt="спортивный автомобиль желтого цвета"></a>
В панели администрирования различных платформ предусмотрены отдельные поля для ввода альтернативного текста. Например, в WordPress окно заполнения атрибутов картинки выглядит так:
- Текстовая информация введенная в alt будет отображаться на странице вместо рисунка. В случае возникновения любых проблем с загрузкой изображений (удаленные изображения, отключение или низкая скорость загрузки) отобразится альтернативный текст. Значение атрибута позволяет понять посетителю, что должно находится на картинке.
- Данные из атрибутов используются в сервисах озвучивания текста.
- Поисковые системы, такие как Yandex или Google, индексируют на страницах сайта не только текст, но и графическую информацию. Для того чтобы показать в поисковой выдаче более релевантные картинки, поисковые системы могут ориентироваться на информацию введенную в Alt.
- Улучшение оптимизации страницы.
Вместе с атрибутом Alt можно прописать атрибут Title. Title является универсальным атрибутом и описывает содержимое картинки при наведении указателя мышки на изображение.
В языке html синтаксис выглядит так:
<img src="images/yellow-sports-car.jpg" alt="спортивный автомобиль желтого цвета" title=”Заголовок картинки с желтой машиной”></a>
При заполнении атрибута alt для картинок следует придерживаться нескольких простых правил:
- Не стоит использовать длинные тексты. Фраз до 5-6 слов более чем достаточно.
- Альтернативный текст должен точно описывать то, что изображено на картинке. Нет смысла добавлять описание животного к фотографии велосипеда.
- В описании изображений (если изображения соответствуют смыслу страницы) стоит использовать основные ключевые слова страницы.
- Не допускайте переспам ключевых слов в атрибутах.
- Для картинок, которые формируют дизайн сайта или не несут смысловую нагрузку можно не заполнять Alt.
- Title должен отражать то, что изображено на рисунке.
- Желательно использовать небольшой по длине заголовок.
- Наличие основных ключевых слов в title.
- Не желательно использовать общие слова, такие как «изображение», «фото» и т.д
- Большинство интернет магазинов стараются представить свои товары максимально детально. В каждой карточке товара могут быть 3-5 картинок. Главное правило – не выдумывать какие-то сложные названия. Просто к описанию добавьте номер изображения, например: «Стиральная машина ZANUSSI ZWSO – изображение 1», «Стиральная машина ZANUSSI ZWSO — изображение 2». Допускается использование одинакового значения атрибута для всех изображений товара.
- Разные цвета товара. В этом случае в шаблонный текст атрибута вставляем значение цвета. Например: «желтый диван», «синий диван» или «вечернее платье синего цвета», «вечернее платье темно зеленого цвета».
- Большое количество товаров. Если в интернет магазине десятки тысяч товаров, то заполнить для всех изображений Alt вручную не представляется возможным. Тогда можно сгенерировать описания следующим образом: «Заголовок Н1» + «Артикул товара» + «Номер изображения». По такой формуле программисты смогут быстро сгенерировать описания для всех изображений.
Все перечисленные моменты однозначно дадут положительный результат при продвижении сайта в поисковых системах. Главное правильно заполнить всю необходимую информацию.
