Как заполнять атрибуты Alt и Title для изображений. Инструкция.

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

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

Не стоит его путать с названием файла.

Пример кода с заполненным атрибутом Alt:

<img src=»/images/vinograd.jpg» alt=»Виноград белый б/к 300 г в стакане»/>

В стандартной ситуации мы видим изображения на сайте следующим образом:

Если отключить показ картинок, то мы увидим замещающий текст, а именно значения атрибутов Alt, вместо изображений:

Для атрибута Alt существует ряд требований. Он должен:

• описывать изображение точно, не в общих словах
• содержать 3-5 слов
• включать в себя объект изображения
• не содержать спам

Ниже приведем примеры заполнения атрибута Alt, чтобы на практике показать, о чем идет речь.

Что такое атрибут Title изображений

Title у изображений – это еще один атрибут тега <img> в html. Он описывает изображение при наведении на него курсора.

Пример кода с заполненным атрибутом Title:

<img src=»/images/vinograd.jpg» alt=»Виноград белый б/к 300 г в стакане» title=»Виноград белый б/к 300 г в стакане по цене 168 руб 0 коп»/>

Ниже показано, как отображается атрибут Title при наведении курсора на изображение:

Требования, предъявляемые к атрибутам Title и Alt похожи. Атрибут Title должен:

• описывать изображение максимально содержательно
• состоять из 3-5 слов, описание не должно быть слишком длинным, иначе пользователю будет некомфортно воспринимать текст
• включать упоминание содержимого объекта
• не содержать спам
• отличаться от Alt, чтобы избежать дублирования (спама)

Яндекс в разделе «Какие тексты использует робот для поиска изображений»  советует вебмастерам указывать атрибут Title в ссылке, если картинка является таковой.

Пример показан ниже:

Какие ошибки необходимо избегать при заполнении атрибутов Alt и Title

Ниже приведены самые частые ошибки, которые совершают при заполнении атрибутов Alt и Title.

Несодержательные Alt и Title

При заполнении атрибутов не стоит использовать:

1. Общие названия, не относящиеся напрямую к тому, что изображено на картинке. Например, «фото 1», «картинка 2» не подходят. Это имеет такой же эффект, что и пустой атрибут.
2. Общие слова, которые, с одной стороны, подходят по тематике, а с другой все равно не содержат конкретики. Для нашей картинки с виноградом неудачным вариантом будет «виноград», «виноград белый».

А вот формулировка «виноград белый б/к 300 г в стакане» дает достаточное количество подробностей и при наличии других товаров в разделе «Виноград» и будет легче уникализировать атрибуты для каждой картинки.

Слишком длинные атрибуты Alt и Title

Для атрибута Alt достаточно 3-5 слов. Для атрибута Title допустимо немного больше. Этого количества слов хватит, чтобы передать смысл изображения. А вот, например, длинный атрибут Title, переходящий на вторую строку воспринимается трудно:

Спам в атрибутах Alt и Title

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

Одинаковые атрибуты для похожих картинок

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

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

Влияют ли атрибуты Alt и Title на ранжирование

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

Ниже приведена информация, взятая из поисковых систем Яндекс и Google.

Яндекс:

Google:

Проводились исследования на тему, влияют или нет атрибуты Alt и Title на ранжирование в поисковых системах.

Ниже приведены результаты, которые были получены в ходе экспериментов в 2020 году:

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

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

Как проверить Alt и Title на сайте

Проверить, что указано в атрибутах Alt и Title можно несколькими способами.

1. Посмотреть атрибут Title можно, наведя курсор на изображение. Он отображается во всплывающей подсказке. Чтобы посмотреть атрибут Alt, необходимо отключить отображение картинок в браузере. На их местах будут отображаться значения атрибутов Alt, если они заполнены.

Для того, чтобы отключить отображение картинок в браузере, например в Chrome, нужно:

• зайти в Настройки – Настройки сайтов – Картинки
• отключить пункт “Показать все”
• обновить страницу

1. Проверить атрибуты Alt и Title можно через код. Нужно:

• нажать сочетание клавиш Ctrl + Shift + C
• щелкнуть на на изображение
• проверить код на наличие атрибутов

1. Еще один способ для проверки атрибутов – букмарклеты для SEO-специалистов от Arsenkin. Необходимо перетащить нужный инструмент на панель, затем кликнуть на него для начала использования. Букмарклет «Теги документа» покажет все теги, используемые на странице. После нужно перейти на вкладку «Img alt/title», чтобы посмотреть все, что касается картинок.

Букмарклет «Теги изображений» за один клик заменит все картинки на указанный для них атрибут Alt.

Автоматические инструменты для проверки атрибутов

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

Screaming Frog SEO Spider – это программа,с помощью которой можно просто и быстро собрать весь список картинок и отдельно выгрузить те, чей атрибут Alt отсутствует или превышает заданное количество символов. Для этого обходим сайт, заходим на вкладку Images. Здесь будут представлены все изображения, чтобы их выгрузить нажимаем пункт в меню Bulk Export – All images. Чтобы посмотреть картинки, например, с незаполненным атрибутом Alt, выбераем пункт «Missing Alt Text».

Картинки также можно выгрузить отдельным отчетом. Для этого выбираем в меню Bulk Export – Images – Images Missing Alt Text Inlinks (или другой пункт в зависимости от того, какой отчет хотим получить).

NetPeak Spider – краулер, который поможет собрать все изображения без атрибута Alt.

В разделе «Параметры» ставим галочку около пункта «Изображения».

Затем запускаем сканирование сайта. Если будут найдены изображения с незаполненным атрибутом Alt, в результатах обхода увидим уведомление о соответствующей ошибке и список картинок.

Программа платная.

Как заполнить атрибуты Alt и Title

Заполнить атрибуты Alt и Title можно через свою CMS. Обычно они указываются в окне загрузке или редактирования изображений.

Например, в CMS Bitrix окно выглядит следующим образом:

В CMS Joomla так:

CMS Joomla подтягивает атрибут Alt из названия файла, так что нужно быть аккуратными.

Как автоматизировать заполнение Alt для интернет-магазинов

Стоит автоматизировать все, что можно, чтобы не тратить время на рутинную работу.

Для большого интернет-магазина, где размещено огромное количество изображений, удобнее всего заполнить атрибут Alt с помощью шаблона.

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

Например, если речь идет о карточках товара, шаблон для атрибута Alt может быть следующим: <H1 товара> <цвет товара> или <H1 товара> <артикул>.

Заключение

Оптимизация изображений – это важный, но не первостепенный пункт, на который необходимо обращать внимание при работе с сайтом, исключение составляют сайты галереи, фото и видеохостинги. В любом случае, это может стать дополнительным источником трафика для уже проработанных, зрелых сайтов. Именно поэтому мы призываем уделять должное внимание этой части Array">SEO-продвижения на вашем ресурсе.

Если вам необходима помощь в проведение аудита и исправлению ошибок, наши специалисты готовы оказать квалифицированную помощь, пишите нам.