Атрибут alt: что это такое и зачем он нужен

Атрибут alt — это текстовое описание изображения в HTML-коде. Он указывается внутри тега <img> и помогает объяснить, что изображено на картинке, если пользователь, браузер, скринридер или поисковая система не может воспринимать изображение визуально.

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

Автор экспертного мнения

Владислав Жерко

SEO-специалист, контент-стратег в Digital-агентстве Saygona

Опыт: 7+ лет в SEO и поисковом продвижении

Что такое alt простыми словами

Alt — это короткое описание изображения, которое передаёт его смысл. Он нужен не для красоты кода, а для доступности, корректной структуры страницы и лучшего понимания изображения поисковыми системами.

• Например, если на странице товара размещена фотография красной футболки, правильный alt может выглядеть так:

  HTML

  <img src="red-tshirt.jpg" alt="Красная хлопковая футболка с коротким рукавом">

Такой текст понятен пользователю, скринридеру и поисковой системе. Он описывает не просто наличие картинки, а конкретный объект на ней.

Зачем нужен атрибут alt

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

• Доступность сайта. Скринридеры используют alt, чтобы озвучивать изображения людям с нарушениями зрения.
• Поддержка при ошибке загрузки. Если изображение не открылось, пользователь может увидеть его текстовое описание.
• Понимание смысла страницы. Alt помогает не потерять важную информацию, если изображение является частью инструкции, схемы, карточки товара или статьи.
• SEO изображений. Поисковые системы используют alt как один из сигналов для понимания содержания изображения.
• Поиск по картинкам. Правильно заполненный alt помогает изображению точнее соответствовать запросам пользователей.
• Контекст для ИИ-поиска. Альтернативный текст помогает алгоритмам лучше понять, какую роль изображение играет на странице.

Как выглядит alt в HTML

Атрибут alt добавляется внутрь тега изображения <img>. Его значение пишется в кавычках.

<img src="image.jpg" alt="Описание изображения">

• Пример для карточки товара:

  HTML

  <img src="watch-repair.jpg" alt="Мастер ремонтирует механические часы">

• Пример для статьи:

  HTML

  <img src="seo-audit-chart.jpg" alt="График роста трафика после SEO-аудита сайта">

• Пример для декоративной картинки:

  HTML

  <img src="decor-line.svg" alt="">

Когда alt нужно заполнять

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

• фотографии товаров в интернет-магазине;
• изображения услуг и примеры работ;
• схемы, графики и диаграммы;
• скриншоты в инструкциях;
• изображения с важными деталями;
• иллюстрации, которые объясняют текст;
• кнопки и иконки, если они выполняют действие и не имеют текстовой подписи.

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

Важное замечание про фоновые изображения CSS. Изображения, заданные через CSS-свойство background-image, не имеют атрибута alt и не могут быть описаны напрямую в HTML. Поэтому все смысловые изображения, которые важны для понимания контента, должны вставляться через тег <img>, а не через CSS. Фоновые изображения подходят только для декоративных элементов.

Когда можно использовать пустой alt

Пустой alt alt="" используют для декоративных изображений, которые не несут самостоятельного смысла. Это могут быть разделители, фоновые элементы, декоративные иконки, стрелки, узоры или изображения, смысл которых уже полностью раскрыт рядом в тексте.

Пустой alt не означает ошибку. Наоборот, для декоративных элементов это правильное решение: скринридер пропустит такую картинку и не будет создавать лишний шум для пользователя.

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

Важно не путать пустой alt с отсутствующим alt. Для декоративного изображения лучше явно указать alt="", а не удалять атрибут полностью.

Alt и SEO: как атрибут влияет на продвижение

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

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

• Правильный вариант:

  HTML

  <img src="leather-bag.jpg" alt="Коричневая кожаная сумка с короткими ручками">

• Плохой вариант:

  HTML

  <img src="leather-bag.jpg" alt="сумка купить кожаная сумка женская сумка недорого сумка Москва">

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

Хороший alt должен быть коротким, понятным и полезным. Он описывает изображение с учётом контекста страницы. Если картинка стоит на странице товара, важно указать товар и значимую характеристику. Если это схема, нужно кратко передать её смысл. Если это скриншот, нужно объяснить, что на нём показано.

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

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

Оптимальная длина alt

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

Для большинства изображений достаточно 5–10 слов. Часто рекомендуют держать alt в пределах короткой фразы, примерно до 125 символов, чтобы описание было удобно воспринимать скринридером и не перегружать пользователя. Если картинка сложная, например график или схема, в alt лучше дать краткое описание, а подробное объяснение разместить рядом в тексте страницы.

• Пример для сложной схемы:

  HTML

  <img src="site-audit-scheme.jpg" alt="Схема этапов технического аудита сайта">

А подробности можно раскрыть ниже в обычном тексте, списке или таблице.

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

Alt для разных типов изображений

Универсального alt для всех изображений не существует. Описание зависит от роли картинки на странице: товар, иконка, схема, скриншот, логотип, декоративный элемент или изображение-ссылка требуют разного подхода.

Alt для товаров в интернет-магазине

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

Хорошие примеры:

• alt="Белое льняное платье миди с коротким рукавом"
• alt="Коричневые кожаные лоферы с квадратным носом"
• alt="Наручные часы Raymond Weil с металлическим браслетом"

