Next.js SEO: Rendering, Metadaten, Sitemaps und ein Blog, der rankt

Bei Next.js SEO geht es vor allem um die richtige Entscheidung pro Route: Was wird auf dem Server gerendert, was gecacht, und was steht im HTML, bevor ein Skript läuft? Google erklärt in den Grundlagen zu JavaScript-SEO, dass JavaScript-Apps in drei Phasen verarbeitet werden (Crawling, Rendering, Indexierung) und dass serverseitiges Rendering oder Pre-Rendering „nach wie vor eine gute Idee“ ist. Next.js macht genau das standardmäßig. Dieser Leitfaden behandelt den App Router (Next.js 13 und neuer) mit Hinweisen zum älteren Pages Router.

Ist Next.js gut für SEO?

Ja. Eine klassische React-App mit Client-Side-Rendering sendet eine fast leere HTML-Datei und baut die Seite im Browser auf; Suchmaschinen müssen sie rendern, und viele Bots tun das nie. Next.js rendert React auf dem Server, die HTML-Antwort enthält also bereits Überschriften, Text, Links und Metadaten. Unser Leitfaden zu JavaScript-SEO erklärt, warum dieser Unterschied für die Indexierung zählt.

Im App Router sind Komponenten standardmäßig Server Components. Selbst Komponenten mit 'use client' werden auf dem Server zu HTML vorgerendert. Die Schwachstelle sind Daten: Alles, was Sie in useEffect oder erst nach einem Klick laden, fehlt im initialen HTML. Holen Sie Inhalte in Server Components und nutzen Sie Client-Komponenten nur für Interaktivität.

SSG, SSR, ISR oder CSR: Welchen Rendering-Modus sollten Sie wählen?

Next.js erlaubt es, die Modi Route für Route zu mischen. Die Wahl beeinflusst Aktualität, Geschwindigkeit und das, was Crawler erhalten.

Die Next.js-Dokumentation zu ISR nennt die Vorteile: statische Inhalte aktualisieren, „ohne die gesamte Website neu zu bauen“, und große Seitenmengen ohne lange Build-Zeiten verwalten. Eine Route mit export const revalidate = 3600 wird höchstens einmal pro Stunde neu generiert; für exakte Kontrolle rufen Sie revalidatePath oder revalidateTag auf, wenn sich Inhalte ändern. ISR funktioniert nicht mit einem statischen Export (output: 'export'). Für Apps, die clientseitig gerendert bleiben müssen, beschreibt unser Leitfaden zu SEO für Single Page Applications die Lösungswege.

Wie legen Sie Titel, Beschreibungen und Canonicals mit der Metadata API fest?

Die Metadata API ersetzt next/head im App Router. Laut der Next.js-Dokumentation zu Metadaten exportieren Sie ein statisches metadata-Objekt aus einem Layout oder einer Seite, oder eine Funktion generateMetadata, wenn die Werte von Daten abhängen, und Next.js erzeugt die Head-Tags. Beides wird nur in Server Components unterstützt.

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

Fünf Regeln, die die meisten Probleme verhindern:

• metadataBase setzen im Root-Layout (Ihre Produktionsdomain), damit relative Canonicals und Open-Graph-URLs absolut werden.
• Eine Titelvorlage verwenden im Root-Layout, etwa '%s | Marke', damit jede Seite einen eindeutigen Titel mit einmaliger Markennennung erhält.
• Jeder indexierbaren Seite ein selbstreferenzierendes Canonical geben über alternates.canonical; es schützt vor Duplikaten durch URL-Parameter und Schrägstriche am Ende. Unser Glossareintrag zum Canonical-Tag erklärt die Regeln.
• Eine Beschreibung pro Seite schreiben, in generateMetadata aus dem Inhalt erzeugt, nie ein seitenweiter Standardwert.
• Open-Graph-Bilder hinzufügen mit einer Datei opengraph-image im Routenordner, und das Ergebnis mit einem Open-Graph-Vorschautool prüfen.

Auf dynamischen Seiten streamt Next.js die Metadaten nach den ersten Bytes, um das Rendering zu beschleunigen. Laut Dokumentation ist das Streaming für Bots deaktiviert, die Metadaten im Head erwarten und am User Agent erkannt werden (Bingbot, Twitterbot und Slackbot gehören zu den Beispielen); die Option htmlLimitedBots passt die Liste an. Fehlt ein Crawler, der Ihnen wichtig ist, ergänzen Sie ihn. Im Pages Router ist das Gegenstück die Head-Komponente aus next/head, mit einem key-Attribut gegen doppelte Tags.

Wie erzeugen Sie sitemap.xml und robots.txt in Next.js?

Beide sind Spezialdateien im app-Ordner. Eine Datei sitemap.ts, die eine Funktion mit URLs exportiert, wird zu /sitemap.xml; eine Datei robots.ts wird zu /robots.txt. Die Sitemap-Referenz weist darauf hin, dass die Datei standardmäßig gecacht wird und Googles Grenze bei 50.000 URLs pro Sitemap liegt; darüber teilt generateSitemaps sie in mehrere Dateien auf.

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

Nehmen Sie nur kanonische, indexierbare URLs mit Status 200 auf und tragen Sie in lastModified das echte Änderungsdatum ein. Für mehrsprachige Websites akzeptiert die Sitemap auch alternates.languages. In robots.ts verweisen Sie auf die Sitemap und legen fest, welche KI-Bots crawlen dürfen; unser Artikel zu robots.txt für KI-Crawler listet sie auf. Mehr zum Format im Glossareintrag zur XML-Sitemap.

