Изображение в SEO-статье должно объяснять то, что словами пришлось бы описывать дольше: последовательность, сравнение, структуру или контрольный список. Для малого сайта полезнее три осмысленные схемы, чем десять одинаковых фотографий ноутбука. Ниже — процесс от выбора сюжета до проверки файла после публикации.
Определите задачу изображения до дизайна
Сначала закончите структуру статьи и отметьте места, где читателю нужен визуальный ориентир. Обложка помогает узнать тему. Иллюстрация внутри материала может показать этапы, сравнить варианты, собрать критерии или напомнить порядок проверки. Если картинка не добавляет отдельной мысли, она занимает место и замедляет страницу.
Для инструкции подойдёт схема процесса. Для сравнения — таблица или карточки с одинаковыми критериями. Для диагностического материала — дерево причин или чек-лист. Снимок интерфейса полезен, когда человек должен найти конкретный элемент, но быстро устаревает и требует аккуратно скрыть личные данные.
Не начинайте с запроса «нарисовать что-нибудь про SEO». Сформулируйте одно предложение: что читатель поймёт по изображению за несколько секунд. Это станет техническим заданием и для дизайнера, и для генератора.
Выберите количество и расположение без визуального шума
Универсальной нормы нет. На «Сайт в плюс» используется три изображения: обложка после первого содержательного абзаца и две схемы в разных частях текста. Такой формат задаёт ритм, но не обязан подходить каждой странице.
Располагайте иллюстрацию после объяснения, к которому она относится, либо перед сложным шагом как карту. Не ставьте несколько крупных изображений подряд. На телефоне они превратятся в длинную полосу, а смысловая связь с текстом потеряется.
Обложка должна работать в карточке блога и при публикации ссылки. Не помещайте на неё длинный подзаголовок, мелкие пункты и важные детали по краям. Внутренние схемы можно сделать насыщеннее, но текст обязан читаться без увеличения.
Назовите файл понятно и без набора ключей
Имя файла помогает команде сопровождать сайт и даёт поисковой системе дополнительный контекст. Используйте коротую латиницу, дефисы и описание сюжета: proverka-vnutrennih-ssylok.webp понятнее, чем IMG_4837.webp или строка из десяти ключевых слов.
Имя должно отличать изображения друг от друга. Если в статье есть обложка, схема и чек-лист, отразите это в названиях. Не переименовывайте расширение вручную: файл с окончанием .webp должен действительно быть WebP.
Избегайте дат и версий, которые быстро потеряют смысл, если они не нужны для учёта. Для серийной публикации допустим внутренний номер, но публичное имя всё равно желательно связать с содержанием.
Напишите alt как замену изображения
Атрибут alt передаёт смысл изображения, когда человек использует экранный диктор или файл не загрузился. Он также помогает поисковой системе понять визуальный контент. Хороший alt описывает значимую информацию, а не перечисляет ключевые слова.
Для схемы можно написать: «Этапы подготовки статьи: тема, структура, текст и проверка». Для сравнительной иллюстрации: «Сравнение декоративной фотографии и смысловой схемы в статье». Если картинка чисто декоративная и ничего не сообщает, обычно используют пустой alt, но в содержательной статье лучше сначала спросить, нужна ли такая картинка вообще.
Не начинайте каждый alt со слов «изображение» или «картинка». Не копируйте H1 и не повторяйте один запрос во всех трёх файлах. Опишите различие: что именно показано и какую часть материала оно поясняет.
Выберите размер, формат и степень сжатия
Размер изображения состоит из ширины и высоты в пикселях, а вес — из количества данных в файле. Большая фотография может быть визуально подходящей, но слишком тяжёлой для страницы. Сначала определите максимальный размер показа, затем экспортируйте близкий по пропорциям файл и сожмите его без заметной потери качества.
WebP часто даёт хороший баланс качества и веса для веба. PNG остаётся полезным для прозрачности и некоторых схем, JPEG — для фотографий, если он уже хорошо оптимизирован. Выбор формата не должен становиться религией: сравните итоговый вес и качество на реальном изображении.
Указывайте в HTML реальные width и height. Браузер сможет заранее зарезервировать место, и страница будет меньше прыгать при загрузке. Не растягивайте маленький исходник до большого баннера: резкость не появится, а впечатление от статьи ухудшится.
Настройте загрузку и доступность
Для изображений ниже первого экрана подходит встроенная ленивая загрузка loading="lazy". Обложку, которая видна сразу, не стоит бездумно откладывать: она участвует в первом экране. Важно, чтобы URL находился в обычном атрибуте src и файл загружался без действия пользователя.
Добавьте decoding="async" там, где это соответствует шаблону сайта. Проверьте контраст текста на схеме, размер шрифта и отсутствие информации, переданной только цветом. Красная и зелёная карточки без подписей могут быть непонятны части аудитории.
Подпись под изображением нужна, когда она добавляет источник, ограничение или вывод. Не дублируйте alt в подписи слово в слово: alt заменяет изображение, а подпись работает в видимом тексте.
Не публикуйте ложные графики и случайные иллюстрации
График воспринимается как данные, даже если дизайнер нарисовал его для красоты. Не показывайте растущую линию без реальных измерений и подписи источника. Числа, проценты и результаты на изображении должны иметь то же подтверждение, что и утверждения в тексте.
Осторожно используйте лица, логотипы и интерфейсы. Для реального человека нужно разрешение на использование фотографии. Чужой логотип не превращает схему в доказательство. Скриншот кабинета может содержать имя, почту, баланс, токены или другие сведения, которые нельзя публиковать.
Типичная декоративная ошибка — робот у монитора рядом с любым материалом об ИИ. Такая картинка не помогает выполнить действие и делает разные статьи неотличимыми. Лучше показать схему проверки фактов, состав страницы или путь читателя.
Свяжите изображения с SEO и GEO без обещаний
Поисковая оптимизация изображений начинается с доступной страницы, понятного окружения, рабочего URL, подходящего имени и alt. Официальные рекомендации Google советуют размещать изображения рядом с релевантным текстом и добавлять описательные альтернативные подписи. Это помогает понять содержание, но не гарантирует отдельного трафика или позиций.
Для генеративных систем смысловая схема может сделать материал яснее человеку, однако обещать цитирование по одному alt или формату нельзя. Основной ответ должен оставаться в тексте HTML. Не прячьте критически важную инструкцию только внутрь картинки: поисковые и вспомогательные технологии должны получить её в доступной форме.
При подготовке всей страницы полезно свериться со статьёй о поиске и ответах нейросетей, а структуру мест для иллюстраций определить по каркасу полезной SEO-статьи.
Проверьте изображение до и после публикации
До загрузки откройте каждый файл отдельно и проверьте размер, формат, вес, обрезку и орфографию. Затем просмотрите страницу на широком экране и телефоне. Текст на схеме должен читаться, изображение не должно вызывать горизонтальную прокрутку, а подпись — отрываться от своего блока.
После публикации проверьте прямой URL изображения и ответ сервера 200. Убедитесь, что обложка указана в Open Graph и Twitter Card, а в разметке Article перечислены реальные изображения страницы. Откройте исходный HTML и посмотрите, совпадают ли src, alt, width и height с задуманными значениями.
Через некоторое время оценивайте не только показы картинок, но и пользу страницы целиком. Если иллюстрация устарела, замените файл и при необходимости обновите дату материала. Если она не помогает понять раздел, удаление может быть лучшим улучшением.
Источники и ограничения
Рекомендации по окружению изображения, описательному alt и доступности файла основаны на руководстве Google Images. Правила ленивой загрузки дополнены документацией Google по lazy-loading.
Формат, размер и качество нужно подбирать под конкретный сайт. Даже идеально оформленная картинка не компенсирует слабый ответ, медленный сервер или страницу, закрытую от обхода.
Если Вам нужен инструмент, который помогает пройти путь от темы до черновика статьи, можно рассмотреть сервис «0 рублей». Изображения, факты и готовый текст всё равно нужно проверить перед публикацией.
Материал содержит партнёрскую ссылку. Если Вы зарегистрируетесь по ней и оплатите любой тариф, сервис автоматически начислит одну статью в подарок. Проект может получить вознаграждение без доплаты с Вашей стороны; это не влияет на содержание материала.
Частые вопросы
Сколько изображений нужно для SEO-статьи?
Столько, сколько помогает раскрыть тему. Для проекта может быть установлен единый формат, но поисковая система не требует фиксированного числа картинок.
Нужно ли добавлять ключевой запрос в каждый alt?
Нет. Описывайте конкретное изображение естественно. Одинаковый ключ во всех alt ухудшает ясность и выглядит как формальное заполнение.
Какой формат лучше: WebP, PNG или JPEG?
Сравните качество и вес. WebP часто удобен для сайта, PNG нужен для прозрачности и отдельных схем, JPEG подходит фотографиям. Важен итоговый файл, а не название формата.
Можно ли использовать изображения, созданные ИИ?
Можно, если они не вводят в заблуждение, не нарушают права и действительно объясняют материал. Текст, цифры, лица и бренды требуют особенно внимательной проверки.
Нужно ли заполнять title у изображения?
Для доступности важнее содержательный alt. Атрибут title не заменяет его и обычно не нужен для передачи основной информации.
Почему картинка не появляется в поиске?
Причин много: от недоступного URL и слабого контекста до времени повторного обхода. Наличие файла и alt не создаёт гарантии показа.
Для кадров интерфейса отдельно проверьте выбор состояния, скрытие данных и подпись скриншота. Публичная копия должна сохранять контекст действия и проходить проверку после экспорта.