By Mehdi HassanWhat does a Next.js site need for good SEO?
A Next.js site needs server-rendered content, complete metadata from the Metadata API, a generated sitemap and robots file, structured data in the HTML, and correct status codes for redirects and missing pages. The App Router has a built-in convention for each of these, so good Next.js SEO is mostly a matter of using them consistently.
This checklist is part of our guide to Next.js for marketing websites. It's written for the App Router in 2026 and ordered the way we work through a launch. Each item says what to set and the mistake we see most often.
Area | App Router tool | Common mistake |
|---|---|---|
Rendering | Server Components, generateStaticParams | Key content fetched in the browser after load |
Titles and descriptions | metadata, generateMetadata, title.template | Same title on every page |
Canonicals | alternates.canonical with metadataBase | Relative or missing canonicals, or all pointing home |
Sitemap | sitemap.ts, generateSitemaps for large sites | Hand-written file missing new pages |
Robots | robots.ts | Staging rules shipped to production |
Structured data | JSON-LD script tag in the page | Schema describing content not on the page |
Social previews | openGraph fields, opengraph-image files | No image, or one generic image everywhere |
Status codes | notFound(), permanentRedirect(), redirects config | Missing pages returning 200 with an empty template |
Which rendering setup is best for Next.js SEO?
Static rendering is best for Next.js SEO on marketing pages: content is in the HTML at build time, served instantly from a cache, and readable by every crawler. Server rendering is fine when a page needs request-time data. Client-only rendering for primary content is the one setup to avoid.
Our research found that many AI crawlers don't run JavaScript, so anything assembled in the browser may never be seen by them. In practice, keep pages as Server Components, prerender CMS pages with generateStaticParams, and use on-demand revalidation when editors publish. Interactive widgets can still be client components, as long as the text that matters is rendered on the server. Our guide to static vs server rendering in Next.js covers each page type.
What is the Next.js SEO checklist for launch?
Work through this Next.js SEO checklist in order before launch, because later items depend on earlier ones. Canonicals need metadataBase, the sitemap needs final routes, and structured data needs final content.
Set metadataBase and a title template
In the root layout, set metadataBase to your production URL so all metadata URLs resolve as absolute, and a title template such as "%s | Brand" so page titles stay consistent.
Write generateMetadata for every dynamic route
Pull the title, description and Open Graph fields from the CMS for each page. Give editors dedicated SEO fields with sensible fallbacks, not just the page heading.
Add self-referencing canonicals
Return alternates.canonical as the page's own clean URL, without tracking parameters. For multilingual sites, add alternates.languages for hreflang.
Generate sitemap.ts
Build the sitemap from the same CMS queries that generate routes, with lastModified dates. Split very large sites with generateSitemaps.
Generate robots.ts
Allow the crawlers you want, including AI search crawlers if you want to be cited, point to the sitemap, and make sure the production file differs from staging.
Add JSON-LD
Render Organization, Article or Product data as a script tag of type application/ld+json inside the page component, built from the same data shown on the page.
Fix status codes
Call notFound() for missing slugs, use permanentRedirect() or the redirects config for moved pages, and check the custom 404 returns a real 404.
Verify in the rendered HTML
View source on production for a few page types and confirm the title, canonical, robots meta, structured data and content are all present without JavaScript.
How should you handle Next.js metadata API details?
Handle the Next.js Metadata API by defining defaults once in the root layout and overriding them per page with generateMetadata. Metadata is merged from layouts down to pages, so shared settings live at the top and page-specific fields at the bottom.
- Titles. Keep them specific per page; the template adds the brand. Avoid duplicating the brand inside each page title.
- Descriptions. Write one per page in the CMS. Fall back to a page summary field, never to the same site-wide sentence.
- Open Graph and social images. Use an opengraph-image file per route segment, or generate images from page data, so shared links show the right title.
- Robots per page. Set robots: noindex on thank-you pages, internal search results and thin utility pages rather than blocking them in robots.txt.
- Data fetching. Fetch requests in generateMetadata and the page are deduplicated, so you don't pay twice for the same CMS query.
How do you set up a Next.js sitemap and structured data?
Set up the Next.js sitemap by exporting a function from app/sitemap.ts that returns every indexable URL with its last-modified date, built from the same source as your routes. Set up structured data by rendering JSON-LD in each page from the page's own data.
Exclude noindex pages, redirects and paginated duplicates from the sitemap, and include localized alternates if you run several languages. Our guide to Next.js i18n shows the multilingual version. For large generated sections, such as integrations or templates, our guide to programmatic SEO with Next.js covers splitting sitemaps and avoiding thin pages.
For structured data, use the types defined at schema.org that match what's actually on the page: Organization on the home page, Article with an author on posts, BreadcrumbList on deep pages, FAQPage where a visible FAQ exists. Keep expectations realistic. Ahrefs' controlled test found no significant AI citation lift from adding schema, and Google says no special markup is needed for its AI features. Schema is hygiene for rich results and parsing, not a ranking shortcut.
Hypothetical example: auditing a Next.js site that isn't ranking
For example, suppose a startup's Next.js site has been live for months and almost none of its feature pages appear in search.
Viewing source shows the cause quickly. Each feature page fetches its content in a client component after load, so the server HTML contains only a header, a footer and a loading skeleton. Every page also shares the same title and description from the root layout, and the canonical on every page points to the home page because it was hard-coded.
The fixes are all standard App Router conventions: move the content fetch into the Server Component and prerender with generateStaticParams, add generateMetadata reading SEO fields from the CMS, and return a self-referencing canonical per page. None of this required a new framework; it required using the one they had as designed.
How does performance affect Next.js SEO?
Performance affects Next.js SEO through Core Web Vitals and through the plain fact that slow pages lose visitors before they read anything. Next.js gives you good tools, but sites still fail, most often on Interaction to Next Paint.
Core Web Vitals field data for Q2 2026 in our research shows only about two-thirds of Next.js sites pass INP, with a median around 236ms. The usual causes are heavy hydration, large client components and third-party scripts. Our guide to improving INP on Next.js sites covers the fixes, and our explainer on next/image, fonts and scripts covers images, fonts and script loading. To see how Next.js compares with other platforms, read our Core Web Vitals guide for Framer, Webflow and Next.js.
