Next.js SEO Checklist: Rank Your App Router Pages

Next.js gives you the tools for great SEO, but ranking is still a checklist of decisions you make per page. Work through these before you ship — most target the App Router and its Metadata API.

Metadata API

Set metadataBase in the root layout so relative URLs (canonical, OG images) resolve to absolute ones.
Unique title & description per page — use a title.template in the layout and override per route.
Use generateMetadata for dynamic routes so every page gets real, specific metadata.
Add Open Graph & Twitter tags with a representative image for rich social previews.

Rendering mode

Render primary content on the server — SSG, ISR, or SSR — never client-only for content you want indexed.
Static (SSG) for stable pages; ISR to refresh them without a full rebuild.
SSR for request-specific content that must be fresh per visit.
Keep 'use client' at the leaves so pages stay server-rendered for crawlers.

Practice this

Build real Next.js apps

Practice routing, rendering, and metadata in a full IDE with automated grading.

Practice Next.js

URLs & canonicals

Clean, descriptive routes — readable slugs, no query-string-only pages for content.
Set a canonical via alternates.canonical on every indexable page.
Be consistent with trailing slashes and casing to avoid duplicate URLs.
Redirect old paths with 301s in next.config or middleware.

Sitemap & robots

Ship a sitemap.ts listing indexable pages with sensible priorities and change frequencies.
Add robots.ts — allow public pages, disallow app/admin/auth routes.
Submit the sitemap in Search Console and monitor coverage.

Core Web Vitals

Use next/image for sized, lazy-loaded, modern-format images (helps LCP and CLS).
Use next/font to self-host fonts and avoid layout shift.
Keep the main thread light — defer non-critical client JS; watch INP.

Structured data

Add JSON-LD for the page type — Article, FAQ, Breadcrumb, Product — via a script tag.
Match visible content — structured data must reflect what’s on the page.
Validate with the Rich Results Test before shipping.

Pre-ship checklist

metadataBase set; unique title + description per page
Content server-rendered (SSG/ISR/SSR)
Canonical on every indexable page
sitemap.ts and robots.ts present and correct
next/image + next/font; Web Vitals green
Relevant JSON-LD added and validated

FAQ

Does Next.js handle SEO automatically?

Partly. The App Router gives you server rendering and a Metadata API, but you still choose the rendering mode, set titles and descriptions, add canonicals, ship a sitemap and robots file, and add structured data. The framework makes good SEO possible, not automatic.

Should I use SSG, SSR, or ISR for SEO?

All three are crawlable because the HTML is rendered on the server. Use static generation for content that rarely changes, ISR to keep static pages fresh, and SSR when content is request-specific. Avoid rendering primary content only on the client.

How do I set canonical URLs in Next.js?

Use the Metadata API's alternates.canonical, either per page or generated in generateMetadata, and set metadataBase in your root layout so relative canonicals resolve to absolute URLs.

Getting Next.js SEO right