SEO-Checkliste für den App Router: metadata, generateMetadata, metadataBase, Titelvorlagen, Canonical, hreflang, sitemap.ts, robots.ts und OG-Bilder, mit Code.
Im App Router kommen SEO-Tags aus einem exportierten metadata-Objekt oder einer generateMetadata-Funktion in Layout- und Page-Dateien, und beides funktioniert nur in Server Components. Setze metadataBase einmal im Root-Layout, füge app/sitemap.ts und app/robots.ts hinzu, gib jeder Route über alternates eine Canonical-URL und lege eine opengraph-image-Datei neben die Seiten, die eine brauchen.
Wo welcher Teil hingehört
Der App Router hat eingebaute Lösungen für fast jede technische SEO-Aufgabe, aber sie sind über ein Dutzend Dokumentationsseiten verteilt. Diese Checkliste fasst sie der Reihe nach zusammen, mit kopierbarem Code für jeden Punkt, und mit den Häkchen verfolgst du den Stand deines eigenen Projekts.
Nein. Das metadata-Objekt und generateMetadata werden nur in Server Components unterstützt, weil Next.js sie vor dem Rendern auf dem Server auflösen muss. Lass die Seite eine Server Component sein und importiere eine Client Component für die interaktiven Teile.
Aktuelle Next.js-Versionen übergeben params und searchParams als Promises, daher schreibst du const { slug } = await params innerhalb einer asynchronen generateMetadata. Code für ältere Versionen, der params.slug direkt liest, muss angepasst werden.
Nutze generateSitemaps in einer sitemap.ts-Datei. Sie gibt eine Liste von ids zurück, und der Default-Export baut eine Sitemap pro id. In Next.js 16 kommt die id als Promise an. Die Dateien werden unter Pfaden wie /product/sitemap/1.xml ausgeliefert.
Nur wenn du eines setzt. Füge alternates.canonical in die Metadata jeder Route ein, meist als relativen Pfad wie /blog/my-post, und lass metadataBase daraus eine vollständige URL machen.
Nein, ein Routensegment kann nur das eine oder das andere exportieren. Nimm das statische Objekt, wenn nichts von der Anfrage oder geladenen Daten abhängt, und generateMetadata, wenn doch.
Einmal in app/layout.tsx setzen. Unterseiten, die title: "Pricing" exportieren, werden als Pricing | Northside gerendert.
Auf params wird mit await gewartet. getPost steht für deine eigene Datenfunktion.
Gibt einen Eintrag pro URL zurück. changeFrequency und priority sind optional und werden von Google ignoriert, daher fehlen sie hier.
Erzeugt die robots.txt im Stammverzeichnis der Website.
Zeichnet mit ImageResponse aus next/og ein Vorschaubild mit 1200 mal 630 aus dem Beitragstitel. Die Exporte alt, size und contentType werden zu og-Tags.
Dateibasierte Vorschaubilder
metadataBase in app/layout.tsx gesetzt
Damit kann jedes andere URL-Feld ein relativer Pfad sein
Titelvorlage plus Standardwert im Root-Layout
Gibt jeder Seite ein einheitliches Suffix wie | Acme
Eindeutiger Titel und eindeutige Beschreibung auf jeder Seite
Statische metadata oder generateMetadata pro Route
Canonical auf jeder indexierbaren Route
hreflang für übersetzte Routen
alternates.languages oder in der Sitemap
app/sitemap.ts listet nur erreichbare Canonical-URLs
Bei großen Sites mit generateSitemaps aufteilen
app/robots.ts mit einer Sitemap-Zeile
Blockiert nur Bereiche wie /admin oder /api
Open-Graph-Bild für wichtige Routen
opengraph-image-Datei mit Alt-Text
noindex auf dünnen oder privaten Routen
robots: { index: false } in der Metadata dieser Route
Inhalte werden auf dem Server gerendert
Prüfe den Seitenquelltext, nicht nur die Browseransicht
{count} von {total} erledigt
Kostenlos starten · Keine Kreditkarte nötig