Alt для изображений: как писать описание картинки для SEO и доступности

Статья отвечает на запрос «alt для изображений» строго в своей границе: Только альтернативный текст изображений, без общей оптимизации скорости и форматов. Проверка строится на фактических URL, исходном HTML и понятном действии пользователя.

Зачем изображению альтернативный текст

Alt нужен не ради поля в SEO-плагине. Скринридер озвучивает его человеку, который не видит изображение; браузер может показать текст при ошибке загрузки; поисковый робот получает дополнительный контекст. Хорошее описание зависит от роли картинки на конкретной странице.

Практическое действие. Один и тот же файл может иметь разный alt в разных материалах. В карточке товара важна модель, а в статье о дизайне — деталь композиции, которую объясняет абзац.

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

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

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

Опишите смысл, а не имя файла

Фраза «График роста подписчиков канала MAX с 1200 до 1850 за сентябрь» полезнее, чем chart-final-2.png. Не начинайте каждый alt словами «изображение» или «картинка»: средство чтения уже сообщает тип элемента.

Практическое действие. Спросите, какую информацию потеряет читатель без картинки. Именно её и нужно передать коротко, без повторения соседнего предложения слово в слово.

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

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

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

Что писать для товара и услуги

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

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

Для этапа «что писать для товара и услуги» контент-редактор сначала фиксирует объект «изображение», затем проверяет «alt-текст» и только после этого оценивает смысл картинки. Последовательность важна: если сразу смотреть на доступность без изображения, легко принять следствие за причину и выбрать неверную правку.

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

Яндекс рекомендует заполнять атрибут alt: он показывается вместо недоступного изображения и помогает роботу Яндекс Картинок понять содержимое. При этом текст на самой картинке стоит дублировать обычным текстом страницы. Это прямо указано в рекомендациях Яндекс Вебмастера.

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

Когда нужен пустой alt

Декоративной линии, фоновому узору и иконке, чей смысл уже написан рядом, задают alt="". Тогда скринридер пропускает элемент. Отсутствующий атрибут и пустой alt — не одно и то же.

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

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

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

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

Как описывать схемы и графики

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

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

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

Для этапа «как описывать схемы и графики» контент-редактор сначала фиксирует объект «изображение», затем проверяет «alt-текст» и только после этого оценивает смысл картинки. Последовательность важна: если сразу смотреть на доступность без изображения, легко принять следствие за причину и выбрать неверную правку.

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

Alt у изображения-ссылки

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

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

Для этапа «alt у изображения-ссылки» контент-редактор сначала фиксирует объект «изображение», затем проверяет «alt-текст» и только после этого оценивает смысл картинки. Последовательность важна: если сразу смотреть на доступность без изображения, легко принять следствие за причину и выбрать неверную правку.

В разделе «alt у изображения-ссылки» границей служит контекст страницы. В теме «alt для изображений» соседние настройки могут выглядеть связанными, но отвечают на другой вопрос. Поэтому результат записывают как наблюдение, решение и условие пересмотра, а не как универсальное правило для любого URL.

Не набивайте alt ключевыми словами

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

Практическое действие. Используйте обычную фразу. Если ключ естественно называет предмет картинки, он появится сам; добавлять варианты через запятую не нужно.

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

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

Не прячьте важный текст в картинке

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

Практическое действие. Для логотипа обычно достаточно названия организации, если он выполняет роль идентификатора. Слоган добавляйте только тогда, когда он важен для задачи страницы.

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

Для этапа «не прячьте важный текст в картинке» контент-редактор сначала фиксирует объект «изображение», затем проверяет «alt-текст» и только после этого оценивает смысл картинки. Последовательность важна: если сразу смотреть на доступность без изображения, легко принять следствие за причину и выбрать неверную правку.

Настройте поле alt в CMS

Редактор должен видеть отдельные поля: alt, подпись и название файла. Автозаполнение названием статьи допустимо только как черновик, потому что оно редко описывает конкретную картинку.

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

Для этапа «настройте поле alt в cms» контент-редактор сначала фиксирует объект «изображение», затем проверяет «alt-текст» и только после этого оценивает смысл картинки. Последовательность важна: если сразу смотреть на доступность без изображения, легко принять следствие за причину и выбрать неверную правку.

В разделе «настройте поле alt в cms» границей служит контекст страницы. В теме «alt для изображений» соседние настройки могут выглядеть связанными, но отвечают на другой вопрос. Поэтому результат записывают как наблюдение, решение и условие пересмотра, а не как универсальное правило для любого URL.

Проведите аудит изображений

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

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

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

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

Чек-лист для темы «alt для изображений»

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