Technical SEO for Next.js — Metadata, Schema, Sitemaps, and robots.txt

Next.js has become the default React framework for production web apps, and it has strong built-in support for SEO. But "good defaults" doesn't mean "handled automatically." There are several technical SEO configurations that require deliberate setup, and a few Next.js-specific pitfalls that can silently hurt your rankings.

Metadata with the App Router

Next.js 13+ with the App Router uses the Metadata API instead of next/head. Export a metadata object or generateMetadata function from any page or layout:

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

Canonical tags

Always set canonical URLs explicitly. Next.js doesn't add them automatically. Without a canonical, URL parameter variants (like ?ref=newsletter) can create duplicate content in Google's eyes. The alternates.canonical field in generateMetadata is the right place for this.

Generating a sitemap

Next.js 13+ supports a dedicated sitemap.ts file in the app directory:

// app/sitemap.ts
export default async function sitemap() {
  const posts = await getAllPosts();
  return [
    { url: "https://yoursite.com", lastModified: new Date() },
    ...posts.map(post => ({
      url: `https://yoursite.com/blog/${post.slug}`,
      lastModified: post.updatedAt,
    })),
  ];
}

Robots.txt

Similarly, robots.ts in the app directory generates the robots.txt response:

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

Server components and crawlability

Next.js Server Components render HTML on the server, which is exactly what search engines need. Avoid moving important content into Client Components unnecessarily, especially anything that contains text Google should index. If a piece of content is only rendered after a user interaction, Google might not see it.

Build and preview your meta tags with the Meta Preview tool before deploying changes to production.