Next.js & React für KI: JavaScript-Frameworks für KI-Crawler sichtbar machen
React, Next.js und ähnliche Frameworks sind hervorragend – aber sie können eine Seite erzeugen, die für Menschen perfekt aussieht und für einen KI-Crawler völlig leer ist. Der Unterschied liegt darin, wo dein Inhalt gerendert wird. Dieser Leitfaden erklärt die eine Frage, die das entscheidet, und wie du auf der richtigen Seite landest.
Die eine Frage, die alles entscheidet
Wenn ein KI-Crawler (GPTBot, ClaudeBot, PerplexityBot, Google-Extended) deine Seite abruft, liest er das HTML, das dein Server zurückgibt. Er führt JavaScript normalerweise nicht so aus wie ein Browser. Also lautet die einzige wichtige Frage:
Steht dein Text schon im HTML, das der Server sendet – oder erscheint er erst, nachdem JavaScript im Browser gelaufen ist?
Wird dein Hauptinhalt im Browser aufgebaut, sieht der Crawler eine fast leere Hülle. → JavaScript und KI-Crawler
Next.js: meist in Ordnung, wenn du es auf dem Server rendern lässt
Next.js kann sehr KI-freundlich sein, weil es fürs Rendern auf dem Server gebaut ist:
- App Router (Server Components) rendert deine Komponenten standardmäßig auf dem Server zu HTML. Dein Text landet im anfänglichen HTML – gut.
- Pages Router ist in Ordnung, wenn du deinen Hauptinhalt mit
getServerSideProps(SSR) odergetStaticProps(statische Generierung) lädst. Diese Daten werden ins HTML eingebacken.
Die Falle sind Daten, die du nur im Browser holst – etwa in einem useEffect oder mit einer clientseitigen Datenbibliothek, wo die Seite leer ankommt und sich nach dem Laden füllt. Eine "use client"-Komponente ist für Interaktivität in Ordnung, aber wenn die entscheidenden Wörter erst nach einem Browser-Abruf kommen, stehen sie nicht im HTML, das der Crawler liest. Leg deinen Hauptinhalt auf den Server-Pfad.
Reine React-SPAs: der schwierige Fall
Eine rein clientseitige React-App (Create React App oder Vite ohne Server-Rendering) sendet typischerweise ein leeres <div id="root"></div> und zeichnet alles im Browser. Für Menschen eine vollständige Seite; für einen KI-Crawler leer. Deine Optionen:
- Wechsle zu einem Framework, das auf dem Server rendert – Next.js, Remix oder Astro.
- Füge statisches Prerendering für deine Inhaltsrouten hinzu, damit Crawler echtes HTML bekommen.
Metadaten und strukturierte Daten nicht vergessen
Den Text auf dem Server zu rendern ist der größte Teil der Schlacht, aber bring es zu Ende:
- Titel, Beschreibung, Canonical, Open Graph – nutze die Metadata-API von Next.js (App Router) oder
next/head(Pages Router), damit sie im Server-HTML stehen und nicht später per JavaScript gesetzt werden. - Strukturierte Daten – gib ein servergerendertes
<script type="application/ld+json">aus, damit die KI explizite Fakten bekommt. → strukturierte Daten · Sitemaps & Canonical
Der ehrliche Teil
Du musst React nicht aufgeben. Hydration und reiche Interaktivität sind völlig in Ordnung – die KI liest das anfängliche HTML, und deine App kann darauf so dynamisch bleiben, wie du willst. Die Lösung ist nicht „weniger JavaScript”, sondern „sicherstellen, dass die erste HTML-Antwort deine Wörter schon enthält”. Server-Rendering, statische Generierung und React Server Components erreichen das alle.
Wie du es prüfst
Öffne „Quelltext anzeigen” (nicht den Inspector – der zeigt das Live-DOM nach dem JS) oder führe curl https://deineseite.de aus und suche deinen echten Absatztext. Siehst du Überschrift und Fließtext, sehen Crawler sie auch. Siehst du ein leeres <div id="root"> und einen Haufen Script-Tags, ist dein Inhalt nur im Browser. Oder schick deine URL durch eine kostenlose KI-Sichtbarkeitsprüfung und bestätige es auf einen Blick.
Fazit
React und Next.js sind nicht der Feind – reines Browser-Rendering ist es. Halte deinen Hauptinhalt auf dem Server (SSR, SSG oder Server Components), bring Metadaten und strukturierte Daten ins Server-HTML und prüfe mit „Quelltext anzeigen”. Beginne mit der GEO-Einführung und JavaScript und KI-Crawler, und wenn die KI dich noch nicht zitiert, siehe warum meine Seite nicht in der KI auftaucht.