Этой статьей я открываю серию публикаций про внутреннюю оптимизацию сайта. И начну с одних из наиболее часто игнорируемых атрибутов тега <img> — Alt и Title.

Немного истории

Для лучшего понимания назначения этих двух атрибутов предлагаю сперва вернуться во времена dial-up’а на 56 Кб/сек и оплаты за каждый мегабайт трафика. Тогда скорость интернета была по современным меркам практически нулевой и одна картинка на странице могла загружаться минуту. А если добавить сюда оплату за трафик, то загрузка становилась настоящей роскошью.

Именно для быстрой загрузки страниц в браузерах добавили отключение картинок. Пользователь отключал загрузку медиа-файлов и вместо них на странице показывались пустые прямоугольники. Так сайты работали быстро, а трафик с одной текстовой информации шел минимальный. Для понимания эффекта вот пример стартовой страницы Google и их знаменитого логотип с отключенными медиа:

Главная Google с отключенными картинками
Пример: отключенные изображения на главной странице Google.

Однако в картинках скрыта полезная информация, которую посетители не видели из-за такого режима просмотра сайтов. И вот тут на помощь пришли атрибуты тега <img>: alt и title. Они в текстовом виде передавали содержимое рисунка в том случае, если загрузка невозможна по каким-то причинам.

Что такое атрибут alt и title

Изображения на странице размещаются при помощи тега <img src=””>. Как и у многих других тегов, у него есть дополнительные параметры. Их называют «атрибуты» и используют для передачи дополнительной информации о теге. Пример кода с атрибутами alt и title:

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

Title картинки

Как следует из самого названия — это заголовок тега <img>.

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

Как выглядит Title изображения
Так выглядит Title изображения

С точки зрения SEO-продвижения заголовок не оказывает прямого влияния. Но стоит отметить его косвенный вклад в удобство сайта, а значит и повышение поведенческих факторов. Ведь бывает, что посетитель не понимает что именно изображено на картинке или ему необходима дополнительная информация. В этих случаях как раз пригодятся такие вот всплывающие подсказки. Если они у вас заполнены, то, в случае необходимости посетитель всегда сможет посмотреть вспомогательную информацию. Sellers that are interested in learning more about the house business might benefit greatly by speaking with buyers in the housing market since buyers are subject matter experts. These specialists are able to provide guidance on a variety of facets of the selling process, including price, repairs, and others. Visit https://www.sellmyhousefast.com/we-buy-houses-north-carolina/.

Поэтому я рекомендую заполнять Title и тем самым повышать удобство вашего сайта.

Alt для картинок

Как и в случае с предыдущим атрибутом, в названии alt уже скрыта подсказка к расшифровке — alternative text или альтернативный текст. Данный атрибут является обязательным с точки зрения валидации и продвижения.

Это тот текст, который появляется в области фото при отключенных картинках. Да, сейчас редко кто отключает медиа-файлы для экономии трафика и увеличения скорости загрузки. Но такие посетители все ещё встречаются. Буквально на днях один клиент сообщил, что у него отключены изображения. Как это выглядит в браузере на примере предыдущего скриншота с орлом:

Атрибут alt показывается вместо картинки
Атрибут alt показывается вместо картинки

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

Ещё одна польза от альтернативного текста — это его отображение при отсутствующем файле или “битой” ссылке. Возможно, вы разместили на странице ссылку на картинку с другого сайта, а он перестал работать. Или же у вас на хостинге произошел сбой и файл был удален. В этом случае посетитель не сможет увидеть фото, но зато прочтет основной смысл. То, что вы хотели показать. Это в любом случае лучше, чем пустой прямоугольник.

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

Поиск по картинкам Яндекс
Поиск по картинкам Яндекс

Атрибут alt не обязательно должен описывать непосредственно то, что изображено на картинке. Учитывайте контекст, в котором посетитель увидит этот текст. Например, на фотографии предупреждающего знака не стоит писать “треугольник с восклицательным знаком”. Вместо этого лучше написать “опасность” или “внимание”. Это добавит больше смысла, если только ваша страница не посвящена детальному описанию знаков.

Почему их нужно прописывать

Подводя итоги всего вышесказанного, вот две основные причины:

  1. Повышение удобства использования вашего сайта;
  2. SEO-продвижение и оптимизация страниц, а также трафик из поиска по фотографиям;

Польза от заполнения Alt:

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

Польза от заполнения Title:

  • Всплывающие подсказки атрибута Title помогают лучше передать назначение фотографии и при необходимости дать пользователю подсказку;
  • Косвенно повышаются поведенческие факторы;

Определить прописан ли у вас на сайте alt и title для тета <img> вы можете, посмотрев исходный код тега <img>. Как это сделать:

  1. Зайдите на страницу с изображением, которое надо проверить.
  2. Наведите курсором на нужную фотографию.
  3. Нажмите правой кнопкой и в появившемся меню выберите “Просмотреть код”.
  4. В появившемся коде внутри тега <img> найдите нужный атрибут и посмотрите что написано после знака “равно”.
Исходный код
Как посмотреть alt в коде сайта

