Термин SEO и доступность Начальный

Alt-текст

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

alt text alternative text alt attribute image alt alt-описание альтернативный текст альтернативное описание изображения описание изображения для доступности SEO alt
Alt-текст описывает смысл изображения для тех случаев, когда картинку нельзя увидеть: пользователь использует скринридер, изображение не загрузилось, поисковая система анализирует страницу или AI-агент обрабатывает контент сайта. В HTML он обычно хранится в атрибуте alt у тега img.

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

Для SEO alt полезен, но его нельзя превращать в набор ключевых слов. Поисковой системе важнее понятное описание изображения в контексте страницы. Например, "скриншот настройки webhook в n8n" лучше, чем "n8n webhook AI агент инструкция бесплатно".

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

В статьях и инструкциях alt-текст особенно важен для скриншотов. Он должен описывать не все пиксели, а действие или состояние: "окно BotFather с созданным токеном скрытым маской", "таблица с колонками invoice_id, due_date и paid_at", "график роста latency после deploy".

Примеры

  • Для скриншота: "экран n8n с AI Agent node, подключенными tools и memory".
  • Для графика: "линейный график latency: после deploy показатель вырос с 300 до 900 миллисекунд".
  • Для товара: "черная беспроводная клавиатура на белом столе, вид сверху".
  • Для декоративной иконки рядом с заголовком alt лучше оставить пустым: alt="".
  • Для инструкции: "поле Webhook URL в настройках Telegram-бота".
  • Плохой пример: "ИИ агент SEO AI GPT n8n LangGraph купить". Это keyword stuffing, а не полезный alt.

Где используется

  • доступность сайта для пользователей со скринридерами
  • SEO-оптимизация изображений без переспама
  • описание скриншотов в пошаговых инструкциях
  • каталоги товаров и маркетплейсы
  • автоматическая проверка пустых alt на сайте
  • генерация черновиков alt с помощью vision-моделей
  • обработка изображений AI-агентом
  • подготовка контента для CMS и блога
  • улучшение качества документов, PDF и презентаций
  • контент-аудит перед публикацией страницы

Связанные термины

Частые вопросы

Alt-текст нужен для всех изображений?

Нет. Для содержательных изображений alt нужен. Для декоративных элементов, которые ничего не добавляют к смыслу страницы, обычно используют пустой alt: alt="". Тогда скринридер не будет озвучивать лишнее.

Какой длины должен быть alt-текст?

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

Можно ли писать в alt ключевые слова для SEO?

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

Может ли ИИ автоматически писать alt-тексты?

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

Чем alt отличается от подписи под изображением?

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

Что писать в alt для скриншота интерфейса?

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

Где читать дальше

Статьи по теме

Как сделать изображение с русским текстом в Qwen Image: пошаговая инструкция

Как сделать изображение с русским текстом в Qwen Image: пошаговая инструкция

Пошаговая инструкция: как в Qwen Image сделать постер, баннер или карточку с русским текстом, проверить кириллицу и понять, когда надпись лучше добавить вручную.

пошаговая инструкция генерация изображений Qwen Image
Как сделать рекламные визуалы товара в Seedream: пошаговая инструкция

Как сделать рекламные визуалы товара в Seedream: пошаговая инструкция

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

карточки товаров пошаговая инструкция генерация изображений
Как сделать брендовые иллюстрации в Recraft: пошаговая инструкция

Как сделать брендовые иллюстрации в Recraft: пошаговая инструкция

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

пошаговая инструкция генерация изображений AI для дизайна
Как сделать серию изображений в одном стиле через Stable Diffusion: пошаговая инструкция

Как сделать серию изображений в одном стиле через Stable Diffusion: пошаговая инструкция

Пошаговая инструкция: как через Stable Diffusion сделать серию изображений в одном стиле, зафиксировать промпт, negative prompt, seed, формат и подготовить картинки к публикации.

пошаговая инструкция генерация изображений Stable Diffusion
Как использовать GPT Image для редактирования готового изображения: фон, детали, формат

Как использовать GPT Image для редактирования готового изображения: фон, детали, формат

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

пошаговая инструкция GPT Image редактирование изображений
Как использовать Google Imagen для создания рекламных визуалов под несколько форматов

Как использовать Google Imagen для создания рекламных визуалов под несколько форматов

Пошаговая инструкция: как через Google Imagen создать рекламные визуалы под 1:1, 16:9 и 9:16, подготовить варианты для аудиторий и собрать набор для A/B-теста.

A/B тест performance-реклама пошаговая инструкция

Инструменты

Связанные инструменты

Оплата по использованию токенов Anthropic Claude API

API моделей Claude для AI-приложений: текст, reasoning, длинный контекст, анализ документов, tool use, агенты и production-интеграции.

Доступ зависит от Canva platform и developer-настроек Canva Connect API

API Canva для интеграции с дизайнами, шаблонами, ассетами, брендовыми материалами, экспортом и автоматизацией маркетинговых визуалов.

Бесплатный старт + оплата по использованию Claude

Семейство моделей Anthropic Claude для анализа больших документов, аккуратной редакции, ресерча, кода и рабочих ассистентов.

Google Cloud usage-based pricing Google Cloud Vision API

API Google Cloud Vision для OCR, распознавания текста и анализа изображений.

Free API / Google Workspace Google Docs API

API Google Docs для AI-агентов: создание, чтение, редактура, шаблоны, comments, approvals и документные workflow.

Usage-based / Google Cloud Google Document AI

Google Document AI помогает извлекать данные из документов: счетов, актов, договоров, форм, PDF и сканов. Его удобно использовать как слой распознавания перед RAG, CRM, ERP или внутренним документооборотом.