Плохие примеры:

• alt="товар"
• alt="image123"
• alt="купить платье платье женское платье Италия"

Уникальность alt в рамках страницы. Если на странице каталога показаны разные товары, изображения не стоит подписывать одинаково: «товар», «фото товара», «изображение». Alt должен помогать отличать один товар от другого. Если одно и то же изображение повторяется в одинаковом контексте, одинаковый alt не является проблемой.

Alt для информационных статей

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

• Например, для статьи про аудит сайта можно использовать:

  HTML

  <img src="audit-errors.jpg" alt="Список технических ошибок сайта после аудита">

• Для статьи про robots.txt:

  HTML

  <img src="robots-file.jpg" alt="Пример файла robots.txt с правилами индексации">

Alt для иконок и кнопок

Если иконка используется как самостоятельная кнопка и рядом нет текста, alt должен описывать действие. Пользователь должен понять, что произойдёт после нажатия.

• Пример:

  HTML

  <img src="search.svg" alt="Поиск">

• Если рядом с иконкой уже есть текст, например кнопка «Поиск», иконку можно сделать декоративной:

  HTML

  <button>
      <img src="search.svg" alt="">
      Поиск
  </button>

Важное правило для изображений-ссылок. Если изображение является единственным содержимым ссылки, alt должен помогать понять цель перехода. Например, для фото товара в каталоге можно указать название товара: alt="Красная хлопковая футболка". Если контекст неочевиден, описание можно сделать функциональным: alt="Перейти на страницу красной хлопковой футболки".

Alt для логотипа

Для логотипа alt обычно должен содержать название компании или сайта. Не нужно писать «логотип компании», если достаточно указать бренд.

• Хороший пример:

  HTML

  <img src="logo.svg" alt="Saygona">

• Если логотип является ссылкой на главную страницу, можно сделать alt более функциональным:

  HTML

  <a href="/">
      <img src="logo.svg" alt="Saygona — на главную страницу">
  </a>

Alt, title и figcaption: в чём разница

Alt, title и figcaption — это разные элементы, которые нельзя полностью заменять друг другом. Alt является альтернативным текстом изображения и важен для доступности, ошибок загрузки и понимания изображения поисковыми системами. Title обычно используется как дополнительная подсказка при наведении. Figcaption создаёт видимую подпись под изображением внутри контейнера <figure>.

Частые ошибки при заполнении alt

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

• alt отсутствует у важных изображений;
• у декоративных изображений нет пустого alt="";
• в alt указан файл вместо описания, например img001.jpg;
• описание начинается со слов «картинка», «фото», «изображение» без необходимости;
• alt дублирует H1 или title страницы;
• в alt добавлен список ключевых слов;
• описание слишком длинное и перегруженное;
• alt не соответствует изображению;
• в alt есть орфографические ошибки;
• для кнопок-иконок описан внешний вид, а не действие;
• для изображений-ссылок описан внешний вид, а не цель перехода;
• у разных изображений на одной странице одинаковый общий alt, например «товар» или «фото».

Как проверить alt на сайте

Проверить alt можно вручную через код страницы или с помощью SEO-сканеров. Для небольшого сайта достаточно открыть HTML-код и посмотреть теги <img>. Для большого сайта лучше использовать Screaming Frog SEO Spider, Netpeak Spider, расширения браузера или встроенные инструменты CMS.

• найдите изображения без атрибута alt;
• проверьте пустые alt у смысловых изображений;
• уберите переспам ключевых слов;
• проверьте, не дублируются ли одинаковые alt на разных изображениях без причины;
• убедитесь, что alt соответствует изображению и контексту страницы;
• проверьте декоративные изображения: у них должен быть alt="";
• проверьте alt у изображений-ссылок и иконок-кнопок.

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

Чек-лист правильного alt

• Alt описывает смысл изображения.
• Текст короткий и понятный.
• Описание соответствует контексту страницы.
• Ключевые слова используются естественно.
• Нет набора ключевых фраз.
• Нет лишних слов «картинка» или «изображение».
• Для декоративных элементов указан alt="".
• Для изображений-ссылок описано действие или назначение ссылки.
• Для сложных схем есть краткий alt и подробное описание рядом в тексте.
• Alt не дублирует H1, title или соседний текст без необходимости.
• Alt помогает отличать разные смысловые изображения друг от друга.

Примеры хороших и плохих alt

Alt и ИИ-поиск

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

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

Нужно ли заполнять alt у всех изображений

У всех изображений должен быть корректный подход к alt. Если изображение смысловое, alt нужно заполнить. Если изображение декоративное, следует указать пустой alt alt="". Оставлять тег <img> без атрибута alt нежелательно, потому что некоторые скринридеры могут озвучивать имя файла.

Главное правило простое: если без изображения пользователь потеряет важный смысл, alt должен объяснять этот смысл. Если изображение ничего не добавляет к содержанию страницы, его лучше скрыть от скринридеров через пустой alt.

Автор экспертного мнения

Марина Харчистова

SEO-специалист в Digital-агентстве Saygona

Опыт: 5+ лет в SEO и поисковом продвижении

Комментарий эксперта

Title и figcaption не заменяют alt. Если у изображения есть смысловая нагрузка, нужно заполнять именно alt. Атрибут title и тег <figcaption> можно использовать дополнительно, но не вместо альтернативного описания.