SEO in Next.js: the complete technical guide

Metadata and generateMetadata

Metadata is the foundation of SEO in Next.js. The App Router provides a powerful system through the generateMetadata function. Each page can define its own title, description, and Open Graph tags.

import type { Metadata } from 'next'

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: 'My Page — My Site',
    description: 'A short description for search engines.',
    openGraph: {
      title: 'My Page — My Site',
      description: 'A short description.',
      type: 'article',
    },
  }
}

Pro tip: use a title template in your root layout so you don't have to repeat ' | My Site' everywhere:

// app/layout.tsx
export const metadata: Metadata = {
  title: {
    template: '%s | My Site',
    default: 'My Site',
  },
}

Don't forget alternates for multilingual sites. This tells Google which language versions exist:

alternates: {
  canonical: 'https://example.com/en/page',
  languages: {
    nl: 'https://example.com/nl/pagina',
    en: 'https://example.com/en/page',
  },
}

Structured data (JSON-LD)

Structured data helps Google understand your content better and can result in rich snippets — enhanced search results with stars, FAQ dropdowns, or breadcrumbs.

The most common format is JSON-LD. In Next.js, you add this as a script tag:

function FAQSchema({ items }: { items: { q: string; a: string }[] }) {
  const schema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: items.map((item) => ({
      '@type': 'Question',
      name: item.q,
      acceptedAnswer: {
        '@type': 'Answer',
        text: item.a,
      },
    })),
  }

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

Other useful schema types: Article (for blog posts), Organization (for your company page), BreadcrumbList (for navigation), and HowTo (for tutorials).

Server Components and SEO

The Next.js App Router uses Server Components by default. This is a major advantage for SEO for two reasons:

First: Server Components render on the server. Google sees the complete HTML without needing to execute JavaScript. This is more reliable than client-side rendering where Googlebot has to run the JavaScript.

Second: Server Components send no JavaScript to the browser. Less JavaScript = faster page = better Core Web Vitals = higher ranking.

Rule of thumb: make everything a Server Component unless you need interactivity (forms, dropdowns, animations). Only mark those components with 'use client'.

// Server Component (default) — good for SEO
export default async function BlogPost() {
  const post = await getPost()
  return <article>{post.content}</article>
}

// Client Component — only for interactivity
'use client'
export function ContactForm() {
  const [name, setName] = useState('')
  return <form>...</form>
}

Frequently asked questions