Next.js ist ein Framework auf Basis von React, mit dem sich Seiten standardmäßig auf dem Server rendern lassen. Ein großer Teil der SEO-Grundlagen ist in Next.js schon eingebaut. Einige Stellen verlangen trotzdem Aufmerksamkeit, vor allem beim Zusammenspiel von Streaming und Statuscodes. Dieser Ratgeber geht die Punkte für den App Router durch, der in der aktuellen Dokumentation von Next.js im Mittelpunkt steht. Wie sich React allgemein zu SEO verhält, beschreibt der Ratgeber React und SEO.
Rendering auf dem Server als Ausgangslage
Im App Router sind Layouts und Seiten standardmäßig Server Components. Sie werden auf dem Server gerendert, das Ergebnis kann zwischengespeichert und an den Browser gestreamt werden [1]. Interaktive Teile wie ein Suchfeld werden als Client Components mit der Anweisung "use client" ergänzt, während der Rest der Seite auf dem Server bleibt [1].
Für die Suche ist das eine gute Ausgangslage. Google kann JavaScript ausführen, schreibt aber selbst, dass serverseitiges Rendering oder Pre-Rendering eine sehr gute Option bleibt, weil die Website damit für Nutzer und Crawler schneller wird und nicht alle Bots JavaScript ausführen können [2]. Der Haupttext, die Überschriften und die Links stehen bei Server Components schon im HTML, das der Server ausliefert. Probleme entstehen, wenn wesentliche Inhalte in Client Components erst nach einem Datenabruf im Browser erscheinen. Die Unterschiede der Rendering-Arten erklärt der Ratgeber Client-side oder Server-side Rendering.
Title, Beschreibung und Canonical je Route
Next.js bietet zwei Wege für Metadaten: ein statisches metadata-Objekt und die Funktion generateMetadata für Angaben, die von Daten abhängen, etwa Titel und Beschreibung eines Blogartikels aus einer Datenbank [3]. Beide funktionieren nur in Server Components [3]. Next.js erzeugt daraus die passenden Tags im Kopf der Seite. Zwei Angaben setzt Next.js immer, auch ohne eigene Metadaten: den Zeichensatz und den Viewport mit width=device-width, initial-scale=1 [3].
Für das Canonical gibt es das Feld alternates. Zusammen mit metadataBase, der Basisadresse der Website, setzt Next.js aus einem relativen Pfad eine vollständige Adresse zusammen. Im selben Feld lassen sich auch Sprachfassungen für hreflang angeben [4]. Setzen Sie metadataBase einmal im obersten Layout und das Canonical in jeder Seite, die Parameter, Sortierungen oder mehrere Wege zur selben Ansicht kennt.
Streaming von Metadaten
Bei dynamisch gerenderten Seiten kann Next.js die Metadaten getrennt streamen. Die Seite wird zuerst gesendet, und die Metadaten-Tags werden angehängt, sobald generateMetadata fertig ist [q:3, q:4]. Laut Next.js werden die Metadaten von Bots, die JavaScript ausführen und das vollständige DOM prüfen, etwa dem Googlebot, richtig erkannt [4]. Für Bots, die kein JavaScript ausführen, etwa Vorschaudienste sozialer Netzwerke, blockiert Next.js weiterhin und schreibt die Metadaten in den Kopf [4]. Diese Bots erkennt Next.js am User-Agent, die Liste lässt sich über die Einstellung htmlLimitedBots anpassen [4]. Für die meisten Websites reicht die Voreinstellung.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder Sie rufen einfach an.
Links mit der Link-Komponente
Die Komponente Link erweitert das HTML-Element a um Vorabladen und Navigation im Browser [5]. Im HTML steht also ein normales a-Element mit href, und genau das braucht Google: Google kann Links im Allgemeinen nur crawlen, wenn sie a-Elemente mit href sind [6]. Navigation über router.push in einem Klick-Handler auf einem div oder button erzeugt dagegen keinen crawlbaren Link. Nutzen Sie diese Form nur für Aktionen, nicht für Verweise auf andere Seiten. Mehr dazu steht im Ratgeber JavaScript-Links und Navigation.
Statuscodes, 404 und Streaming
Mit der Funktion notFound zeigt Next.js eine 404-Seite und fügt zusätzlich ein robots-Meta-Tag mit noindex ein, damit die Seite nicht indexiert wird [7]. Beim Streaming gibt es eine Besonderheit. Gestreamte Antworten beginnen mit dem Status 200, und die ersten Header legen den Status für die ganze Antwort fest [8]. Wird notFound erst während des Streamings ausgelöst, bleibt der HTTP-Status deshalb 200, und nur das noindex im HTML verhindert die Indexierung [8]. Next.js weist selbst darauf hin, dass manche Crawler solche Antworten als Soft 404 einstufen können [8].
Für eine saubere 404 mit echtem Statuscode prüfen Sie, ob ein Inhalt existiert, bevor die Antwort zu streamen beginnt [8]. In der Praxis heißt das: den Datenabruf für Produkt oder Artikel früh in der Seite ausführen und notFound aufrufen, bevor ein Suspense-Bereich oder eine loading-Datei das Streaming startet. Google empfiehlt für Fehlerseiten in JavaScript-Anwendungen ebenfalls entweder eine Weiterleitung auf eine Adresse mit echtem 404-Status oder ein noindex [2].
Weiterleitungen
Für dauerhafte Weiterleitungen gibt es die Funktion permanentRedirect. Sie sendet außerhalb von Server Actions den Status 308 [9]. Für Google bedeuten 301 und 308 gleichermaßen, dass eine Seite dauerhaft umgezogen ist [12]. Im Streaming-Kontext fügt Next.js stattdessen ein Meta-Tag ein, das die Weiterleitung im Browser auslöst [9]. Auch hier gilt also: Weiterleitungen möglichst früh auslösen. Für feste Umzüge alter Adressen, etwa nach einem Relaunch, sind Regeln in der Konfiguration oder auf dem Webserver meist übersichtlicher als Aufrufe im Code einzelner Seiten.
Sitemap und robots.txt
Next.js kennt Dateikonventionen für beide Dateien. Eine Datei sitemap.xml im Ordner app wird als Sitemap ausgeliefert, und mit sitemap.js oder sitemap.ts lässt sich die Sitemap aus Daten erzeugen [10]. Für die robots.txt gibt es dieselbe Möglichkeit mit robots.txt, robots.js oder robots.ts [11]. Achten Sie darauf, dass die Sitemap nur Adressen enthält, die mit 200 antworten, kanonisch sind und kein noindex tragen. Bei Seiten aus einer Datenbank ist das nicht selbstverständlich, weil gelöschte Einträge sonst weiter in der Sitemap stehen.
So prüfen Sie Ihre Next.js-Website
Laden Sie zuerst den Quelltext einer Seite ohne JavaScript, zum Beispiel über "Seitenquelltext anzeigen" im Browser. Dort sollten Titel, Beschreibung, Canonical, die H1 und der Haupttext stehen. Danach prüfen Sie die gerenderte Fassung im URL-Prüftool der Search Console. Next.js nennt für die Kontrolle gestreamter Seiten den Test für Rich-Suchergebnisse von Google, der das serialisierte HTML zeigt [8]. Zum Schluss rufen Sie eine Adresse auf, die es nicht gibt, und prüfen den HTTP-Status.
Diese drei Schritte erfassen Inhalte, die nur im Browser entstehen, fehlende Canonicals und falsche Statuscodes. Wie Next.js im Vergleich zu anderen Frameworks abschneidet, zeigt der Ratgeber JavaScript-Frameworks und SEO. Den Begriff Server-side Rendering erklärt das Glossar unter Server-Side Rendering.
Sie betreiben eine Next.js-Website und sind unsicher, ob Ihre 404-Seiten den richtigen Status senden oder die Metadaten bei Google ankommen? Stellen Sie die Frage in der gratis Sprechstunde. Eine Beispieladresse und die Angabe, ob Sie den App Router oder den älteren Pages Router nutzen, reichen für den Einstieg.
- Organisation Server and Client Components. Next.js (Vercel). Stand 05.10.2026. abgerufen am 31.10.2026
- Organisation Grundlagen von JavaScript-SEO. Google Search Central. Stand 04.03.2026. abgerufen am 31.10.2026
- Organisation Metadata and OG images. Next.js (Vercel). Stand 25.08.2026. abgerufen am 31.10.2026
- Organisation generateMetadata. Next.js (Vercel). Stand 19.08.2026. abgerufen am 31.10.2026
- Organisation Link Component. Next.js (Vercel). Stand 25.08.2026. abgerufen am 31.10.2026
- Organisation SEO-Link-Best-Practices für Google. Google Search Central. Stand 31.12.2025. abgerufen am 31.10.2026
- Organisation notFound. Next.js (Vercel). Stand 23.09.2026. abgerufen am 31.10.2026
- Organisation loading.js. Next.js (Vercel). Stand 23.09.2026. abgerufen am 31.10.2026
- Organisation permanentRedirect. Next.js (Vercel). Stand 18.08.2026. abgerufen am 31.10.2026
- Organisation sitemap.xml. Next.js (Vercel). Stand 18.08.2026. abgerufen am 31.10.2026
- Organisation robots.txt. Next.js (Vercel). Stand 01.05.2026. abgerufen am 31.10.2026
- Organisation Weiterleitungen und die Google Suche. Google Search Central. Stand 20.04.2026. abgerufen am 31.10.2026
Häufige Fragen
Ist Next.js gut für SEO?
Ja, weil Seiten im App Router standardmäßig als Server Components auf dem Server gerendert werden und Titel, Text und Links damit im ausgelieferten HTML stehen. Aufpassen müssen Sie bei Inhalten in Client Components, bei Statuscodes während des Streamings und bei Canonicals.
Wie setze ich in Next.js ein Canonical?
Über das Feld alternates im metadata-Objekt oder in generateMetadata. Zusammen mit metadataBase im obersten Layout setzt Next.js aus einem relativen Pfad die vollständige Adresse zusammen.
Warum liefert meine 404-Seite in Next.js den Status 200?
Gestreamte Antworten beginnen mit dem Status 200. Wird notFound erst während des Streamings ausgelöst, bleibt es dabei, Next.js setzt dann nur ein noindex. Prüfen Sie die Existenz eines Inhalts, bevor das Streaming beginnt.
Sieht Google gestreamte Metadaten?
Laut Next.js werden gestreamte Metadaten von Bots, die JavaScript ausführen, etwa dem Googlebot, richtig erkannt. Für Bots ohne JavaScript schreibt Next.js die Metadaten weiterhin in den Seitenkopf.
Braucht Next.js ein Plugin für die Sitemap?
Nein. Eine sitemap.xml im Ordner app oder eine Datei sitemap.ts, die die Sitemap aus Daten erzeugt, reicht. Für die robots.txt gibt es dieselbe Dateikonvention.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder Sie rufen einfach an.
Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Haben Sie einen Fehler entdeckt? Schreiben Sie uns.
