Image SEO: turning pictures into traffic

Most teams treat images as a performance problem to contain. That's half the story. Images are also a traffic channel — Google Images, Discover, rich results and AI answers all surface pages through their visuals — and a quality signal: a 2,000-word guide with zero original images reads as thin effort to both users and ranking systems.

Every content page deserves real images

• Unique beats stock, always. An original diagram, an annotated screenshot, a photo of the actual result — these can rank in image search and get your page cited. A stock photo of "business people shaking hands" ranks for nothing and signals template content.
• Google Discover heavily favors pages with large, high-quality images (1200px+ wide) — that's free traffic for content sites.
• Diagrams and screenshots also make your content quotable by AI engines: a page that explains with visuals plus text ranks as a richer source.
• Don't put load-bearing text inside images — crawlers read HTML, and image-only text is invisible to them (and to screen readers).

The mechanics: name, describe, size

<Image
  src="/images/next-seo/isr-revalidation-flow.png" // descriptive kebab-case name
  alt="ISR flow: CMS publish triggers webhook, revalidatePath purges the cache"
  width={1400}
  height={800}
/>

• File names are a ranking input in image search: isr-revalidation-flow.png beats screenshot-final-2.png.
• Alt text describes the image for screen readers and image search. Write what's actually in the picture, keywords only where natural. Empty alt="" is correct for purely decorative images.
• The text around the image (captions, the preceding paragraph) gives it context — Google ranks images largely by their surroundings.

Structured data: own your images

Mark images up with ImageObject — including license and creator gets you the Licensable badge in Google Images, which matters if you produce original visuals:

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",
};

Add images to your sitemap — the App Router's sitemap.ts supports an images array per entry:

{
  url: `${baseUrl}/blog/${post.slug}`,
  images: [`${baseUrl}${post.heroImage}`],
}

AI-generated images: use with care

Generated illustrations are fine for decoration, but label them honestly (IPTC DigitalSourceType metadata is the emerging standard Google reads) and don't use them where first-hand proof matters — a generated "screenshot" of results you never achieved is a trust liability, not an asset. Original screenshots and real diagrams carry the E-E-A-T weight; see Trust and E-E-A-T.

Checklist:

• Every substantial page has at least one unique, content-bearing image
• Descriptive file names and honest alt text; no text locked inside images
• Hero/OG images at 1200px+ for Discover eligibility
• ImageObject schema with license/creator on original visuals
• Images included in the sitemap; AI-generated images labeled, never faking proof