Metadaten & SEO

Der App Router bringt SEO-Bausteine direkt mit: Metadaten pro Seite, OpenGraph-Bilder, Sitemap und robots.txt – alles über Konventionen, ohne Zusatzpakete.

Statische Metadaten

Jede page.js oder layout.js kann ein metadata-Objekt exportieren:

export const metadata = {
    title: 'Blog',
    description: 'Beiträge rund um Webentwicklung.',
    alternates: { canonical: '/blog' },
};

Dynamische Metadaten

Hängen Titel und Beschreibung vom Inhalt ab, nutzt man generateMetadata – ebenfalls async, mit await-baren params:

export async function generateMetadata({ params }) {
    const { slug } = await params;
    const beitrag = await getBeitrag(slug);
    return {
        title: beitrag.title,
        description: beitrag.teaser,
    };
}

Dateikonventionen für SEO

Diese Dateien exportieren einfach eine Funktion, Next.js baut daraus die passende Route.

Merke: Ein sauberer Canonical (alternates.canonical) verhindert Duplicate Content, wenn dieselbe Seite über mehrere URLs (Parameter, www) erreichbar ist – ein häufiger, leicht vermeidbarer SEO-Fehler.

Bleibt der letzte Schritt: die Anwendung bauen und ausliefern.