Ein Team arbeitet monatelang und liefert eine moderne, schnelle Next.js-Website mit einer aus UX-Sicht makellosen Nutzererfahrung ab. Die Seite lädt, die Animationen laufen flüssig, alles wirkt in Ordnung. Dann wird die Google Search Console geöffnet und man stellt fest, dass ein Großteil der Seiten nicht einmal indexiert ist – oder, falls doch, für kein einziges Keyword erscheint. Das ist ein Szenario, dem Entwicklungsteams im React-Ökosystem häufig begegnen: Frontend-Perfektion und SEO-Tauglichkeit sind nicht dasselbe, und das eine kommt nicht automatisch mit dem anderen.
Als jemand, der seit über zehn Jahren im Frontend-Bereich arbeitet, kann ich sagen: Dieses Problem entsteht in der Regel nicht durch schlechten Code, sondern dadurch, dass Rendering-Strategie und SEO-Anforderungen zu Projektbeginn nicht gemeinsam durchdacht wurden. Reacts clientseitige Render-Logik kann, wenn sie nicht richtig konfiguriert ist, dazu führen, dass Suchmaschinen-Bots den Inhalt gar nicht erst sehen; Next.js bietet Werkzeuge, die dieses Problem weitgehend lösen – aber diese Werkzeuge müssen richtig eingesetzt werden.
In diesem Beitrag erklären wir, was technisches SEO für Next.js- und React-basierte Websites in der Praxis umfasst, welche Probleme am häufigsten auftreten und wie diese Dienstleistung bewertet werden sollte.
Rendering-Strategie: SSR, SSG, ISR und clientseitiges Rendering
Der größte Vorteil von Next.js ist, dass man für jede Seite eine eigene Rendering-Strategie wählen kann – gleichzeitig ist das aber auch die größte Fehlerquelle. Für Seiten, die sich selten ändern und SEO-technisch entscheidend sind (Produkt-, Leistungs- und Blogseiten), ist statische Generierung (SSG) oder inkrementelle statische Regenerierung (ISR) meist die beste Wahl; der Inhalt wird zum Build-Zeitpunkt oder in festgelegten Intervallen erzeugt, und dem Suchmaschinen-Bot wird vollständig gerendertes HTML ausgeliefert. Für häufig wechselnde, personalisierte Inhalte eignet sich serverseitiges Rendering (SSR) besser. Seiten hingegen, die vollständig clientseitig gerendert werden – mit "use client" markiert, mit Datenabruf im Browser –, laufen Gefahr, leer oder unvollständig indexiert zu werden, wenn der Bot den Inhalt nicht richtig verarbeiten kann. Der erste Schritt technischer SEO-Arbeit besteht darin zu prüfen, welche Seite mit welcher Strategie gerendert wird, und sicherzustellen, dass SEO-relevante Seiten mit der richtigen Strategie ausgeliefert werden.
Metadata API und dynamisches Titel-/Beschreibungsmanagement
Die generateMetadata-Funktion und die Metadata API von Next.js ermöglichen es, dass jede Seite ihren eigenen Titel, ihre Beschreibung, Open-Graph-Daten und kanonische Informationen dynamisch erzeugt. In vielen Projekten wird diese Struktur entweder gar nicht genutzt oder für alle Seiten mit denselben statischen Werten belassen; in diesem Fall werden Hunderte von Produkt- oder Inhaltsseiten mit demselben Titel und derselben Beschreibung an die Suchmaschine ausgeliefert – was für Nutzer bedeutungslos ist und es der Suchmaschine erschwert, die Seiten voneinander zu unterscheiden. Eine richtig aufgebaute Metadaten-Schicht sorgt dafür, dass jede Seite mit eigenen, ihrem Inhalt entsprechenden Informationen indexiert wird.
Core Web Vitals: LCP, INP und CLS
Die Core Web Vitals, Googles Nutzererfahrungssignale, verdienen auf React-basierten Websites besondere Aufmerksamkeit. Große JavaScript-Bundles, unnötig lange Hydration-Zeiten und falsch dimensionierte Bilder wirken sich jeweils negativ auf Largest Contentful Paint (LCP), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS) aus. Maßnahmen wie die Image-Komponente von Next.js, Code-Splitting per dynamischem Import und die Umwandlung unnötiger Client-Komponenten in Server-Komponenten machen bei der Verbesserung dieser Metriken einen spürbaren Unterschied. Diese Optimierungen wirken sich sowohl auf die Nutzererfahrung als auch direkt auf das Suchranking aus.
Strukturierte Daten und Sitemap-Automatisierung
Mit dateibasierten Konfigurationen wie sitemap.ts und robots.ts lassen sich Sitemap und Crawling-Regeln in Next.js direkt aus dem Code, datenbasiert, automatisch erzeugen – das macht manuelle Aktualisierungen überflüssig, besonders bei Websites, auf denen häufig neue Inhalte hinzukommen. Ergänzend dazu erhöht das Hinzufügen von zum Seiteninhalt passenden JSON-LD strukturierten Daten (Schemas für Produkte, Artikel, FAQs und Ähnliches) die Chance auf Rich Results in den Suchergebnissen. Diese beiden Elemente werden im Entwicklungsprozess oft in den Hintergrund gedrängt, obwohl sie bei richtiger Umsetzung mit vergleichsweise wenig Aufwand einen großen Beitrag leisten.
Indexierungsprüfung und Hydration-Probleme
Dass eine Seite im Browser korrekt aussieht, bedeutet nicht, dass die Suchmaschine sie genauso sieht. Mit dem URL-Prüftool der Search Console zu kontrollieren, was der Bot tatsächlich sieht, zu untersuchen, ob über next/script geladene Drittanbieter-Skripte das Rendering verzögern, und zu prüfen, ob Hydration-Fehlanpassungen – unterschiedlicher Inhalt auf Server und Client – Fehler in der Konsole hinterlassen, sind Prüfungen, die regelmäßig durchgeführt werden sollten. Solche Probleme summieren sich meist unbemerkt und können, wenn sie auffallen, den Traffic bereits monatelang beeinträchtigt haben.
Worauf man bei der Bewertung dieser Dienstleistung achten sollte
Bei der Suche nach technischer SEO-Unterstützung für Next.js- oder React-Projekte sollte man darauf achten, wie gut die Person oder das Team nicht nur SEO-Tools, sondern das Framework selbst kennt – Rendering-Modelle, App-Router-Architektur, Komponentenbaum. Anders als ein klassisches SEO-Audit erfordert diese Arbeit Eingriffe auf Code-Ebene; es handelt sich um ein Fachgebiet, das SEO-Wissen und Frontend-Engineering miteinander verbindet.
Eine Website, die auf einem modernen Technologie-Stack aufgebaut ist, kann für Suchmaschinen nahezu unsichtbar bleiben, wenn sie nicht richtig konfiguriert ist. Mit einem Experten zu arbeiten, der die inneren Abläufe des Frameworks wirklich versteht und sowohl die Code- als auch die Ranking-Seite gleichzeitig bewerten kann, ist der zuverlässigste Weg, die technische Stärke Ihrer Website in Suchsichtbarkeit zu verwandeln.