Technical SEO for Next.js Websites

Overview

Quick answer: Next.js sites rank well when pages are server-rendered or statically generated so content exists in the HTML, the Metadata API sets correct titles and canonicals, redirects are handled at the framework level, images go through next/image with real alt text, and the sitemap and structured data are generated from the same content source as the pages.

Next.js gives you every tool technical SEO needs, but none of them are automatic. This is the checklist we work through when building sites — including this one — on the framework.

Rendering: content must exist in the HTML

The single most important decision is how pages render. Static generation or server rendering puts the full content in the HTML response, which is what search engines index reliably. Content that only appears after client-side JavaScript runs — data fetched in useEffect, client-only components holding the main copy — may be indexed late, partially, or not at all.

The practical rule: marketing pages, service pages, and blog posts should be statically generated. Interactive widgets can hydrate on the client, but the words you want to rank for belong in the server response. View source on any important page; if the copy is not there, neither is the ranking.

Metadata API: titles, descriptions, canonicals

The App Router's Metadata API handles titles, descriptions, Open Graph tags, and canonical URLs, but each page needs it wired up — dynamic routes should generate metadata from their content, not fall back to a sitewide default. The most common gaps we see in Next.js audits are missing canonical URLs, duplicate titles across dynamic pages, and OG images that were never set.

Centralize the logic in a helper that takes a title, description, and path and returns the full metadata object. One function, used by every page, keeps the whole site consistent.

Routing, redirects, and canonical host

Handle redirects in next.config or middleware so they return proper 301 status codes — client-side redirects are invisible to crawlers. Pick one canonical host, www or bare domain, and redirect the other at the platform level. For dynamic routes, decide what happens to unknown slugs: a prebuilt 404 is better than an empty template rendering for garbage URLs.

Images: next/image is only half the job

The component handles sizing, lazy loading, and modern formats, which protects Core Web Vitals. What it cannot do is write alt text or choose meaningful filenames — those still carry ranking and accessibility weight. Set explicit width and height everywhere to prevent layout shift, and mark the hero image on each page as priority so the largest paint happens fast.

Sitemap, robots, and structured data from one source

The App Router lets sitemap.ts and robots.ts generate from code. The important discipline is generating the sitemap from the same content source that generates the pages, so a new blog post or service page appears in the sitemap automatically and deleted pages fall out. Hand-maintained sitemaps drift.

Structured data — Organization, LocalBusiness, BreadcrumbList, FAQPage, BlogPosting — should be rendered as JSON-LD script tags built from the same data as the page. When the FAQ schema and the visible FAQs come from one array, they cannot contradict each other.

Verify after deployment, not just in dev

The dev server hides a class of problems that only exist in production: redirect behavior, canonical host, response headers, and how the deployed pages actually render. After launch, fetch key pages as a crawler would, run them through Google's rich results test, submit the sitemap in Search Console, and watch indexing for the first few weeks.

Technical SEO on Next.js is mostly a matter of doing ordinary things deliberately. If you want the framework handled by people who build on it daily, that is what our web development and SEO services cover, and the broader planning side is in our guide to SEO in web development.