Наличие атрибута alt — один из факторов ранжирования сайта. Он наряду с другими инструментами делает сайт удобнее для пользователей и влияет на попадание картинок с сайта в Яндекс.Картинки и Google Images. Для его заполнения есть несколько правил, о них и расскажем.
Что такое alt
Чтобы добавить изображение на страницу, в HTML-коде используют тег <img>. У этого тега есть дополнительный параметр, «атрибут», — alt. Он помогает добавить к картинке текстовое описание.
Если у посетителя сайта слабый интернет или отключено отображение картинок в браузере, он на месте изображения увидит текст:
Изображение не открылось, и мы видим на его месте текстовое описание
Зачем еще нужно прописывать alt для изображений
- Alt делает сайт удобнее для пользователей. Благодаря ему даже без картинок посетитель сможет примерно понять, что изображено.
- Наличие alt — один из факторов ранжирования страницы. Поисковые роботы Яндекса и Гугла учитывают его во время анализа страницы.
- Картинки с прописанным alt могут попасть в Яндекс.Картинки и Google Images, их увидят потенциальные клиенты и попадут на сайт:
Изображения в Яндекс.Картинках по коммерческому запросу
Когда <alt> не нужен
- На декоративной картинке для оформления страницы:
Эта картинка используется только для оформления, так что ее можно не размечать, nic.ru
- На иконках:
Иконки несут декоративный характер, nic.ru
- На аватаре:
Пользователь может поставить любую картинку на аватар, добавлять к нему атрибут не нужно, habr.com
Правила заполнения alt
Атрибут заполняется внутри тега <img> в HTML-коде страницы:
<img src="https://storage.nic.ru/ru/images/png/1.competitor-analysis-1.png" alt="Поиск конкурентов через Вордстат" />
img — тег для вставки изображения;
src — ссылка на него;
alt — текстовое описание.
Есть несколько правил, по которым нужно прописывать атрибут alt.
1. <alt> должен описывать содержание картинки.
Нет
alt="Животное"
Да
alt="Черно-белый чихуа-хуа в вязаной шапке"
2. Не больше пяти слов и до 125 символов.
Нет
alt="Щенок чихуа-хуа с карими глазами и бежевой шерсткой задумчиво смотрит вдаль"
Да
alt="Бежевый щенок чихуа-хуа"
3. По возможности должен упоминаться ключевой запрос (без спама).
Нет
alt="Купить щенка чихуа-хуа в Москве"
Да
alt="Чихуа-хуа 3 месяца"
4. Не дублируйте в alt другие заголовки на странице.
Нет
title="Бежевые щенки чихуа-хуа в наличии"
alt="Бежевые щенки чихуа-хуа в наличии"
Да
title="Бежевые щенки чихуа-хуа в наличии"
alt="Бежевый щенок с карими глазами"
5. Учитывайте, на какой странице размещена картинка — информационной или коммерческой.
Информационный запрос
alt="Щенок чихуа-хуа в корзинке"
Коммерческий
alt="Желтая корзинка Dogsy для собаки"
Частые ошибки
1. Отсутствие атрибута. Внешне на картинку это не повлияет, но она не попадет в поиск.
<img src="https://Ссылка на картинку.ru" alt="" />
2. Отсутствие описания изображения. Не стоит писать просто «Картинка» или «Изображение», это и так очевидно и не принесет пользы:
<img src="https://Ссылка на картинку.ru" alt="Картинка-1" />
3. Переспам. Это может быть воспринято как спам и негативно повлиять на позиции сайта.
<img src="https://Ссылка на картинку.ru" alt="Купить в Москве бесплатно и без смс" />
Как проверить наличие alt
1. Через браузер. Запретите в его настройках отображение картинок:
Зайдите на сайт и посмотрите, какой текст появится на месте картинок.
2. Через панель разработчика. Выделите изображение → Исследовать элемент. В коде должно появиться img и alt:
Главное об alt
В этой статье мы поговорили о том, зачем прописывать у изображений атрибут alt, о правилах его заполнения и том, как избежать частых ошибок. Во время работы с этим атрибутом главное — помнить, зачем конкретная картинка была добавлена на сайт и по какому запросу пользователи смогут попасть на страницу с ней.