Next.js App Router SEO Guide

Technical SEO in App Router

Next.js 13+ App Router revolutionized web page SEO. Moving from client-side meta tags to static server-side configurations prevents crawlers from indexing blank template layouts, ensuring search engines see the fully rendered HTML payload immediately.

Dynamic Metadata Generation

The 'generateMetadata' export allows us to fetch database records and generate perfectly tailored titles, descriptions, and OpenGraph tags dynamically before the page is served.

export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await fetchProduct(params.id);
  return {
    title: `${product.name} | My Store`,
    description: product.summary,
    openGraph: { images: [product.imageUrl] }
  };
}

Structured Data (JSON-LD)

Injecting JSON-LD schema objects (like Article, Product, or Person) directly into the server component JSX using dangerouslySetInnerHTML gives Google clear entity maps, rapidly increasing the chances of appearing in rich snippets and the Knowledge Graph.