Картинки на сайте: как правильно работать с атрибутами Alt и Title

Современные сайты в обязательном порядке содержат десятки, а то и сотни картинок, особенно их количество велико, если речь идёт об интернет-магазинах, онлайн-каталогах и других коммерческих площадках, где продаются товары. Яркие изображения привлекают внимание гостей веб-ресурса, позволяют продемонстрировать сильные стороны изделия, побудить посетителя оформить заказ на ту или иную продукцию.

Таким образом, использование картинок − прямая дорога к повышению интереса к вашим предложениям. Кроме того, вы можете получить дополнительный трафик на сайт, источником которого станет поиск по изображениям в Яндексе или Google. Главное − правильно использовать атрибуты Alt и Title, а также тег .

Особенности атрибута Alt

Атрибут Alt для изображений представляет собой текст-описание картинки в теге (HTML). Он демонстрируется в том случае, если загрузить изображение не получается. Тогда посетитель увидит текстовку − конечно, если атрибут Alt был заполнен.

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

А вот так − при заполненном Alt.

Даже при отсутствии картинки пользователь может понять, что именно на ней должно быть изображено. Кроме того, подготовленный текст сыграет вам на руку в процессе индексации страницы поисковыми роботами, поскольку будет учитываться ботами. Также правильно оптимизированное название изображения упрощает нахождение картинок в поисковых системах.

Особенности составления атрибута Alt

Существует несколько основных правил, которых нужно придерживаться в процессе составления текста для описания изображения. Они следующие:

1. общее количество слов составляет от трёх до пяти, длина текста − около 70-80 знаков, приветствуется сжатая подача информации по сути;
2. в тексте должны быть ключевые запросы;
3. употребление ключей по возможности в первоначальной форме (для существительных − именительный падеж, для глаголов − инфинитив);
4. недопущение спама, употребление большого количества ключей через запятую нежелательно;
5. соответствие текста изображению.

Особенности атрибута Title в картинках

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

После заполнения атрибута html-код будет выглядеть таким образом:

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

Особенности составления Title для изображений

В этом случае основные правила таковы:

1. соответствие текста атрибута имеющемуся изображению, ничего лишнего быть не должно;
2. лучшая подсказка к картинке − короткая и по сути;
3. употребление ключа.

Примеры правильного составления атрибутов Alt и Title для картинок

Теория − это хорошо, но всё же лучше всего можно продемонстрировать специфику составления атрибутов для изображений на практике. В качестве примера используем рисунок с интернет-ресурса компании, которая занимается строительством деревянных домов.

В процессе составления Alt необходимо акцентировать внимание на вашем предложении, то есть использовать не слова «дом» и «строительство», а словосочетание «строительство дома из бревна».

При подготовке второго атрибута − Title − формулировку можно немного трансформировать и представить её в таком виде: «строительство бревенчатого дома».

Основные проблемы при составлении атрибутов Alt и Title

Чаще всего трудности возникают в таких ситуациях:

• Наличие нескольких фото одной и той же товарной позиции. Во многих интернет-магазинах для удобства покупателей используются несколько изображений одного и того же товара, но с разных ракурсов. Как поступить в этом случае? Правильное решение − составление одинакового текста для указанных атрибутов.
• Представление одной и той же продукции разного цвета. В такой ситуации при описании Alt и Title мы рекомендуем добавлять в текст название того или иного цвета («женское зелёное платье», «женское красное платье»).

• Широкий ассортимент товаров. Количество позиций в больших онлайн-магазинах может исчисляться тысячами. Составить для каждой позиции Alt и Title весьма проблематично: на это уходит очень много времени. В таком случае стоит воспользоваться инструментами автоматизированной подготовки атрибутов, а потом просто добавить информацию о цвете или артикуле.

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