Часть 14 из 22

Image SEO: как превратить картинки в трафик

Большинство команд воспринимает картинки как проблему производительности, которую надо сдерживать. Это половина истории. Изображения — это ещё и канал трафика: 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-изображения маркированы и не имитируют пруфы

01—22

Все темы гайда

  1. 01Стратегия рендеринга: что на самом деле видит краулер?
  2. 02Metadata API: тайтлы, описания и паттерн с шаблоном
  3. 03Canonical и hreflang: одна страница — один адрес
  4. 04Open Graph и динамические OG-картинки
  5. 05sitemap.ts и robots.ts: файловые конвенции вместо рукописного XML
  6. 06Структурированные данные: JSON-LD, который приносит rich results
  7. 07Картинки, шрифты и скрипты: классическое трио производительности
  8. 08Core Web Vitals: три числа, которые измеряет Google
  9. 09Редиректы, 404 и коды ответов
  10. 10Кеширование и свежесть контента
  11. 11AEO/GEO: как попасть в ответы ChatGPT, Perplexity и Google AI Overviews
  12. 12Мониторинг: SEO — это цикл, а не задача на запуск
  13. 13Траст и E-E-A-T: как сделать сайт заслуживающим доверия
  14. 14Image SEO: как превратить картинки в трафик
  15. 15Внутренняя перелинковка и архитектура сайта
  16. 16Поисковые интенты: страницы под то, что люди реально ищут
  17. 17Programmatic SEO в Next.js: страницы в масштабе без спама
  18. 18SEO-миграция: переезд на Next.js без потери трафика
  19. 19Пагинация и фасетная навигация без раздувания индекса
  20. 20Доступность и SEO: одна работа — две награды
  21. 21Угасание контента: обновить, склеить или удалить
  22. 22Off-page для разработчиков: ссылки, которые не покупают

Нужно, чтобы это сделали за вас?

Я провожу аудит и чиню техническое SEO на сайтах Next.js — индексация, скорость, hreflang и видимость в AI.

Услуга «Техническое SEO»