В примере выше значение альта равно “Extract text”. Этот текст увидит посетитель при отключенных медиа. А вот атрибут тайтл в примере не заполнен, т.к. это он не обязателен.

Как правильно заполнять

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

Распознавание изображений Google

Алгоритм определил с вероятностью 98%, что это — мопс. 97% что это — собака. И ещё с десяток менее точных, но все же подходящих определений. Неплохо, Google, совсем неплохо.

И возникает логичный вопрос:

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

Да и посетители все с включенными картинками в браузерах. И ответ — «Да, нужно». Сейчас объясню почему.

Хоть Google и шагнул далеко вперед в распознавании, все же некоторые вещи ему даются с трудом. Например, вот эту картинку с маслом он определил как сыр. Что для нас вполне очевидно, бывает сложно для роботов:

Ошибка в распознавании
Неточности в распознавании

Именно поэтому надо помогать поисковикам определять что именно изображено на фото через заполнение альтернативного текста. Алгоритмы в свою очередь наградят вас за такое внимание к деталям более высокими позициями и релевантным трафиком. В этом видео гуру Google Matt Cutts на наглядном примере показывает почему нужно заполнять атрибут alt и как это делать правильно:

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

Советы по заполнению атрибута alt

Какими же должны быть альты, чтобы поисковики полюбили наш сайт? Воспользуйтесь табличкой:

Релевантность окружение Создавайте релевантные окружающему тексту альтернативные описания для картинок. Не используйте в описании ключевые фразы, которые не имеют отношения к размещенному рядом тексту.
Оптимальная длинна 3-7 слов и не более 250 символов.
Используйте ключевик И желательно разместить фото с ним как можно выше к началу документа.
Избегайте спама В остальных картинках на странице употребляйте синонимы основного ключа или вовсе откажитесь от его использования. Времена, когда в альты помещали по 30 фраз, давно прошли. Сейчас за такое можно попасть под санкции.
Соблюдайте формат Не пишите альт в виде «фото …» или «изображение …». Посетители и так понимают, что это фотография. Нет необходимости лишний раз указывать, если нет явного основания для этого.
Больше смысла Не используйте слишком общие и краткие описания. Укажите на детали изображения, какие-то особенности. Например, «Фото города» несет в себе мало информации. Зато «Центр Москвы в солнечный летний день» намного более информативно.

Как придумать описание для картинки

Поделюсь с вами небольшой хитростью как легко составлять корректные atl. Посмотрите на фото и продолжите предложение «На этой фотографии изображен …» и вместо многоточия поставьте нужное описание. Именно этот текст и стоит поместить в атрибут alt. Вот несколько примеров:

«На этой фотографии изображен лабрадор, гуляющий на улице»

«На этой фотографии изображен Шоссейный велосипед Merida Reacto Team-E 2018 года»

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

Примеры из практики

В ходе работы я встречал разные примеры: от полностью незаполненных описаний (самая распространенная ошибка) до идеальных альтов. Поделюсь с вами своими наблюдениями и дам небольшую обратную связь по каждому варианту.

Худший вариант — когда описание отсутствует вообще:

Не намного лучше переоптимизированный alt:

Хороший вариант — указать хотя бы объект с фотографии:

Идеальным вариантом является полноценное описание изображение по технике, описанной выше:

Советы по заполнению атрибута Title для картинки

С заголовком все намного проще. Поисковые системы заявляют, что он не оказывает влияния на ранжирование. Т.е. заполнять его или нет решать только вам. С другой стороны это удобно для пользователей и многие веб-мастера наполняют тайтл таким же содержимым, что и альт. Да и сам Google в одной и той же статье использует как один alt, так и комбинацию alt+title:

Одинаковые атрибуты на странице Google

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

Как добавить Alt и Title

Добавление атрибутов изображениям индивидуально для каждой системы управления сайтом (CMS). Я покажу как это происходит в WordPress. Для остальных систем принцип будет схожим.

Первым делом в библиотеке медиафалов находим нужную нам картинку. У нас это будет фото мопса, сидящего на скамейке. Кликаем по фотографии и справа появятся нужные поля:

Атрибуты в медиатеке Wordpress

В них вписываем нужный текст и нажимаем “Вставить в запись”. Все, фотография с атрибутами опубликована в записи. Для точности проверяем через код:

Заполненные атрибуты
Атрибуты заполнены на сайте

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

Заключение

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

Атрибут alt:

  • обязателен к заполнению
  • влияет на ранжирование страницы
  • релевантный окружающему контенту
  • содержит 3-7 слов и не более 250 символов
  • включает в себя основное ключевое слово страницы
  • не должен быть спамным, т.е. перегруженным ключами

Атрибут title:

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

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

Присылайте ваши варианты атрибутов и\или вопросы в комментариях. Обсудим вместе!

Павел Трушко

CEO, Руководитель отдела разработки и продвижения

Получайте полезные
материалы на ваш e-mail
Это интересно
Кнопки призыва к действию: эффективные фразы и примеры для лендингов и сайтов

В статье мы разбираем один из элементов сайта, который значительно влияет на конверсию — кнопки призыва к действию. Изучите наши 11 советов и проверьте ваши кнопки с помощью чек-листа в конце статьи.

Читать статью »