Next.js 15 App Router: Complete SEO Guide for 2026

Why App Router Changes SEO

Next.js 15 App Router introduces a powerful metadata API that replaces the old Head component approach with a typed, co-located metadata system.

generateMetadata API

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.metaDescription,
    openGraph: {
      title: post.title,
      images: [post.coverImageUrl],
      type: 'article',
    }
  };
}

Dynamic Sitemap

Generate a comprehensive sitemap from all your dynamic routes using the sitemap.ts convention.

JSON-LD Schema Injection

Inject structured data directly in your page components for rich Google search results and knowledge panels.

Core Web Vitals

Optimize LCP with next/image, reduce CLS by reserving space for dynamic content, and minimize FID by deferring JavaScript.