Как правильно прописать атрибут alt для изображений

Блог RU-CENTER

Наличие атрибута 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, о правилах его заполнения и том, как избежать частых ошибок. Во время работы с этим атрибутом главное — помнить, зачем конкретная картинка была добавлена на сайт и по какому запросу пользователи смогут попасть на страницу с ней.

Подписывайтесь на наш блог на сайте nic.ru