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

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

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

Значение Alt в поисковой оптимизации

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

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

Синтаксис Альт

Общий вид фрагмента кода страницы с включением в него атрибута Alt - <img data-lazy-src="URL-ссылка" alt="текстовое описание"/>.

В альтернативном тексте используются:

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

2. Альтернативные теги будут отображаться вместо изображения, если файл изображения не может быть загружен.

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

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

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

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

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

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

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

Неплохо: 

< 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">

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