Атрибуты alt и title у картинок

Категория: SEO

– Автор: Игорь (Администратор)

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

Раньше скорость интернета была весьма низкой и поэтому картинкам требовались специальные пояснительные описания. Например, на случай если изображения не загрузятся или же их загрузка отключена в настройках браузера (в целях экономии размера страницы). Поэтому в стандарте html для тега img были предусмотрены атрибуты alt и title.

Хоть в нынешнее время подобных проблем практически не возникает, так как скорость интернета существенно подросла, данные атрибуты используются до сих пор. Более того, они применяются для сео оптимизации.

Но, обо всем по порядку.

Атрибут Alt картинок

Alt атрибут - это атрибут тега img, в котором содержится название картинки, отображаемое до ее загрузки.

Пример использования:

<img src="/[адрес картинки]" alt="[название картинки]" />

Как браузер использует атрибут alt тега img? Вначале загружается html разметка страницы. Для картинки выделяется специальная область. В этой области размещается текст из атрибута alt. Если картинка не загрузилась, то пользователь видит текст из атрибута. Если же картинка загрузилась, то вместо текста появляется изображение.

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

Как поисковые системы, такие как Яндекс или Google, используют атрибут alt тега img? Поисковик не может видеть картинку так, как ее видит человек (что изображено на ней и с чем связано). Поэтому он ориентируется по доступной текстовой информации, которая ее окружает, в том числе и по тексту из атрибута alt. Так, например, если картинка называется "милые котики", то поисковик отобразит ее для поискового запроса "милые котики", даже если там нарисованы цветы (почему так делать не стоит рассмотрим чуть позже).

Атрибут Title картинок

Атрибут Title - это атрибут тега img, в котором содержится описание картинки, отображаемое при наведении курсора мыши на картинку.

Пример использования:

<img src="/[адрес картинки]" alt="[название картинки]" title="[описание картинки]"/>

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

Как браузер использует атрибут title тега img? Суть в следующем. Когда пользователь наводит курсор на картинку, то ему отображается текст из title (простыми словами, это банальная подсказка). Используется этот атрибут для разных целей. Например, если в title написан номер шага и краткое описание действия, то пользователю существенно проще ориентироваться в инструкции со множеством картинок.

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

Особенности alt и title у картинок

Рассмотрим особенности использования атрибутов alt и title у картинок.

1. Атрибут Alt является обязательным, а атрибут title нет. В принципе, это следует из основного стандарта html. Однако, в нынешнее время это в большей степени актуально для картинок основного контента, в целях сео продвижения (хотя и без этого сайты могут неплохо себя чувствовать), так как вероятность, что картинки не загрузятся, крайне низка.

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

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

4. Описания не должны превышать 200-250 символов. Иными словами, не стоит в них засовывать полстраницы текста. В противном случае, либо картинка не проиндексируется, либо из текста будут взяты только первые несколько слов (а то и случайные). Кроме того, длинные тексты так же неудобны и пользователям.

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

6. Описания картинок могут совпадать. Если у вас в обзоре встречается несколько картинок, то совершенно не обязательно для каждой из них придумывать уникальное описание. Вполне можно ограничиться одним, максимум добавив цифры или нечто подобное (картинка 1, картинка 2 и т.д.). Поисковики прекрасно понимают, что изображения могут относиться к одним и тем же ключевым словам. Например, скриншоты какого-либо товара с разных ракурсов или же с разными цветами. Хотя во втором случае можно (и лучше) добавлять цвета к названию.

7. Старайтесь размещать картинки так, чтобы окружающий текст соответствовал атрибуту alt. Пример для понимания. Допустим, вы читаете обзор про котят и в середине текста встречаете картинку с описанием "космолет". Если же это фантастика о котятах в космосе, то подобное может быть корректным, но если это умилительная история, то картинка вызовет некое недоумение. Аналогично, воспринимают и поисковики.

Надеюсь, рассказанная мной информация была для вас полезна! Подписывайтесь в социальных сетях и делайте репосты!