Атрибуты Alt и Title для картинок и их роль в SEO
Несмотря на разнообразие визуального контента и возможности нейросетей по созданию картинок, изображения всё еще остаются одним из действенных инструментов привлечения внимания аудитории. Иллюстрации в блоге или на продающей странице способны пробить баннерную слепоту и удержать на сайте. Тем важнее понимать, что борьба за качество и количество пикселей на пользовательском экране — это история не только про креатив и дизайн. Чтобы ваша картинка отображалась по нужным запросам и вообще появлялась в поисковике как можно чаще, нужно знать, как алгоритмы анализируют изобразительный контент. Об этом сегодня и поговорим.
Что такое атрибут Alt тега img
Alt — это сокращение от “альтернативный текст”. Этот атрибут используется в HTML для описания содержания изображений. Когда вы вставляете визуал на страницу через тег <img>, то alt помогает объяснить, что изображено на картинке. Например, если у вас на сайте есть изображение iPhone 13, то alt-текст может быть “iPhone 13 в черном цвете”.
Атрибут Alt важен не только для поисковиков, которые повышают индексацию правильно оптимизированных изображений. Он актуален и для случаев, когда у пользователя нет возможности увидеть иллюстрацию. Например, незрячий человек использует экранный ридер (скринридер), считывающий текст с экрана. Или медленный интернет и ошибки на сервере не позволяют картинке отобразиться.
Что такое атрибут Title тега img
Атрибут Title предоставляет дополнительную информацию о визуальном элементе, т.е. по сути является описанием изображений. Текст, который вы помещаете в него, обычно виден в виде всплывающей подсказки, когда пользователь наводит курсор на картинку. Этот атрибут можно добавить практически к любому HTML-элементу, но чаще всего его используют с ссылками (<a>), изображениями (<img>), кнопками (<button>), и фреймами (<iframe>).
Title может значительно улучшить пользовательский опыт и таким способом косвенно помочь поисковой оптимизации. Например, если на сайте есть изображение графика роста вашего бизнеса, то title типа “график роста продаж за 2022 год” дает людям важный контекст для лучшего понимания картинки и ее смысла.
Зачем прописывать теги Alt и Title
- Правильная индексация. Поисковые роботы не могут «читать» изображения, как это делают люди. Для понимания визуального контента им нужен текст. Теги описывают поисковикам, что находится на картинке. Это увеличивает шансы на появление изображений с вашего сайта в выдаче, включая поисковые разделы «Картинки» и «Видео». Таким образом, прописанные теги способствуют увеличению видимости сайта.
- Оптимизация под ключевые запросы. Использование тегов позволяет встраивать в альтернативный текст и описание картинки ключи, релевантные странице и тематике контента. Это положительно влияет на ранжирование сайта по соответствующим запросам.
- Снижение отказов. Четкое и информативное описание изображений помогает пользователям быстрее ориентироваться на сайте и взаимодействовать с контентом по назначению. Это снижает вероятность того, что посетители уйдут, не найдя нужной информации. Кроме того, грамотно описанная картинка улучшает тепловую карту внимания на сайте, так как пользователи действительно изучают изображение с пониманием его контекста и смысла.
- Рост CTR в выдаче. Тег, который отображается при наведении курсора на изображение, служит подсказкой для пользователей. Если заголовок у картинки привлечет внимание, это может увеличить вероятность клика.
- Оптимизация загрузки страниц. Если изображение не может быть загружено (например, из-за медленного интернета или технических сбоев), текст тегов заменяет его и описывает содержимое. Это помогает пользователям понимать контекст и не раздражаться слишком сильно от того, что нельзя посмотреть картинку, когда читаешь статью в блоге или рассматриваешь товар в каталоге.
Чем отличаются Alt и Title
Различие между атрибутами Alt и Title базируется на их функциях. Alt-текст служит именно заменой (альтернативой) изображения, т.е. по нему вы должны как можно точнее представить картинку. В то же время Title обычно используется для предоставления более расширенных данных об иллюстрации, будь то ракурс, стиль, автор, дата и т.д. Поисковые системы полагаются на текст атрибута alt для понимания содержания картинок, а текст title вы составляете, в первую очередь, для улучшения UX.
Как правильно прописать тег Alt на примере
Возьмем для наглядного разбора картинку с кроссовками. Это модель Nike Air Force 1 Low Shadow:
Допустим, у нас интернет-магазин, который продает обувь. Для карточки этого товара мы можем написать разный Alt:
- “Фотография №1” — этот вариант заполнения тега слишком общий и абстрактный. Поисковым алгоритмам такое не нравится, поэтому есть риск, что картинка не будет показываться пользователю из поиска. Вот, что говорит об индексировании визуала “Яндекс”:
- “Обувь Nike” — тоже сомнительный текст, потому что картинка в таком случае не отвечает на многие запросы пользователей, которые ищут не кроссовки, а, например, бутсы. Более, здесь не указана конкретная модель.
- “Разноцветные кроссовки Nike Air Force 1 Low Shadow” — самый оптимальный формат Alt. При этом, конечно, важно не уходить в дебри ключевых запросов и не добавлять что-то в духе “купить со скидкой в Петербурге”, так как поисковик может не одобрить спам.
Сводка правил заполнения тегов
- Текст в атрибутах всегда короткий и точно описывает визуальный элемент или его функцию. Старайтесь сокращать длинные формулировки: оптимально уложиться в 125 символов для Alt и в 250 для Title.
- Добавляйте релевантные ключи в атрибуты, но не спамьте ими слишком сильно. Избегайте лишних слов типа “изображение” или “фото”: они и так очевидны из контекста и просто занимают место.
- Используйте атрибуты только там, где они действительно нужны, а не создают информационный шум. Не заменяйте одни атрибуты другими и не дублируйте в них текст. Учитывайте, какой характер носит сама страница с картинкой: информационный или продающий.
Когда атрибуты Альт и Тайтл не нужны
- Ваше изображение несет лишь декоративную функцию (например, это иконка или аватарка), т.е. в нем нет семантической нагрузки и его можно игнорировать поисковым системам.
- Изображение представляет собой лишь дублирование информации из текста. Например, это слайд из презентации, содержание которой вы как раз и пересказываете на странице.
- Вы предоставляете детальное описание картинки в материале. Допустим, в блоговой статье вы размещаете диаграммы и сразу же подробно их разбираете в тексте, который идет ниже.
- Изображение является частью интерактивного элемента и имеет собственное описание. Например, кнопка на вашей странице уже имеет текстовую метку, которая объясняет ее функцию, и дополнительное описание такой картинки в alt может быть лишним.
- Картинка используется в качестве фона сайта через CSS. Подобные изображения не требуют alt-текста, так как они обрабатываются исключительно как декоративные элементы и не являются частью html-контента.
Правильное использование атрибутов Alt и Title в теге <img> является ключевым элементом в создании доступного и SEO-оптимизированного сайта. Помните, что ошибки в них могут привести к снижению ваших позиций в выдаче. Так что следите за содержанием и синтаксисом, чтобы обеспечить корректную обработку изображений во во всех поисковых системах и пользовательских браузерах.
С помощью каких инструментов прописывать теги Alt и Title
- На WordPress указывать теги очень просто. Достаточно найти изображение в библиотеке медиа, кликнуть на него правой кнопкой для редактирования и в открывшемся окне заполнить соответствующие поля. Если после сохранения надо перепроверить, правильно ли введены данные, сделать это можно с помощью кода.
- В Tilda для оптимизации изображений нужно зайти в блок “Галерея”, открыть “Содержимое” и выбрать раздел “Текст”, после чего заполнить описания в полях.
- В “Битриксе” сначала нужно настроить инфоблок, чтобы вывести поле с описанием изображений. Затем вы редактируете шаблон визуального компонента, прописывая там код для вывода тегов. После этого можно отредактировать само изображение и закрепить там поле с тегами, заполнив описания.
Остались вопросы?
Задайте их нам