Next.js SEO Guide for the App Router: Complete Checklist
A practical Next.js SEO checklist for the App Router: metadata baseline, canonical URLs, sitemap and robots files, social images, indexing control, and how to verify the rendered HTML.
Full-stack React framework
A practical Next.js SEO checklist for the App Router: metadata baseline, canonical URLs, sitemap and robots files, social images, indexing control, and how to verify the rendered HTML.
What generateMetadata does, when it runs, and how to use it for real routes: awaited params, deduplicated data fetching, extending parent metadata, and returning a 404 from metadata.
How canonical URLs work in the Next.js App Router: setting metadataBase once, writing alternates.canonical per route, handling dynamic segments, and what happens when the base URL is missing.
Generate Open Graph images from JSX with ImageResponse in the Next.js App Router: the smallest working file, per-route data, custom fonts, the flexbox-only layout rules, and build versus request time.
How the opengraph-image and twitter-image files work in the Next.js App Router: supported file types, alt text files, which route each image covers, and the precedence rules against metadata.
How Next.js turns favicon, icon, and apple-icon files into link tags: where each file is valid, what the rendered tags contain, how to ship several sizes, and how to generate an icon with code.
Generate a sitemap in the Next.js App Router with the sitemap file convention: the returned fields, real data from a database or CMS, per-section sitemaps, and when the file is built.
Split a large sitemap into numbered files with generateSitemaps in the Next.js App Router: chunking by id, the generated URLs, the missing sitemap index, and how crawlers find the parts.
Create a robots.txt in the Next.js App Router with a static file or a generated one: per-agent rules, crawl delay, host and sitemap lines, and blocking preview environments.
Add JSON-LD structured data to App Router pages: where the script goes, why the payload must be escaped, how to build it from route data, typing it, and validating the result.
How the viewport export and generateViewport work in the Next.js App Router: theme color with light and dark variants, color scheme, scaling options, and why themeColor moved out of metadata.