Choosing Next.js was a smart move for SEO, but the framework will not write your titles or fix slow images for you. This checklist is built on the official Next.js documentation plus three practitioner guides (FocusReactive, Wisp and Webkul). Where a guide's advice conflicted with the official docs, we followed the docs. If you are still deciding on a stack, read Next.js vs React first.
Key takeaways
- Use the Metadata API (a static
metadataobject orgenerateMetadata) on every route, in Server Components. - Generate
sitemap.xmlandrobots.txtwith the built-in file conventions, but never block_next/static. - Add JSON-LD structured data yourself; the App Router has no built-in helper.
- Choose the rendering mode by content type and protect Core Web Vitals with the image and font tools.
1. Unique Title and Description on Every Page
The official docs describe two ways to define metadata: export a static metadata object from a layout or page, or export a generateMetadata function that fetches data, ideal for blog posts and product pages. Next.js turns these into the right <head> tags, and they are supported in Server Components only. Webkul recommends a root title template and metadataBase so titles and absolute URLs stay consistent. If the page and its metadata need the same data, the docs suggest memoising the fetch with React's cache so it runs only once.
2. Understand Streaming Metadata
For dynamically rendered pages, Next.js can stream metadata in after the first UI so users see content sooner. The docs note this is disabled for bots that expect metadata in the head (such as Bingbot and social crawlers), which receive it in the initial HTML, and that prerendered pages resolve metadata at build time. You can adjust this with the htmlLimitedBots option.
3. Clean, Descriptive URLs
File-based routing makes readable slugs easy: /blog/nextjs-seo-best-practices beats an ID or query string. Keep one logical hierarchy and use a single h1 per page, as Webkul advises.
4. Canonical URLs and Language Alternates
FocusReactive points out that the same metadata object sets canonical URLs and hreflang alternates. Dynamic routes and tracking parameters can create duplicates, so set a canonical that points at the preferred version, and avoid changing it often.
5. Sitemap and Robots Files
The docs list sitemap.xml and robots.txt as special metadata files: write them statically or generate them with code, which suits content-heavy sites (for example, a sitemap built from your blog posts with last-modified dates). Block private routes such as cart, checkout and account, but Webkul warns not to block _next/static, since crawlers need those assets to render your pages. Submit the sitemap in Google Search Console and Bing Webmaster Tools.
6. Structured Data (JSON-LD)
FocusReactive notes the App Router has no built-in solution: add a <script type="application/ld+json"> tag with schema.org data, and consider the schema-dts library for TypeScript types. Wisp suggests Article markup with headline, images, dates and author; Webkul adds Product, Offer, Breadcrumb and FAQ markup. Make sure it matches the visible content, which is also Google's guidance for its AI features; see our GEO guide.
7. Choose the Right Rendering Mode
- Static generation: blogs, docs and marketing pages.
- Incremental regeneration: content that changes occasionally.
- Server rendering: real-time or personalised data.
- Client-side rendering: private, user-specific pages only.
Webkul adds a rule of thumb: render content on the server and keep only interactive parts, such as an "Add to cart" button, as Client Components.
8. Optimise Images
Use the built-in image component with descriptive alt text and explicit dimensions to avoid layout shift. Mark the hero image as a priority and use sizes for responsive delivery, while lazy-loading images lower down. Our guide to compressing images helps with the source files.
9. Protect Core Web Vitals
FocusReactive breaks the metrics down: cut server response time and render-blocking resources for First Contentful Paint, optimise images and fonts for Largest Contentful Paint, trim scripts and rely on route-level code splitting for blocking time, and set media dimensions and load fonts early for Cumulative Layout Shift. Use next/font to self-host fonts, and the script component's loading strategy for third-party scripts. A common target is Largest Contentful Paint under 2.5 seconds and layout shift under 0.1; Wisp's checklist cites an older responsiveness metric (FID), which Interaction to Next Paint (INP) has replaced. More in our speed guide.
10. Open Graph and Social Cards
Set Open Graph and Twitter tags so shared links look good, and generate per-page images with an opengraph-image file or the ImageResponse constructor. The official docs use 1200 by 630 pixels in their example and note that only flexbox and a subset of CSS is supported when generating them.
11. Redirects and 404s
FocusReactive notes config-level redirects are fastest for static rules, middleware handles more complex logic and a redirect function is available in server components and route handlers. Use permanent redirects when URLs change, return real 404 status codes for missing pages and avoid chains.
12. Internal Links and Monitoring
Link related pages with descriptive anchor text and keep important pages within a few clicks of the home page. Then watch Search Console, Bing Webmaster Tools and Lighthouse for crawl errors, indexing gaps and regressions. Pages with many impressions and few clicks usually need a better title or snippet.
A Note on Sources
Some guides we read use outdated APIs (for example next/head, which belongs to the older Pages Router) or give unsourced numeric targets. Always confirm API details against the current official docs for your Next.js version.
Final Word
Next.js makes technical SEO easier, not automatic. If you want a site that is built correctly from the first commit, Node-devs delivers Next.js websites with SEO, performance and accessibility baked in. Planning a relaunch? See our website redesign checklist.
References and further reading
This guide was compiled from the sources below. We compared them, kept the points they agree on and wrote the article in our own words. Check the originals for more detail.
- Metadata and OG images (Next.js documentation)
- Next.js App Router SEO guide (FocusReactive)
- SEO checklist for Next.js with App Router (Wisp)
- Next.js 16 SEO best practices for modern applications (Webkul)
