Атрибут alt и title для картинок — как правильно прописать для сайта

Атрибуты alt и title для картинок надо обязательно прописывать. Иначе сайт будет хуже ранжироваться алгоритмами ИИ. Это текст для юзеров, на экранах которых по разным причинам иллюстрации не отображаются. Ниже мы покажем на примерах, как правильно прописать для SEO эти теги. Грамотная оптимизация изображений — один из способов понравиться поисковым системам в 2023 году.

Надежные виртуальные карты для арбитража трафика

Подробнее

Реклама

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

Alt — это дескрипшен, который необходимо прописывать. Предназначен он, во-первых, для пользователей, у которых медленный интернет, подключен Screen Reader или просто выключено отображение изображений. Во-вторых, для роботов ПС, чтобы они лучше понимали смысл медиафайлов сайта. В-третьих, если вам нужен трафик из Яндекс и Гугл картинок — то без alt не обойтись.

Вот как отображается прописанный alt, если иллюстрация почему-то не показывается на экране пользователя.

Как прописывается на примере движка WordPress:

• жмете в редакторе «Добавить медиафайл»;

• загружаете картинку;
• прописываете название в графе «Атрибут alt».

Внимание! Особенно важно уделять внимание alt, если на странице галерея изображений и нет текста, описывающего иллюстрации. 

Когда alt прописывать необязательно:

• аватарка;
• миниатюра;
• иконка в кнопке.

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

Тут Screen Reader может посчитать картинку бессмысленной. 

Зачем нужен title для картинок

Он дает дополнительную инфу. Пользователю будет легче определить смысл изображения. Отображается тег при наведении мыши (курсора) на иллюстрацию.

Некоторые вебмастеры старой школы считают, что органический трафик не зависит от title. Поэтому его не заполняют. Однако исследования, проведенные недавно, говорят об обратном.

Как заполнить тайтл для фото в WP:

• загрузить медиафайл;
• заполнить эту графу.

Alt и title для изображений — в чем разница

Оба являются тегами для картинок. Но разница в следующем:

• alt — описание, передающее изображение на индексацию роботу ПС и влияющее на выдачу Google;
• title — заголовок, выводящий подсказки для пользователя и влияющий на выдачу по картинке в Яндексе/Гугле.

Как правильно прописать alt для SEO

Крайне важно не просто прописать alt, но сделать это правильно. Разберем на примере. Допустим, у нас есть онлайн-шоп для домашних животных. Загружаем фото под товар — корм для кошек.

Способы прописания, от худшего к лучшему:

1. Фото 001, 002, 003. Текст есть, но он не несет никакой пользы. Яндекс точно не пустит это фото в выдачу, так как сам пишет об этом.

2. Корм для кошек. Описали картинку, но запрос получается чересчур высокочастотным. Аж 17613 показов по Вордстату — конкурировать странице будет сложно. Кроме того, непонятно — запрос информационный или коммерческий.

3. Купить корм для кошек Pro Plan. Отлично, вывели НЧ запрос с 78 показами.

Таким образом, вот основные правила для alt:

• содержательным;
• в меру коротким — например, популярный скринридер JAWS зачитывает длинные строки как несколько иллюстраций вместо одной;
• уникальным — хватит и того, чтобы не повторять текст, уже имеющийся на странице;
• включать ключевой запрос;
• не иметь грамматических, орфографических ошибок;
• не быть спамным — кей надо вписывать естественно, а не наобум (например, так нельзя «Купить корм для кошек Pro Plan, цена, Москва, быстро).

Как правильно прописать title для SEO

Примерно таким же надо делать title:

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

Можно ли автоматически прописать alt на WordPress

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

1. Update Image Tag Alt Attribute. Надо в настройках плагина переключить кнопку в состояние On и отметить страницы, где нужно прописывать тег автоматически. Что именно делает расширение: берет все пустые теги медиафайлов и автоматически заполняет их на основании тематики страницы.

2. Clearfy. Многофункциональное расширение, одной из функций которого является прописание тегов для картинок. Все что нужно сделать — выставить галочку в настройках плагина.

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

Чтобы проверить наличие/отсутствие тегов картинок на своем сайте, также можно использовать автоматизацию. Особенно, если на ресурсе много страниц. Для этого можно использовать специальные сервисы типа Screaming Frog, Netpeak Spider и другие. Они же могут помочь в сборе alt конкурентов, когда это нужно сделать массово. А это, если хотите узнать, как скопировать чужой сайт полностью и переделать под себя. Также вам могут быть полезны сервисы, где можно собрать ключевые слова конкурентов.

Роль оптимизации изображений в продвижении сайта

Раньше главные усилия в SEO были направлены на текстовый контент. Однако сегодня приоритеты изменились — ПС начали обращать пристальное внимание также на медиа файлы.

Что может дать вебмастеру грамотная оптимизация картинок:

• дополнительный органический трафик — согласно исследованию западных агентств, до 25% поисковых запросов Гугла относится именно к изображениям;
• повышение ПФ целевой страницы — Nielsen Norman Group утверждает, что почти 80% пользователей читают те отрывки контента, где есть иллюстрации;
• улучшение в мобильной выдаче.

Alt и title — одни из главных способов оптимизации иллюстраций. Так, в ходе экспериментов в 2020 году было доказано, что эти теги влияют на SEO таким образом.

Что еще включает оптимизация картинок:

• качество и размер — роботом больше нравятся большие и качественные фото, но надо понимать, что чересчур объемные файлы тормозят работу сайта;
• релевантность — картинка должна быть тематической;
• уникальность — поисковики просто обожают оригинальные фото;
• правильный формат — роботы ПС с аппетитом кушают форматы jpg/jpeg/png/gif/svg, но не любят bmp/jpeg-xr/web;
• права на использование — если нет своих картинок, то скачивать их желательно с проверенных стоков (иначе можно получить фильтр за нарушение авторских прав).

Заключение

Безусловно, грамотное заполнение тегов alt/title и другая оптимизация изображений важны для SEO. Однако это не единственные и не основные пункты, на которые вебмастер должен обращать внимание. В 2023 году, как и всегда, рулит общий контент сайта — он должен быть полезным, уникальным, интересным и в максимальной степени закрывать боли клиента. Да и вообще, сегодня можно не заморачиваться, и сразу купить качественный сайт с доходом.