Alt-текст для картинок и SEO
Значение атрибута alt тега image в поисковой оптимизации


Alt-текст для картинок и SEO.

Alt (в русской транслитерации "альт") — это атрибут тега <img>, используемый для описания изображений. В содержании этого атрибута прописывается  текстовое  описание, которое поясняет содержание графического контента.

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

Значение атрибута alt тега image в поисковой оптимизации.

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

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

Синтаксис атрибута alt тега image в HTML.

Общий вид фрагмента кода страницы с включением в него атрибута Alt:

<img data-lazy-src="URL-ссылка" alt="текстовое описание"/>

Что прописывается в атрибуте alt тега image.

  1. Добавление альтернативного текста к фотографиям - это прежде всего принцип веб-доступности. Слабовидящим пользователям, использующим программы чтения с экрана, будет прочитан атрибут alt, чтобы лучше понять изображение на странице.
  2. Альтернативные теги будут отображаться вместо изображения, если файл изображения не может быть загружен.
  3. Альтернативные теги обеспечивают лучший контекст / описание изображения для поисковых роботов, помогая им правильно индексировать изображение.

Альтернативные теги обеспечивают лучший контекст / описание изображения для поисковых роботов

Выделенный текст показывает альтернативный текст (атрибут alt) изображения слева.

Пример замещающего текста

<img src="/pupdanceparty.gif" alt="Танцующие щенки" />

Оптимальный формат замещающего текста (альта) картинки в HTML.

Лучший формат для замещающего текста — это достаточно информативный, но не содержит спамовых попыток наполнения ключевыми словами. Если можно закрыть глаза, попросить кого-нибудь прочитать вам замещающий текст и представить достаточно точно изображение, вы на правильном пути.

Давайте посмотрим на несколько примеров замещающего текста для этого изображения восхитительного котика:

Оптимальный формат замещающего текста (альта) картинки в HTML

Неплохо: 

<img data-lazy-src="pancakes.png" alt="pancakes" />

Этот альтернативный текст подходит только потому, что он не очень информативен. Да, это изображение стопки блинов. Но об этом изображении можно сказать больше.

Хорошо: 

<img data-lazy-src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar" />

Этот альтернативный текст - лучшая альтернатива, потому что он гораздо лучше описывает то, что изображено на картинке. Это не просто стопка «блинов» (как продемонстрировал первый пример альтернативного текста); это стопка черничных блинов с сахарной пудрой!

Не рекомендуется:

<img data-lazy-src="pancakes.png" alt="" />

или

<img data-lazy-src="pancakes.png" alt="pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe" />

Ни один из этих примеров не рекомендуется. Первая строка кода на самом деле вообще не содержит никакого замещающего текста (обратите внимание, что кавычки пусты), а второй пример демонстрирует наполнение ключевыми словами замещающего текста.

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Выберите, то, чем пользуетесь чаще всего:

Старт! Горячий старт на просторы интернета
Старт! Меню