Большинство команд воспринимает картинки как проблему производительности, которую надо сдерживать. Это половина истории. Изображения — это ещё и канал трафика: Google Картинки, Discover, rich results и AI-ответы находят страницы через визуалы. И сигнал качества: гайд на 2000 слов без единой оригинальной картинки читается как халтура и пользователями, и системами ранжирования.
Каждая контентная страница заслуживает настоящих изображений
- Уникальное всегда бьёт сток. Оригинальная диаграмма, скриншот с пометками, фото реального результата — всё это может ранжироваться в поиске по картинкам и приносить цитирования. Стоковое фото «бизнесмены жмут руки» не ранжируется ни за что и сигналит шаблонный контент.
- Google Discover сильно предпочитает страницы с большими качественными картинками (от 1200px по ширине) — для контентных сайтов это бесплатный трафик.
- Диаграммы и скриншоты делают контент цитируемым для AI-движков: страница, объясняющая визуалом плюс текстом, оценивается как более богатый источник.
- Не прячьте смысловой текст внутрь картинок — краулеры читают HTML, текст-в-картинке для них невидим (как и для скринридеров).
Механика: назвать, описать, задать размер
<Image
src="/images/next-seo/isr-revalidation-flow.png" // говорящее имя в kebab-case
alt="Схема ISR: публикация в CMS дёргает вебхук, revalidatePath сбрасывает кеш"
width={1400}
height={800}
/>
- Имена файлов участвуют в ранжировании поиска по картинкам:
isr-revalidation-flow.pngбьётscreenshot-final-2.png. - Alt-текст описывает картинку для скринридеров и для поиска. Пишите, что реально изображено; ключевые слова — только где естественно. Пустой
alt=""корректен для чисто декоративных изображений. - Текст вокруг картинки (подпись, предыдущий абзац) даёт ей контекст — Google ранжирует изображения во многом по их окружению.
Структурированные данные: застолбите свои изображения
Размечайте картинки через ImageObject — с license и creator вы получаете бейдж Licensable в Google Картинках, что важно, если делаете оригинальные визуалы:
const imageSchema: WithContext<ImageObject> = {
"@context": "https://schema.org",
"@type": "ImageObject",
contentUrl: `${baseUrl}/images/next-seo/isr-revalidation-flow.png`,
creator: { "@type": "Person", name: "Vlad Sedenko" },
license: `${baseUrl}/image-license`,
creditText: "sedenko.net",
};
Добавьте изображения в sitemap — sitemap.ts в App Router поддерживает массив images для каждой записи:
{
url: `${baseUrl}/blog/${post.slug}`,
images: [`${baseUrl}${post.heroImage}`],
}
AI-сгенерированные картинки: осторожно
Сгенерированные иллюстрации годятся для декора, но маркируйте их честно (IPTC-метаданные DigitalSourceType — формирующийся стандарт, который Google уже читает) и не используйте там, где важен пруф из первых рук: сгенерированный «скриншот» результатов, которых вы не достигали, — это удар по трасту, а не актив. Оригинальные скриншоты и настоящие диаграммы несут вес E-E-A-T; см. Траст и E-E-A-T.
Чеклист:
- На каждой значимой странице есть хотя бы одно уникальное содержательное изображение
- Говорящие имена файлов и честный alt; смысловой текст не заперт в картинках
- Hero/OG-картинки от 1200px — для попадания в Discover
- Схема
ImageObjectс лицензией/автором на оригинальных визуалах - Картинки включены в sitemap; AI-изображения маркированы и не имитируют пруфы