Атрибуты alt и title для картинок и их роль в SEO
Несмотря на разнообразие визуального контента и возможности нейросетей по созданию картинок, изображения всё еще остаются одним из действенных инструментов привлечения внимания аудитории. Иллюстрации в блоге или на продающей странице способны пробить баннерную слепоту и удержать на сайте. Тем важнее понимать, что борьба за качество и количество пикселей на пользовательском экране — это история не только про креатив и дизайн. Чтобы ваша картинка отображалась по нужным запросам и вообще появлялась в поисковике как можно чаще, нужно знать, как алгоритмы анализируют изобразительный контент. Об этом сегодня и поговорим.
Зачем нужны атрибуты тега <img>
Тег изображения выступает важным элементом в веб-разработке. Он не только обеспечивает визуализацию текстового контента, но и способствует улучшению позиций сайта в поисковой выдаче.
У тега <img> много атрибутов. Например, src касается источника изображений, loading — процесса их загрузки, а srcset и sizes — адаптации под разные устройства. Но самыми значимыми, пожалуй, можно считать два атрибута: alt и title.
Атрибуты тега <img> играют ключевую роль в оптимизации изображений и обеспечивают улучшение пользовательского опыта. Правильное их использование помогает ускорить загрузку страниц и делает материалы вашего сайта доступными широкой аудитории.
Все атрибуты тега для картинки в HTML размещаются непосредственно внутри <img> и имеют простой синтаксис (примеры будут чуть ниже). Для автоматизации этого процесса вы можете пользоваться инструментами по проверке атрибутов alt и title на сайте (WAVE или Achecker), SEO-помощниками (Yoast SEO или SEMrush) и сервисами для автоматического распознавания картинок. Последние генерируют описания изображений самостоятельно, но вы всегда должны проверять их на адекватность и актуальность. Это, например, Google Cloud Vision или Microsoft Azure Computer Vision.
Что такое атрибут Alt
Alt — это сокращение от “альтернативный текст”. Этот атрибут используется в HTML для описания содержания изображений. Когда вы вставляете визуал на страницу через тег <img>, то alt помогает объяснить, что изображено на картинке. Например, если у вас на сайте есть изображение iPhone 13, то alt-текст может быть “iPhone 13 в черном цвете”.
Атрибут alt важен не только для поисковиков, которые повышают индексацию правильно оптимизированных изображений. Он актуален и для случаев, когда у пользователя нет возможности увидеть иллюстрацию. Например, незрячий человек использует экранный ридер (скринридер), считывающий текст с экрана. Или медленный интернет и ошибки на сервере не позволяют картинке отобразиться.
Что такое атрибут Title
Атрибут title предоставляет дополнительную информацию о визуальном элементе, т.е. по сути является описанием изображений. Текст, который вы помещаете в него, обычно виден в виде всплывающей подсказки, когда пользователь наводит курсор на картинку. Этот атрибут можно добавить практически к любому HTML-элементу, но чаще всего его используют с ссылками (<a>), изображениями (<img>), кнопками (<button>), и фреймами (<iframe>).
Title может значительно улучшить пользовательский опыт и таким способом косвенно помочь поисковой оптимизации. Например, если на сайте есть изображение графика роста вашего бизнеса, то title типа “график роста продаж за 2022 год” дает людям важный контекст для лучшего понимания картинки и ее смысла.
Чем отличаются alt и title
Различие между атрибутами alt и title базируется на их функциях. Alt-текст служит именно заменой (альтернативой) изображения, т.е. по нему вы должны как можно точнее представить картинку. В то же время title обычно используется для предоставления более расширенных данных об иллюстрации, будь то ракурс, стиль, автор, дата и т.д. Поисковые системы полагаются на текст атрибута alt для понимания содержания картинок, а текст title вы составляете, в первую очередь, для улучшения UX. Сравните:
<img src=”example.jpg” alt=”Черно-белая фотография города ночью”>
<img src=”example.jpg” title=”Ночной вид города с вершины холма”>
Как правильно заполнять теги alt и title
- Текст в атрибутах всегда короткий и точно описывает визуальный элемент или его функцию. Старайтесь сокращать длинные формулировки: оптимально уложиться в 125 символов для alt и в 250 для title.
- Добавляйте релевантные ключи в атрибуты, но не спамьте ими слишком сильно. Избегайте лишних слов типа “изображение” или “фото”: они и так очевидны из контекста и просто занимают место.
- Используйте атрибуты только там, где они действительно нужны, а не создают информационный шум. Не заменяйте одни атрибуты другими и не дублируйте в них текст. Учитывайте, какой характер носит сама страница с картинкой: информационный или продающий.
Когда атрибуты alt и title не нужны
- Ваше изображение несет лишь декоративную функцию (например, это иконка или аватарка), т.е. в нем нет семантической нагрузки и его можно игнорировать поисковым системам.
- Изображение представляет собой лишь дублирование информации из текста. Например, это слайд из презентации, содержание которой вы как раз и пересказываете на странице.
- Вы предоставляете детальное описание картинки в материале. Допустим, в блоговой статье вы размещаете диаграммы и сразу же подробно их разбираете в тексте, который идет ниже.
- Изображение является частью интерактивного элемента и имеет собственное описание. Например, кнопка на вашей странице уже имеет текстовую метку, которая объясняет ее функцию, и дополнительное описание такой картинки в alt может быть лишним.
- Картинка используется в качестве фона сайта через CSS. Подобные изображения не требуют alt-текста, так как они обрабатываются исключительно как декоративные элементы и не являются частью html-контента.
Правильное использование атрибутов alt и title в теге <img> является ключевым элементом в создании доступного и SEO-оптимизированного сайта. Помните, что ошибки в них могут привести к снижению ваших позиций в выдаче. Так что следите за содержанием и синтаксисом, чтобы обеспечить корректную обработку изображений во во всех поисковых системах и пользовательских браузерах.
Остались вопросы?
Задайте их нам
