Technical SEO Checklist for Next.js Websites

Why Next.js Is a Good Foundation for SEO

Next.js can render pages on the server or at build time, so search engines and AI crawlers receive complete HTML without running JavaScript. That solves the biggest SEO problem of single-page apps. The framework still leaves plenty to configure correctly, which is what this checklist covers.

Metadata

• Every page exports metadata or uses generateMetadata with a unique title and description.
• Titles are around 60 characters or less, with the main keyword first.
• Descriptions are around 150 to 160 characters and describe what the page offers.
• Open Graph and Twitter tags are set, with a 1200 by 630 pixel PNG or JPG image (social networks do not display SVG).
• Set metadataBase so relative image URLs become absolute.

Canonicals and Duplicates

• Every indexable page has a self-referencing canonical URL on your production host.
• Canonicals do not depend on an environment variable that could be wrong in a preview build.
• One host version wins (for example www over the bare domain), enforced with a permanent redirect.
• Trailing slashes are consistent.

Sitemaps and Robots

• Generate the sitemap with app/sitemap.ts from the same content source as your pages, so new pages are never missed.
• Exclude noindexed pages from the sitemap.
• Generate robots.txt with app/robots.ts, block only private paths, and reference the sitemap.
• Submit the sitemap in Google Search Console and Bing Webmaster Tools.

Structured Data

• Add Organization and WebSite JSON-LD in the root layout.
• Add BreadcrumbList, Service, Article or BlogPosting and FAQPage where they match visible content.
• Render JSON-LD on the server so it is present in the initial HTML.
• Avoid duplicate blocks of the same type on one page.

Google's structured data introduction lists which types it supports.

Rendering

• Prefer static generation for marketing pages and content.
• Make sure important text is in the server-rendered HTML, not only in client components that load later.
• Return real 404 status codes for missing content with notFound().

Internationalisation

• Use hreflang alternates for each language version, plus an x-default.
• Keep each language on its own URL path.

Performance and Core Web Vitals

• Use next/image with explicit sizes so layout does not shift.
• Use next/font to self-host fonts and avoid layout shifts.
• Load heavy client libraries such as 3D or animation code with dynamic imports.
• Measure field data against Google's Core Web Vitals thresholds.

AI Search Readiness

• Allow AI search crawlers in robots.txt if you want to be cited in AI answers.
• Publish an llms.txt summary of your key pages.
• Structure content answer-first with clear headings. See What Is Generative Engine Optimization.

Frequently Asked Questions

Is Next.js good for SEO?

Yes. Server rendering and static generation give crawlers complete HTML, and the Metadata API makes titles, canonicals and social tags straightforward to manage.

Should I use the App Router or Pages Router for SEO?

Both can rank well. The App Router's Metadata API, sitemap.ts and robots.ts make SEO configuration more consistent for new projects.

Do client components hurt SEO?

Client components are still server-rendered on first load. Problems arise only when content is fetched in the browser after the page loads.

How do I check my Next.js SEO setup?

Build the site, inspect the HTML of key pages, validate structured data with Google's Rich Results Test, and monitor Google Search Console. Our technical SEO service can run the audit for you.