SEO for Next.js in 2026: Metadata, Sitemaps and Structured Data Done Right

Next.js gives you most of what technical SEO needs out of the box, but only if you use it deliberately. This guide covers the parts that make the biggest difference on real projects, based on the Next.js 16 App Router documentation and Google's current Search guidance.

1. Get content into the initial HTML

Search engines can run JavaScript, but content that is present in the server-rendered HTML is discovered faster and more reliably. In the App Router, components are Server Components by default, and pages without request-time data are prerendered at build time. Keep your main content, headings and internal links in Server Components, and use Client Components only for the interactive parts.

2. Use the Metadata API

Export a metadata object for static pages, or a generateMetadata function when metadata depends on route parameters. In Next.js 16, params is a Promise, so await it first.

import type { Metadata } from "next";
import { getPost } from "@/lib/posts";

type Props = { params: Promise<{ slug: string }> };

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);

  return {
    title: post.title,
    description: post.description,
    alternates: { canonical: "/blog/" + slug },
    openGraph: {
      type: "article",
      title: post.title,
      description: post.description,
      publishedTime: post.publishedAt,
    },
  };
}

Watch out for shallow merging

Metadata from layouts and pages is merged shallowly. If your root layout sets openGraph with a site name and default image, and a page sets its own openGraph object, the page's object replaces the whole layout object. Fields you do not repeat are lost. A simple fix is a shared defaults object that each page spreads into its own openGraph.

Set metadataBase and canonical URLs

Set metadataBase in the root layout to your production URL. Relative URLs in metadata, such as canonical links and images, are then resolved against it. Give every indexable page a canonical URL with alternates.canonical so duplicates created by tracking parameters or trailing slashes consolidate to one address.

3. Generate a sitemap and robots.txt from code

Add app/sitemap.ts and app/robots.ts. Generating them from the same data as your pages means new content is never forgotten.

import type { MetadataRoute } from "next";
import { getAllPosts } from "@/lib/posts";

const SITE_URL = "https://example.com";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts();

  return [
    { url: SITE_URL, lastModified: new Date() },
    { url: SITE_URL + "/blog", lastModified: new Date() },
    ...posts.map((post) => ({
      url: SITE_URL + "/blog/" + post.slug,
      lastModified: new Date(post.updatedAt),
    })),
  ];
}

4. Prerender dynamic content

For blogs, documentation and product pages, use generateStaticParams so every page is built ahead of time. If the list of pages is complete, also export dynamicParams = false, so unknown slugs return a 404 instead of rendering on demand.

export const dynamicParams = false;

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

5. Structured data in 2026: what still matters

Structured data helps search engines and AI systems understand what a page is about. Google's features around it have changed, so focus on the types that still earn their place:

FAQ rich results had already been limited to well-known government and health websites in 2023, and Google removed them entirely in May 2026. Existing FAQPage markup does no harm, but do not expect it to change how your pages appear. Visible, genuinely useful Q&A content is still valuable for readers.

Render JSON-LD in a script tag inside your page or layout. The Next.js documentation recommends replacing the < character with its unicode escape, because JSON.stringify alone does not protect against HTML injection:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c"),
  }}
/>

Validate your markup with Google's Rich Results Test and the Schema Markup Validator before and after deployment.

6. Generate Open Graph images

Add an opengraph-image.tsx file next to a route and Next.js generates the image and the matching meta tags. It uses ImageResponse, which has limits worth knowing before you design:

• Only flexbox and a subset of CSS are supported. display: grid will not work.
• The bundle, including fonts and images, must stay under 500 KB.
• Fonts must be ttf, otf or woff, with ttf and otf parsing fastest.

7. Performance is part of SEO

Core Web Vitals are part of how Google evaluates page experience. The "good" thresholds, measured at the 75th percentile of real page loads on mobile and desktop, are:

In Next.js, the biggest wins usually come from:

• Using next/image so images are sized, lazy loaded and served in modern formats.
• Using next/font so fonts are self-hosted and do not shift the layout when they load.
• Loading third-party scripts with an appropriate next/script strategy, and removing ones you do not need.
• Keeping Client Components small so less JavaScript blocks interaction.

A Next.js SEO checklist

1. Main content and links are server rendered.
2. metadataBase is set, and every indexable page has a unique title, description and canonical URL.
3. Open Graph defaults are repeated in pages that override openGraph.
4. sitemap.ts and robots.ts are generated from real data.
5. Content routes use generateStaticParams.
6. Article, Organization and BreadcrumbList structured data are present, escaped and validated.
7. Open Graph images exist for key pages.
8. Core Web Vitals are monitored with real user data, not only lab tests.

Want a site built this way from the start, or an audit of an existing one? We build fast, search-friendly Next.js websites and platforms as part of our web development service. Get in touch.