
Technical SEO for Next.js: A Practitioner's Checklist
Next js seo best practices for App Router teams: metadata API, indexable HTML, sitemaps, Core Web Vitals, and a checklist you can ship this sprint.
Shipping on Next.js does not mean you shipped next js seo best practices. App Router gives you the primitives. Teams still lose rankings to client-only shells, thin metadata, broken canonicals, and Core Web Vitals that only look good on localhost.
This next js seo checklist is what SaaS product teams should verify before they blame the content calendar.
Start with indexable HTML
Search and AI crawlers need real content in the first response. Prefer Server Components and static or server-rendered HTML for money pages, product pages, and blog posts. If critical copy only appears after a client fetch, you are gambling on how bots execute JavaScript.
Practical checks:
- View source (or curl) the live URL. The H1, primary claims, and pricing cues should be present without waiting on hydration.
- Keep marketing pages out of pure client wrappers unless there is a hard product reason.
- Use streaming carefully. Do not stream emptiness where the answer should be.
Crawlability beats clever client state for SEO.
Next js seo metadata that actually ships
Use the App Router Metadata API (metadata / generateMetadata) as the source of truth. One title, one description, one canonical per URL. Do not leave defaults that say "Create Next App."
A solid next js seo metadata pass covers:
- Unique titles and descriptions per route (not a shared layout dump)
alternates.canonicalthat matches the preferred host and path- Open Graph and Twitter cards that match the on-page promise
robotsfields when a route should stay out of the index (previews, internal tools, thin filters)- Absolute image URLs for OG assets so social scrapers do not guess
Dynamic routes need generateMetadata with real data, not a template that always returns the product name alone. If two URLs share the same title and description, Search Console will eventually show it.
Sitemap, robots, and URL hygiene
Treat discovery as product work:
- Ship
app/sitemap.ts(or equivalent) that lists indexable URLs only - Keep
robots.txtaligned with what you actually want crawled - Avoid soft-404 patterns: empty search results and filter URLs that return 200 with no substance
- Prefer clean paths over query-string forests for primary content
- Redirect once, to HTTPS, and to one host (www or apex)
If staging or preview hosts are indexable, fix that before you write another blog post.
Core Web Vitals on production, not staging
Next js seo best practices include performance you can measure in the field:
- LCP: prioritize the real hero image or text; avoid late font and image discovery
- INP: keep main-thread work down on interactive marketing pages (INP replaced FID)
- CLS: reserve space for images, embeds, and late-loading UI
Use next/image, modern formats, and sensible caching headers. Lab scores on a quiet staging box do not replace CrUX or Search Console experience reports.
Structured data without theater
Add JSON-LD that matches visible content: Organization, SoftwareApplication, Article, BreadcrumbList when those entities are real on the page. Skip retired rich-result gimmicks and FAQ markup that does not appear in the UI.
Validate with Rich Results tools and by reading the page as a human. Schema that lies loses trust with people and models.
A sprint-ready next js seo checklist
- Money pages render primary content in HTML without client-only shells
- Every indexable route has unique title, description, and canonical via Metadata API
- Sitemap and robots match the live indexable set
- Preview and staging hosts are blocked from indexing
- Core Web Vitals checked on production for key templates
- Honest structured data on pages that earn it
- Internal links and IA make entity and product names consistent
- Search Console coverage and experience reports reviewed after deploys
That is the work that compounds. Keyword research still matters, but it cannot rescue a Next.js site that fails the basics.
STRS Dev builds high-performance websites on Next.js with technical SEO, Core Web Vitals discipline, and structured data that matches what buyers see. If your App Router stack ships features faster than it ships crawlable pages, start with this checklist.