Next.js SEO best practices (App Router, 2026)
Server components, metadata API, structured data, sitemaps, robots — the App Router SEO checklist for production teams.
Next.js App Router gives you first-class primitives for SEO. The mistakes we see are almost always 'doing too much in client components' or 'forgetting that metadata cascades'.
The Metadata API
Export metadata or generateMetadata per route. Cascade defaults from the root layout. Use alternates.canonical on every dynamic route.
sitemap.ts and robots.ts
Generate both from your data layer. Cache them with the route segment config. Submit to Search Console and Bing.
JSON-LD
Render JSON-LD in a Server Component — it ships in the initial HTML, which is what crawlers prefer. Avoid client-side schema injection.
Images
Use next/image with explicit width and height. Set priority on the LCP image. Serve AVIF/WebP via the built-in optimizer or a CDN.
Internationalization
Use hreflang via the alternates field. Avoid translating slugs unless you have a good reason — it complicates redirects and analytics.
Frequently asked questions
- Are client components bad for SEO?
- Not inherently. Just make sure the primary content renders server-side.
- Do I need a custom head component?
- No. The Metadata API replaces it.
- Should I prerender or stream?
- Prerender for content pages. Stream for dashboards.