SEO in Next.js: de complete technische gids

Metadata en generateMetadata

Metadata is de basis van SEO in Next.js. De App Router biedt een krachtig systeem via de generateMetadata functie. Elke pagina kan zijn eigen title, description en Open Graph tags definiëren.

import type { Metadata } from 'next'

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: 'Mijn pagina — Mijn Site',
    description: 'Een korte beschrijving voor zoekmachines.',
    openGraph: {
      title: 'Mijn pagina — Mijn Site',
      description: 'Een korte beschrijving.',
      type: 'article',
    },
  }
}

Pro tip: gebruik een title template in je root layout zodat je niet overal ' | Mijn Site' hoeft te herhalen:

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

Vergeet alternates niet voor meertalige sites. Dit vertelt Google welke taalversies er bestaan:

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

Structured data (JSON-LD)

Structured data helpt Google je content beter te begrijpen en kan resulteren in rich snippets — verrijkte zoekresultaten met sterren, FAQ-dropdowns, of breadcrumbs.

Het meest voorkomende formaat is JSON-LD. In Next.js voeg je dit toe als een 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) }}
    />
  )
}

Andere nuttige schema types: Article (voor blogposts), Organization (voor je bedrijfspagina), BreadcrumbList (voor navigatie), en HowTo (voor tutorials).

Server Components en SEO

De App Router van Next.js gebruikt standaard Server Components. Dit is een groot voordeel voor SEO om twee redenen:

Ten eerste: Server Components renderen op de server. Google ziet de volledige HTML zonder JavaScript uit te hoeven voeren. Dit is betrouwbaarder dan client-side rendering waar Googlebot de JavaScript moet uitvoeren.

Ten tweede: Server Components sturen geen JavaScript naar de browser. Minder JavaScript = snellere pagina = betere Core Web Vitals = hogere ranking.

Vuistregel: maak alles een Server Component tenzij je interactiviteit nodig hebt (formulieren, dropdowns, animaties). Markeer alleen die componenten met 'use client'.

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

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

Veelgestelde vragen