A Next.js site is technically ready for SEO when every indexable page is server-rendered, has a unique title, description, canonical URL and one H1, carries JSON-LD structured data, appears in a generated sitemap, and passes Core Web Vitals on mobile. On procol.ai and on this portfolio, I generate all of those from the same content the page renders, so they cannot drift apart.
Does a Next.js site need special SEO work?
Less than most stacks, but not none. Next.js gives you server rendering, route-level code splitting and image optimisation out of the box, which is the shortest path to fast pages. What it does not give you is the layer an SEO plugin provides on WordPress: titles, descriptions, canonicals, schema and sitemaps. You build that layer yourself, once, and every page inherits it.
The checklist
| Item | Why it matters | How to do it in Next.js |
|---|---|---|
| Server rendering | Crawlers get full HTML on the first request | Server Components or static generation. Do not fetch main content in a client effect |
| Unique title and description | Controls the search snippet | generateMetadata per route, from the page's data |
| Canonical URL | Stops duplicate versions splitting signals | alternates.canonical in metadata |
| One H1 per page | Clear topic for readers and crawlers | Enforce it in your page-level components |
| Structured data | Rich results and answer engines | A JSON-LD script per page |
| XML sitemap | Discovery of every page | app/sitemap.ts, generated from your content |
| robots.txt | Crawl rules and sitemap location | app/robots.ts |
| Open Graph and social images | Good link previews on LinkedIn and chat apps | openGraph metadata and an image per page |
| Images | Usually the largest bytes on the page | next/image with sizes set, hero loaded with high priority |
| Redirects | Old URLs keep their value | redirects() in the config, or middleware for patterns |
| Real 404s | Avoids soft 404s in Search Console | notFound() for missing content |
| Trailing slashes | One URL per page | Pick one form and redirect the other |
| llms.txt | A clean summary for answer engines | A route or static file at the root |
How should you render pages for SEO?
Every page on procol.ai is server rendered, so the HTML arrives complete instead of waiting on a client-side bundle. My portfolio runs on TanStack Start rather than Next.js, but the principle is the same: server-side rendering keeps every project page indexable.
The common mistake is a page that renders a shell on the server and loads the real content in the browser. Check with View Source, or with curl, on your key pages. If the headline and body copy are not in the raw HTML, fix that before anything else.
How do you handle metadata at scale?
Generate it from data. On procol.ai, structured data and sitemaps are generated from the same content the pages render. When a new page is built from the component library, its metadata comes with it. For a single page, the free Meta Tag Generator drafts title and description options sized for Google from your page content.
Event and campaign pages deserve their own care. The Procol Nexus 2026 summit page on procol.ai carries its own title plus Open Graph tags so shares on LinkedIn show the right image and headline. Because it ships from the same codebase as the main site, it inherited the SEO setup with no extra work.
Which structured data should a Next.js site include?
Start with what describes your business and your pages honestly:
- Organization or Person, for who is behind the site.
- BreadcrumbList, for the path to each page.
- BlogPosting or Article, for posts.
- ItemList, for listing pages.
- Product, Service or SoftwareApplication, where they fit.
On mohitgoyal.in each page carries its own JSON-LD: Person, CreativeWork, BreadcrumbList and ItemList, and blog posts output BlogPosting. A minimal version in a Next.js page looks like this:
export default function Page() {
const jsonLd = {
"@context": "https://schema.org",
"@type": "BlogPosting",
headline: "Technical SEO checklist for a Next.js website",
author: { "@type": "Person", name: "Mohit Goyal" },
};
return (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
);
}
Validate it with the Rich Results Test before launch.
How do you get cited by AI Overviews and answer engines?
Answer engines quote pages that answer clearly and describe the author consistently. What I do:
- Answer first. The opening paragraph of a page answers its question in two or three sentences, like the one at the top of this post.
- Use question-shaped headings that match how people search.
- Add an FAQ with short, direct answers.
- Keep facts consistent across pages, structured data and profiles.
- Publish an llms.txt. mohitgoyal.in generates a sitemap and an llms.txt file so answer engines can read the profile directly, and both update when the content does.
How do Core Web Vitals fit in?
Speed is part of technical SEO. In Next.js the usual wins are:
next/imagewith correct sizes, and the hero image loaded early.- Self-hosted fonts through
next/font, to avoid layout shift from late font swaps. - Fewer third-party scripts, loaded after the page is interactive.
- Heavy media treated as progressive enhancement. On the Nexus page the full-screen video hero is the heaviest asset, so the page stays usable while it loads.
What should you check before launch?
- 1
View Source on key templates
Home, a service page, a blog post and a listing page. Content, title, canonical and JSON-LD should all be in the HTML.
- 2
Validate structured data
Run the Rich Results Test on each template.
- 3
Check robots and noindex
Production must be indexable. Previews and staging must not be.
- 4
Test redirects
Every old URL returns one 301 to the right new page.
- 5
Submit the sitemap
Add it in Search Console and inspect a few key URLs.
Moving from WordPress? The migration has its own risks, covered in how to move from WordPress to Next.js without losing SEO.
I build Next.js sites with this checklist done from day one through my Next.js and React websites service, and audit existing sites through technical SEO and Core Web Vitals.
