Атрибуты Alt и Title для картинок: искусство составления

Сейчас трудно представить сайты без изображений, тем более интернет-магазины и каталоги товаров. Ведь это отличный способ привлечь внимание посетителей, показать товар «лицом» и сподвигнуть потенциальных клиентов к совершению целевых действий: покупке товара или заказу услуги. Подробнее о том, для чего еще нужны картинки и на каких страницах они должны быть, можете прочитать в нашей статье «Подбор и оптимизация изображений для сайта».

Использование картинок сделает сайт привлекательнее и поможет удержать посетителей на нем, но что более важно, из поиска по картинкам в Яндексе или Google к вам на сайт может прийти дополнительный трафик (при корректном использовании атрибутов Alt и Title тега <img>).

Что такое атрибут Alt для картинок

Атрибут Alt для картинок – это текст, описывающий изображение в html-теге <img>. Он становится видимым в случае невозможности загрузки изображения. На месте незагруженной картинки будет показан текст (при заполненном атрибуте Alt).

Давайте сравним. Так будет выглядеть незагруженное изображение без заполненного атрибута Alt:

А вот так будет выглядеть картинка с текстом «Стиральная машина Славда WS30T/ET» в атрибуте Alt тега <img>:

Атрибут Alt дает возможность узнать, что изображено на картинке, когда пользователь не может ее увидеть. Кроме того, прописанный текст в атрибуте Alt учитывается поисковыми роботами при индексации сайта. Наконец, оптимизация названий картинок и атрибутов Alt в теге <img> упрощает поиск изображений, например, в Яндекс или Google Картинках.

Как правильно составить атрибут Alt для картинок

1. Оптимальное количество слов – 3-5, но длина текста тега не более 75-80 символов. Мы рекомендуем использовать краткую и сжатую, но содержательную информацию.
2. Обязательное условие – использование ключевых запросов.
3. Ключевые слова лучше употреблять в именительном падеже, чтобы облегчить поиск.
4. Избегайте спама: мы не рекомендуем перечислять большое количество ключей через запятую, как и в других тегах.
5. Необходимо, чтобы Alt относился к тексту страницы и описывал то, что изображено на картинке.

Атрибут Title для изображений

Кроме атрибута Alt следует также прописывать текст в атрибуте Title. Данный параметр задает вспомогательную информацию о картинке, когда пользователь наводит курсор на изображение:

В html-коде заполненный атрибут Title для картинок выглядит так:

Правильно составленный атрибут Title даже помогает улучшить поведенческие факторы.

Как правильно составлять Title для картинок

1. Атрибут Title должен соответствовать изображению. Не следует писать в нем то, что не имеет к картинке никакого отношения.
2. Лучше использовать небольшой по длине Title для удобства пользователей – никто не захочет читать километровую подсказку к картинке.
3. Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое.

Пример правильного заполнения атрибутов Alt и Title для тега <img>

Рассмотрим на примере, как можно прописать текст в атрибутах Alt и Title для картинки. Для этого возьмем изображение с сайта строительной компании.

При составлении Alt необходимо сделать акцент на то, что вы продаете/предлагаете. Для картинки из нашего примера будет предпочтительнее составить альт «Строительство дома из бревна», а не просто «дом» или «строительство».

Атрибут Title для данного изображения можно немного видоизменить и составить так: «Строительство бревенчатого дома».

Трудности при заполнении Alt и Title

1. Несколько фотографий одного и того же товара

   Как же быть интернет-магазинам, в которых для разнообразия и удобства пользователей представлено несколько изображений одного и того же товара? В этом случае, нормальное явление – составить одинаковый текст для Alt и Title ко всем картинкам.

2. Один и тот же товар, но разного цвета

   В данном случае можно порекомендовать добавлять название цвета в текст Alt и Title. Например, для платья зеленого цвета можно составить такой Alt: «женское зеленое платье», а для платья красного цвета – «женское красное платье».

   

3. Большое количество товаров

   Крупные интернет-магазины могут столкнуться со следующей проблемой: на сайте слишком много товаров и изображений для них. Чтобы составить атрибуты Alt и Title для тысячи товаров вручную, потребуется очень много времени. Поэтому, в данном случае, можно автоматизировать вывод этих атрибутов из названия продукции и/или заголовка Н1, а также добавить цвет или артикул товара.

   

Правильно заполненные атрибуты Alt и Title к картинкам помогут в поисковой оптимизации сайта. Но не стоит забывать и про другие аспекты оптимизации картинок, такие как «вес», качество и название изображений. Если у вас нет времени на составление атрибутов Alt и Title, мы можем помочь вам и выполнить эту работу за вас.