Welche technischen Details schaden dem SEO einer Next.js-Website am häufigsten?

All diese Probleme verringern die Crawlbarkeit: Ein Crawler muss jede URL über Links finden und einen sauberen Statuscode erhalten.

Wie fügen Sie strukturierte Daten in Next.js ein?

Die Next.js-Dokumentation empfiehlt, JSON-LD als script-Tag vom Typ application/ld+json direkt in der Seiten- oder Layout-Komponente zu rendern, aus denselben Daten wie die Seite, und das Zeichen < im serialisierten JSON zu maskieren, um Injektionen zu verhindern. Da es auf dem Server gerendert wird, sehen Google und KI-Crawler es im rohen HTML. Verwenden Sie Article (oder BlogPosting) für Beiträge, Organization im Root-Layout, BreadcrumbList für tiefe Seiten und Product im E-Commerce. Ein Schema-Generator liefert einen gültigen Startblock; danach prüfen Sie die Seite mit Googles Test für Rich-Suchergebnisse.

Wie wird eine Next.js-Website schnell genug für die Core Web Vitals?

Next.js bringt Komponenten mit, die die üblichen Ursachen schlechter Core Web Vitals beheben:

• next/image: skaliert Bilder, liefert moderne Formate, lädt standardmäßig verzögert und verlangt Abmessungen, was Layoutverschiebungen verhindert. Markieren Sie das Hauptbild im sichtbaren Bereich als priorisiert, damit es nicht verzögert lädt (meist ist es das Element des Largest Contentful Paint).
• next/font: hostet Schriften selbst und vermeidet Verschiebungen durch spät getauschte Schriften.
• next/script: lädt Drittanbieter-Skripte mit einer Strategie (afterInteractive, lazyOnload), statt die Seite zu blockieren.
• Weniger Client-JavaScript: Jede 'use client'-Grenze fügt Code hinzu, der geladen und hydratisiert werden muss, was die Interaction to Next Paint auf Mobilgeräten belastet.

Messen Sie Felddaten, nicht nur einen Laborwert: Unser Leitfaden zu PageSpeed Insights zeigt, wie Sie beides lesen.

Wie betreiben Sie einen Next.js-Blog, der rankt?

Ein Next.js-Blog hat meist eine von drei Formen: MDX- oder Markdown-Dateien im Repository (einfach, aber jeder Beitrag braucht einen Commit und ein Deployment), ein Headless CMS (Sanity, Contentful, Strapi, Payload), das in Server Components abgefragt wird, oder ein Veröffentlichungs-Webhook, der Artikel von einem externen Tool empfängt. In allen drei Fällen ist das SEO-Muster gleich: eine dynamische Route app/blog/[slug] mit generateStaticParams, generateMetadata, ISR, einer Sitemap aus derselben Quelle und einer Übersichtsseite, die jeden Beitrag verlinkt.

Der Webhook entkoppelt das Veröffentlichen vom Deployment. Ein Route Handler empfängt den Artikel, speichert ihn und revalidiert die betroffenen Seiten:

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

Wie hilft Next.js SEO dabei, von KI-Assistenten zitiert zu werden?

Serverseitiges Rendering ist die erste Voraussetzung für GEO (Generative Engine Optimization). Die Analyse von Vercel aus dem Dezember 2024, The rise of the AI crawler, stellte fest, dass „keiner der großen KI-Crawler derzeit JavaScript rendert“, nannte GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot und PerplexityBot und zählte in einem Monat 569 Millionen Abrufe durch GPTBot und 370 Millionen durch Claude in seinem Netzwerk. Eine Next.js-Seite, die Text, Überschriften und JSON-LD vorab rendert, ist für alle lesbar; eine clientseitig gerenderte Seite nicht.

Die zweite Voraussetzung sind zitierwürdige Inhalte: Artikel, die pro Abschnitt eine Frage beantworten, mit Quellen, Zahlen und klaren Definitionen, regelmäßig veröffentlicht. Diesen Teil automatisiert Sorank, unser Produkt. Sorank ist eine SEO- und GEO-Software im Autopilot: Sie findet Ihre Keywords, und ihr Blogartikel-Generator schreibt 20, 60 oder 120 Artikel pro Monat mit Quellen, internen Links und Bildern. Auf einer Next.js-Website verbindet sie sich über den individuellen Webhook, der auf der Installationsseite beschrieben ist: Ihr Route Handler empfängt jeden Artikel, speichert ihn und revalidiert den Blog. Das Tracking von KI-Erwähnungen prüft anschließend jede Woche, ob ChatGPT, Claude und Gemini Ihre Marke zitieren.

Kurz zusammengefasst: Rendern Sie jede Seite vorab, die gefunden werden soll, definieren Sie Metadaten auf dem Server und speisen Sie die Sitemap aus derselben Quelle wie die Inhalte. Next.js liefert die Werkzeuge; Rankings und KI-Zitate entstehen durch das, was Sie damit veröffentlichen. Um einen Next.js-Blog laufend mit Artikeln zu versorgen, sehen Sie sich die Sorank-Tarife an, ab 49 € pro Monat mit 3 Tagen kostenlosem Test.