Если alt на изображениях сайта пуст или заполнен чем-то вроде «IMG_0247.jpg», этот трафик уходит конкурентам. Откройте исходный код любой страницы своего сайта (Ctrl+U), найдите тег <img> и посмотрите, что написано в alt. Велика вероятность, что ничего.
Seopapa: сервис для продвижения сайтов в ТОП-1 Яндекс
Атрибут alt: что это такое
Атрибут alt — это альтернативный текст, который добавляют к изображению в HTML-коде. Технически он выглядит так:
Браузер отображает этот текст в двух случаях: когда картинка не загрузилась и когда пользователь отключил загрузку изображений. Скринридеры — программы для слабовидящих людей — зачитывают alt вслух. Без него человек просто не поймёт, что изображено на странице.
Но есть и другая сторона. Поисковые роботы не «видят» картинки так, как видит их человек. Они читают код. И alt — главный (часто единственный) источник информации о содержимом изображения для поисковых систем. Именно по нему Google и Яндекс решают, показывать ли картинку в результатах поиска по картинкам.
Чем alt отличается от title
Часто путают атрибут alt и title. Разбираемся, в чем разница.
Alt говорит, что изображено на картинке. Его увидят пользователи, если файл не загрузится, и поисковые системы при индексации.
Title — подсказка, которая всплывает при наведении курсора на картинку.
Зачем заполнять alt
Доступность. По стандартам WCAG 2.2 каждое информативное изображение должно иметь текстовую альтернативу, то есть восприниматься хотя бы одним органом чувств постоянно. Интернет-магазины и сервисы, работающие с госзаказчиками, обязаны соблюдать эти правила. Пустой alt — это ошибка доступности.
Поиск по картинкам. Поисковые системы используют alt, чтобы понять, что изображено на картинке, и правильно ранжировать ее. Без альтернативного описания шансы попасть в выдачу по картинкам близки к нулю. А это бесплатный трафик, который многие сайты просто не собирают.
Контекст для страницы. Alt помогает поисковым роботам лучше понять содержание всей страницы. Если на карточке товара написано «наушники Sony», а alt у фото — «наушники Sony накладные черные», это добавляет больше ключевых слов естественным путём. Другие способы так ненавязчиво вписать слова в код — пожалуй, не найти.
Писать alt правильно — навык, который окупается. Дальше в статье разберём конкретные правила: как составлять текст alt для разных типов контента, какие ошибки встречаются чаще всего и как сделать аудит изображений с помощью популярных сервисов.
Как добавить атрибут alt к изображению
Прежде чем разбирать правила составления текста alt, стоит понять, как технически добавить атрибут к картинке. Вопросы синтаксиса отпугивают владельцев сайтов, но на практике всё проще, чем кажется.
Синтаксис тега img в HTML
Каждое изображение на веб-странице вставляется с помощью тега img. Минимальная запись выглядит так:
Атрибут src указывает путь к файлу картинки. Атрибут alt содержит альтернативный текст — описание того, что изображено. Браузер покажет этот текст пользователю, если картинка не загрузится. Поисковые роботы прочитают его, чтобы понять содержимое изображения. Скринридер озвучит его вслух.
Есть ещё атрибут title. Он отвечает за всплывающую подсказку при наведении курсора. Путать alt и title — распространённая ошибка. Alt описывает картинку для тех, кто её не видит. Title — необязательный бонус, который поисковые системы почти не учитывают при ранжировании.
Как это сделать без кода: CMS и конструкторы
Большинство владельцев интернет-магазинов и блогов не правят HTML вручную. WordPress, Tilda, Битрикс, Shopify — все популярные CMS дают заполнить alt через интерфейс.
Например, в WordPress при загрузке картинки появляется поле «Атрибута alt», в которое можно зайти и при редактировании. Просто впишите туда описание изображения. Платформа сама подставит значение в код страницы. В Tilda alt задаётся в настройках блока с картинкой — поле называется «Alt» или «Альтернативное описание».
Главное правило: не оставляйте это поле пустым. Пустой alt — сигнал поисковым системам, что картинка декоративная и не несёт смысловой нагрузки. Если на изображении товар, инфографика, скриншот, схема — alt должен быть заполнен.
Когда alt правильно оставить пустым
Да, бывают случаи, когда пустой alt — это осознанное решение. Декоративные элементы: разделители, фоновые паттерны, иконки-украшения. Они не несут информацию для пользователя. В таком случае пишется alt="" — именно пустое значение, а не отсутствие атрибута. Разница принципиальная: без атрибута вовсе скринридер попытается прочитать имя файла, и пользователь услышит что-то вроде «img_3847_final_v2.png». Не самый приятный опыт.
Для работы с доступностью и для продвижения сайта он важен: поисковые роботы увидят, что элемент намеренно помечен как декоративный, и не будут пытаться извлечь из него текстовую информацию.
Откройте исходный код любой страницы вашего сайта (Ctrl+U в браузере) и найдите теги img. Если вместо осмысленного alt-текста там стоит «image1», «photo» или атрибут вообще отсутствует — с помощью описанных выше шагов это можно исправить за один вечер. Дальше разберём, как писать alt правильно, чтобы он реально привлекал трафик из картинок, а не просто занимал место в коде.
Бесплатно попробуйте SeoPapa и получите первые результаты уже сегодня
Быстрое и безопасное продвижение сайтов в топ-1 выдачи Яндекс с помощью уникальных технологий.
Как проверить наличие атрибута alt на сайте
Перед тем как писать правильные alt-тексты, стоит разобраться: а что сейчас происходит на вашем сайте? Сколько картинок вообще без альтернативного текста? Сколько с пустым alt? Вручную проверять каждую страницу — занятие на неделю, если сайт больше 50 страниц. Есть способы быстрее.
Быстрая проверка через браузер
Самый простой вариант — открыть нужную страницу, нажать Ctrl+Shift+U, через поиск по странице найти все упоминания alt.
Минус подхода: проверяется одна страница за раз. Для сайта на 10 страниц сойдёт, для интернет-магазина с тысячами карточек — нет.
Массовая проверка с помощью SEO-сервисов
Для больших сайтов лучше использовать краулеры. Вот как это работает на примере популярных инструментов.
Screaming Frog SEO Spider. Бесплатная версия сканирует до 500 URL. Запускаете краулинг, переходите во вкладку Images, фильтруете по «Missing Alt Text». Программа покажет каждый img src без alt-атрибута и URL страницы, где он найден. Тут же видно, где alt пустой, а где отсутствует совсем — а это, как разбирали выше, разные вещи.
Ahrefs Site Audit. Если проект уже подключён к Ahrefs, в разделе аудита есть отдельный отчет по изображениям. Он собирает все картинки с отсутствующим alt-текстом и группирует ошибки по приоритету. Удобно, что сразу видно масштаб проблемы в процентах от общего числа изображений на сайте.
Google Search Console. Прямого отчета по alt-тегам здесь нет, но есть косвенная информация. Перейдите в раздел «Эффективность», выберите тип поиска «Картинки». Если трафик из картинок близок к нулю при большом количестве изображений на сайте — это сигнал. Поисковые системы не индексируют изображения правильно, потому что не получают текстовую информацию о содержимом картинок.
На что смотреть в результатах
После сканирования появится список проблемных img-тегов. Не все ошибки одинаково критичны. Вот правила приоритезации:
Картинки товаров и услуг — исправлять первыми. Это контент, который должен попадать в поисковую выдачу по картинкам и приносить трафик.
Инфографика и скриншоты из статей — вторая очередь. Альтернативное описание для них помогает пользователям скринридеров и дает поисковым роботам дополнительную информацию о содержании страницы.
Декоративные элементы (фоны, разделители, иконки) — убедиться, что у них стоит пустой alt="". Добавить текст к ним было бы ошибкой: он засорит выдачу и запутает вспомогательные технологии.
Другие изображения (например, фото команды, баннеры) — последняя очередь.
Иногда CMS подставляет имя файла вместо описания, и в HTML-коде появляется что-то вроде alt="DSC_0042.jpg". Формально атрибут заполнен, но ни пользователь, ни поисковые роботы не увидят в этом ничего полезного. Такие случаи тоже нужно вылавливать и исправлять.
Дальше появляется вопрос: как правильно писать alt, чтобы он работал и на SEO, и на доступность одновременно.
Как составлять текст к изображением для атрибута alt
Вот конкретные правила, которые помогут писать alt правильно — и для поисковых систем, и для пользователей.
Описывайте содержимое изображения
Альтернативный текст отвечает на вопрос «что изображено на картинке?». Не «зачем она здесь» и не «какое настроение создаёт». Представьте, что объясняете картинку по телефону человеку, который ее не видит.
Плохо: alt="красивое фото".
Хорошо: alt="Кроссовки беговые Nike Air Zoom Pegasus 40 чёрные".
Разница очевидна. В первом случае ни браузер, ни поисковые роботы не получат полезную информацию. Во втором — пользователь поймёт, что на картинке, а поисковая система проиндексирует изображение по конкретному запросу.
Добавляйте ключевые слова, но без фанатизма
Alt тег для img — одно из мест, где ключевые слова действительно влияют на ранжирование в поиске по картинкам. Но переспам снизит эффект. Google, например, предупреждает: переспам alt ключами ведёт к понижению страницы.
Держите длину в рамках
Alt должен быть кратким. Оптимально — 3-5 слов. Скринридеры зачитывают текст alt целиком, и если там 50 слов, пользователь с нарушением зрения просто потеряется. Поисковые системы тоже обрезают слишком длинные описания.
Для большинства картинок на сайте хватает одного предложения. Если изображение сложное, например инфографика или схема, лучше использовать атрибут alt для краткого описания, а развернутую текстовую расшифровку дать в теле страницы.
Не дублируйте alt и title
Атрибут title создаёт всплывающую подсказку при наведении курсора. Часто в HTML-коде встречается одинаковый текст в обоих атрибутах: <img src="photo.jpg" alt="Красная сумка" title="Красная сумка">. Это ошибка — не грубая, но бессмысленная. Title и alt решают разные задачи. Alt описывает содержимое картинки для случаев, когда она не загрузилась или не видна. Title — дополнительная информация, например цена или материал. Можно вообще не заполнять title, на SEO это почти не влияет.
Формула для карточек товаров
Для интернет-магазинов работает простая схема: название товара + главная характеристика + бренд. Например: alt="Рюкзак городской Osprey Daylite 13L серый". С помощью такой формулы легко сделать alt для сотен товарных изображений. Контент-менеджер справится за день, а трафик из картинок начнет расти уже через пару недель после переиндексации.
Все эти правила сводятся к одному вопросу: если убрать картинку со страницы, поймёт ли пользователь по тексту alt, что на ней было? Если да — alt написан правильно.
Выводы
Атрибут alt — это текстовая альтернатива изображения, которую поисковые системы и браузеры используют, чтобы понять содержимое картинки. Вся статья сводится к нескольким правилам, которые стоит зафиксировать.
Что запомнить
Каждый тег <img src="..." alt="..."> на странице сайта должен содержать осмысленное описание. Альтернативный текст отвечает на вопрос: «Что изображено на картинке?» Не «какие ключевые слова сюда вставить», а именно — что увидят пользователи, если картинка загрузится. Если не загрузится — они увидят текст alt вместо неё.
Разные декоративные элементы (например, фоны, разделители, иконки без смысловой нагрузки) получают пустой alt="". За такой пустой атрибут поисковые роботы не наказывают. А вот за alt="foto1.jpg" или alt="картинка картинка картинка купить дешево" — накажут.
Атрибут title создаёт всплывающую подсказку при наведении курсора, но на SEO и продвижение сайта почти не влияет. Путать alt и title — одна из популярных ошибок, которая до сих пор встречается даже в коде крупных интернет-магазинов.
Что сделать прямо сейчас
Откройте любую страницу своего сайта. Нажмите Ctrl+U и найдите теги img. Посмотрите, что стоит в атрибуте alt. Если там пусто, стоит название файла или набор слов через запятую — перед вами точка роста.
Начните с десяти самых важных страниц. Например, с карточек популярных товаров или ключевых статей. Напишите для каждой картинки описание длиной до 125 символов. Используйте формулу из этого материала: что изображено + главная характеристика + бренд (в случае товаров). Для других типов контента — опишите содержимое изображения так, чтобы незрячий пользователь понял смысл без помощи сервисов распознавания.
Проверить результат можно через Google Search Console: откройте отчёт «Эффективность», переключитесь на вкладку «Изображения» и отслеживайте трафик из картинок. Рост обычно заметен через две-четыре недели после переиндексации.
Главное правило
Чтобы грамотно написать alt, нужно описать изображение для человека, а не для робота. Поисковые системы давно научились распознавать спам в альтернативных текстах. Информацию о картинке лучше передавать естественным языком, без перечисления ключевых слов через запятую.
HTML-код с грамотными alt-атрибутами работает сам: браузеры корректно отображают текстовую замену при сбоях загрузки, скринридеры озвучивают описание, а поисковые роботы индексируют картинки по нужным запросам и приводят дополнительный трафик.
Seopapa: SEO-продвижение сайтов в ТОП-1 Яндекс
Seopapa — эффективный и безопасный сервис для продвижения сайтов с помощью поведенческих факторов.