How to Make Next.js SEO-Friendly: The Complete 2026 Checklist

Next.js is one of the best frameworks for SEO, but only if you use it correctly. The framework gives you server rendering, fast pages and a clean metadata system, yet plenty of Next.js sites still rank poorly because the SEO basics were skipped. This is the exact checklist I use to make a Next.js site rank on Google and get cited by AI search engines like ChatGPT and Perplexity.

It is code-first and current for Next.js 15 and 16 with the App Router. Work through it top to bottom and your site will cover technical SEO, on-page SEO, Core Web Vitals, and the newer AEO and GEO layers.

Is Next.js good for SEO?

Yes. Next.js is good for SEO because it renders your pages to HTML on the server (SSR) or at build time (SSG), so search engine crawlers receive fully formed content instead of a blank page that needs JavaScript to fill in. A plain client-side React app (like Create React App) ships an near-empty HTML shell, which crawlers and AI bots handle poorly. Next.js solves that by default.

How does Next.js help with SEO, specifically? It gives you four things that used to require plugins or manual work: server rendering, a built-in Metadata API, file-based sitemap and robots generation, and image and font optimization. The rest of this guide is how to use each one.

1. Choose the right rendering strategy

Rendering is the foundation of Next.js SEO. Pick the strategy per page based on how often the content changes:

In the App Router, a page is static by default. Add generateStaticParams for dynamic routes you want pre-rendered, and only reach for client components ("use client") for interactive islands, not whole pages.

2. Set metadata on every page

The App Router Metadata API replaces react-helmet and manual head tags. Export a metadata object (static) or a generateMetadata function (dynamic) from each page. At minimum, set a unique title and description per page, a canonical URL, and Open Graph fields for social sharing.

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `https://yoursite.com/blog/${post.slug}` },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: "article",
      url: `https://yoursite.com/blog/${post.slug}`,
    },
  };
}

Set a title template once in your root layout so every page gets a consistent brand suffix, and define metadataBase so relative Open Graph image URLs resolve correctly.

// app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL("https://yoursite.com"),
  title: { default: "Your Brand", template: "%s | Your Brand" },
  description: "What your site does, in one clear sentence.",
};

3. Generate a sitemap and robots.txt

Next.js generates both from code, no plugin needed. Add app/sitemap.ts to list every URL, and app/robots.ts to allow crawling and point to the sitemap. These are the two files Google Search Console asks for first.

// app/sitemap.ts
import type { MetadataRoute } from "next";
export default function sitemap(): MetadataRoute.Sitemap {
  const base = "https://yoursite.com";
  const pages = ["", "/about", "/blog"].map((p) => ({
    url: base + p,
    lastModified: new Date(),
    changeFrequency: "weekly" as const,
    priority: p === "" ? 1 : 0.8,
  }));
  return pages; // spread in your dynamic blog/product URLs too
}

// app/robots.ts
import type { MetadataRoute } from "next";
export default function robots(): MetadataRoute.Robots {
  return {
    rules: { userAgent: "*", allow: "/" },
    sitemap: "https://yoursite.com/sitemap.xml",
  };
}

4. Add structured data (JSON-LD)

Structured data is how you tell Google and AI engines what a page is about in a machine-readable way. It powers rich results (star ratings, FAQ dropdowns, article cards) and it is one of the strongest signals for GEO, getting cited by AI search. Add JSON-LD with a script tag in the relevant page.

const articleSchema = {
  "@context": "https://schema.org",
  "@type": "Article",
  headline: post.title,
  datePublished: post.date,
  author: { "@type": "Person", name: "Your Name" },
};

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(articleSchema) }}
/>

Use the schema type that matches the page: Article or BlogPosting for posts, Product for products, FAQPage for FAQs, Person and WebSite for your homepage, and BreadcrumbList for navigation. Validate everything with Google's Rich Results Test before you ship.

5. Nail Core Web Vitals and page speed

Speed is a ranking factor and a conversion factor. Next.js gives you the tools, you just have to use them:

• •Use next/image for automatic resizing, lazy-loading and modern formats (AVIF/WebP). Always set width and height to avoid layout shift (CLS).
• •Use next/font to self-host Google fonts, which removes render-blocking requests and font layout shift.
• •Keep client bundles small: default to server components, and only mark interactive pieces with "use client".
• •Preload the hero image and avoid huge above-the-fold JavaScript so LCP stays under 2.5 seconds.
• •Lazy-load below-the-fold widgets (carousels, maps, chat) with next/dynamic.

6. Get the on-page SEO basics right

The framework can't write good content for you. On every page, cover the on-page fundamentals:

1. 1.One clear H1 per page that includes the primary keyword.
2. 2.A logical heading hierarchy (H2s for sections, H3s for sub-points) so both readers and crawlers can scan.
3. 3.Descriptive, keyword-relevant slugs (/how-to-make-nextjs-seo-friendly, not /post?id=42).
4. 4.Internal links between related pages, with descriptive anchor text.
5. 5.Descriptive alt text on meaningful images.

7. Optimize for AI search (AEO and GEO)

Ranking on Google is no longer the whole game. AEO (Answer Engine Optimization) is about being the answer AI assistants read out, and GEO (Generative Engine Optimization) is about getting cited inside ChatGPT, Gemini and Perplexity responses. Next.js is well suited to both because your content is in clean server-rendered HTML.

• •Write answer-first: put a direct, one or two sentence answer right under each heading, then expand. AI models lift these.
• •Add an FAQ section with real questions, and back it with FAQPage structured data.
• •State facts plainly and specifically (numbers, definitions, comparisons) so models can quote you with confidence.
• •Keep a clear author and publish date, and use Person and Organization schema, AI engines weigh source credibility.
• •Make sure robots.txt does not block AI crawlers (GPTBot, ClaudeBot, PerplexityBot, Google-Extended) if you want to be cited.

Next.js gives AEO and GEO a head start because your content is already clean, server-rendered HTML that AI crawlers can read. For the full playbook, including exactly how to structure answers and which crawlers to allow, see the dedicated guide on getting cited by ChatGPT and AI search.

8. Verify and monitor

SEO is not set-and-forget. After you ship, verify the site in Google Search Console, submit the sitemap, and watch three things: indexing coverage (are pages actually indexed), Core Web Vitals (are they in the green), and the queries you rank for. Fix what regresses, and expand the content that gains traction.

The short version

Making Next.js SEO-friendly comes down to: render real HTML on the server, set metadata on every page, generate a sitemap and robots.txt, add structured data, keep Core Web Vitals green, write solid on-page content, and layer in AEO and GEO so AI engines cite you. Do those eight things and you are ahead of most sites in your niche.

The framework does the heavy lifting, but the wins come from actually using it: real HTML on the server, metadata on every page, and structured data that AI engines can read. Work through this checklist once and it becomes second nature on every project after.