Как прописать теги alt и title у картинок

Что такое атрибуты alt и title для картинок

Тег img используется для отображения картинок. У этого тега есть свои атрибуты – alt и title. Многие вебмастера игнорируют или используют неправильно атрибуты, хотя они влияют на ранжирование сайта в поисковой выдаче. С помощью них вы сможете привлечь дополнительный органический трафик на страницу.

Alt – это описание изображения. Если картинка по каким-то причинам не загрузилась, то браузер отобразит содержимое alt. Кроме того, текст в этом атрибуте влияет на ранжирование сайта. При заполнении учитывайте, что Google отображает только 17 первых слов тега, Яндекс – 28 слов.

Title – дополнительная информация об изображении, которая показывается, когда пользователь наводит курсор мыши на картинку. Часто вебмастера не прописывают title, считая его не нужным. Однако разработчики поисковых систем уже давно обозначили свою главную концепцию: весь текст на странице, который виден посетителю, влияет на продвижение, поэтому лучше потратить несколько часов на заполнение атрибута. Также, если ваше изображение является ссылкой, то лучше прописать tite у тега ссылки.

Пример, как выглядит заполненный alt и title в теге img для картинки товара в интернет-магазине:

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

Почему alt и title атрибуты так важны

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

Если у вас 10 изображений в статье, то каждое из них может привести дополнительный целевой трафик, если вывести картинку хотя бы в топ-20. Также alt влияет на удержание пользователей с медленным соединением, делая контент для них более доступным. Такие люди отключают отображение изображений в браузере. Если для понимания вашей статьи важны картинки, то лучше прописать небольшое описание в alt. Так человеку будет проще разобраться, что было изображено.

Атрибут title менее полезный, хотя тоже учитывается при ранжировании сайта. Здесь указывают дополнительную информацию, которая не помещается в alt. Например, некоторые вебмастера пишут название картинки.

Как правильно прописать alt и title изображению

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

Другие правила:

Не пишите слишком длинные описания. Разные браузеры отображают разную длину атрибутов. Большинство вебмастеров пишут 200-250 символов в alt и title.
Текст в атрибуте должен соответствовать картинке, но при этом включать ключевой запрос. Также не пишите шаблонные фразы: «фото 1», «фото 2» и другие.
Конкретизируйте описания. Вебмастер упускает множество целевого трафика, когда пишет в alt что-то вроде «пластиковое окно». Если страница посвящена изготовлению окон, то лучше написать в атрибуте «пластиковое окно с доставкой по Москве».
Если смысл изображения и заголовка статьи совпадает, то стоит использовать слова из h1 в alt и title.
Если на странице присутствуют картинки, которые нужны только для декора, то не прописывайте у них атрибуты. Лучше поместить такие элементы в спрайты CSS.
Для изображений одного и того же предмета используйте одинаковые атрибуты. Например, в интернет-магазине у товара несколько фотографий. Не нужно для каждой картинки придумывать свой alt и title. В крайнем случае, можно добавить цифры или подписи вроде «вид с боку».

Азаренко Михаил

Вебмастер со стажем 10+ лет

Задать вопрос

Однако отказываться от поисковых запросов в атрибутах тоже не стоит. Ключи помогут привести органическую, и главное – целевую аудиторию. Однако не пишите высокочастотные ключи, вроде «пластиковое окно», используйте только те фразы, которые подходят под вашу статью.

Как проверить наличие alt и title

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

Можно сделать через код. Нажмите Ctrl+Shift+C и перейдите в раздел с кодом. Нажимайте на каждое изображение в статье и проверяйте атрибуты. Однако если у вас тысячи изображений, то придётся искать другой способ.

Многие вебмастера используют букмарклеты – специальные инструменты, написанные на java-script. Например, букмарклет «Теги документа» с этого сайта выводит все alt и title атрибуты в список. Чтобы воспользоваться инструментом, выполните следующие действия:

Найдите инструмент «Теги документа».
Перетащите кнопку на панель закладок.
Перейдите на свой сайт.
Нажмите на «Теги документа», на панели закладок.
В открывшейся панели перейдите на вкладку «img alt/title».

Как быстро заполнить атрибуты в теге img

Возвращаемся к проблеме больших сайтов. Заполнить качественно атрибуты alt и title в теге автоматически невозможно. Нейронные сети ещё недостаточно научились анализировать изображения, чтобы выдать нормальный результат, поэтому часть работы придётся делать вручную.

Однако процесс можно ускорить. Откройте редактор html-кода страницы и воспользуйтесь инструментом «найти». Обычно он вызывается сочетанием клавиш Ctrl+F. В строке поиска введите «img». Инструмент сам будет находить все теги для картинки, а вам понадобится лишь прописывать для них атрибуты. Когда закончите, загрузите новый код на сервер.

Автоматическое заполнение через плагины

Программы и скрипты не лучшее решение для заполнения атрибутов. Большинство плагинов создают шаблон, который автоматически вставляет текст в alt и title картинки. Это пригодится для интернет-магазинов, где можно составить шаблонное описание, но для блогов такой способ не подойдёт. Также многие плагины не работают с самым популярным расширением для WordPress – WooCommerce.

Например, PB SEO Friendly Images – платный плагин для WordPress. Он добавляет атрибуты для всех новых картинок на сайте, не трогая старые. Чтобы настроить его, перейдите на вкладку «SEO Friendly Images» на левой стороне в адимин-панели. В строках alt и title пропишите нужную вам информацию. Например, многие веб-мастера прописывают «%title», чтобы в атрибуты добавлялось название статьи, или «%name» — название картинки.

Другой полезный и бесплатный плагин – Clearfy, который выполняет те же функции, что и SEO Friendly. Помимо этого, он существенно оптимизирует сайт, повышает скорость загрузки страниц и исправляет ошибки.

Распространённые ошибки

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

Использовать скрипты из интернета

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

Пытаться всё автоматизировать

Не рассчитывайте на автоматизацию слишком сильно. Большинство сео-оптимизаторов заполняют атрибут alt названием файла картинки. Однако это не принесёт никакого результата для сео-продвижения страницы. Лучше потратить несколько часов или нанять отдельного человека для заполнения alt.