Discussion Technical SEO JavaScript

Unsere React SPA ist für KI-Crawler komplett unsichtbar – wie lösen wir das?

RE
ReactDev_Marcus · Frontend Lead
· · 82 upvotes · 10 comments
RM
ReactDev_Marcus
Frontend Lead · January 9, 2026

Wir haben unsere Seite vor drei Jahren als React SPA gebaut. Tolles Nutzererlebnis, schnelle Interaktionen.

Aber jetzt stellen wir fest, dass KI-Crawler gar nichts sehen können. Wenn ich die Server-Logs prüfe:

  • GPTBot bekommt unser leeres HTML-Gerüst
  • PerplexityBot das gleiche
  • Unser gesamter Content wird per JavaScript geladen

Das Problem:

  • Null KI-Sichtbarkeit
  • Wettbewerber mit klassischen Seiten werden zitiert
  • Wir haben großartige Inhalte, aber KI kann nicht darauf zugreifen

Unser aktueller Stack:

  • React 18 mit React Router
  • Nur clientseitiges Rendering
  • API-gesteuertes Content-Loading
  • Hash-basiertes Routing (/#/page)

Fragen:

  1. Wie schlimm ist dieses Problem wirklich?
  2. Was ist der schnellste Fix?
  3. Müssen wir auf Next.js umsteigen?
  4. Gibt es Lösungen ohne großen Refactoring-Aufwand?

Wir können uns einen kompletten Neubau nicht leisten, brauchen aber KI-Sichtbarkeit.

10 comments

10 Kommentare

TE
TechSEO_Expert_Sarah Expert Technical SEO Consultant · January 9, 2026

Das ist ein häufiges und ernstes Problem. Hier eine kurze Erklärung:

Wie KI-Crawler arbeiten:

Im Gegensatz zu Google (kann JavaScript rendern) können die meisten KI-Crawler das NICHT:

  • GPTBot (OpenAI): Kein JavaScript
  • PerplexityBot: Kein JavaScript
  • ClaudeBot (Anthropic): Kein JavaScript

Sie sehen NUR Ihr initiales HTML. Bei einer SPA ist das meist:

<div id="root"></div>
<script src="bundle.js"></script>

Kein Inhalt = keine KI-Sichtbarkeit

Die gute Nachricht: Sie müssen nicht zwangsläufig alles neu bauen. Es gibt Lösungen, die mit bestehenden SPAs funktionieren.

RM
RenderingOptions_Mike · January 9, 2026
Replying to TechSEO_Expert_Sarah

Ihre Optionen – vom schnellsten bis zur umfassendsten:

Option 1: Prerendering-Service (am schnellsten)

  • Dienste wie Prerender.io, Rendertron
  • Erkennt Crawler-User-Agents
  • Liefert gecachtes HTML an Crawler aus
  • Keine Code-Änderungen nötig
  • Umsetzung: Stunden

Option 2: Dynamisches Rendering

  • Unterschiedlicher Content je nach User-Agent
  • SPAs für Nutzer, statisches HTML für Crawler
  • Middleware-Implementierung
  • Umsetzung: Tage

Option 3: SSR-Migration (langfristig am besten)

  • Umstieg auf Next.js/Remix
  • Vollständiges Server-Side Rendering
  • Am besten für KI und klassisches SEO
  • Umsetzung: Wochen bis Monate

Empfehlung:

Starten Sie JETZT mit Prerendering für sofortige Sichtbarkeit. Planen Sie eine SSR-Migration langfristig, wenn Ressourcen vorhanden sind.

LösungImplementierungszeitKomplexitätKI-Sichtbarkeit
PrerenderingStundenNiedrigGut
Dynamisches RenderingTageMittelGut
SSR (Next.js)Wochen-MonateHochExzellent
PE
PrerenderPro_Emma DevOps Engineer · January 9, 2026

Details zur Prerendering-Implementierung:

Wie es funktioniert:

  1. User-Agent-Erkennung am Edge/Server
  2. Wenn KI-Crawler erkannt, Weiterleitung auf gecachtes HTML
  3. Wenn regulärer Nutzer, normale SPA ausliefern

Schnelle Einrichtung mit Prerender.io:

// Express Middleware
const prerender = require('prerender-node');
app.use(prerender.set('prerenderToken', 'YOUR_TOKEN'));

Zu beachtende Bot-Pattern:

User-agent: GPTBot
User-agent: PerplexityBot
User-agent: ClaudeBot
User-agent: ChatGPT-User
User-agent: Googlebot

Ergebnisse, die wir gesehen haben:

  • Indexierung stieg von <25% auf ~80% der Seiten
  • KI-Sichtbarkeit innerhalb von 2-3 Wochen nach Implementierung
  • Keine Auswirkungen auf das Nutzererlebnis

Kosten: Die meisten Prerendering-Dienste kosten 15–100 $/Monat – je nach Traffic.

Das ist Ihr schnellster Weg zur KI-Sichtbarkeit.

RM
ReactDev_Marcus OP Frontend Lead · January 9, 2026

Prerendering klingt nach dem schnellen Erfolg, den wir brauchen.

Frage: Ihr habt erwähnt, dass unsere hash-basierten URLs ein Problem sind. Wie kritisch ist das?

UT
URLStructure_Tom Expert · January 8, 2026

Hash-URLs sind ein GRAVIERENDES Problem:

Wie Crawler Hash-URLs sehen:

  • Ihre URL: example.com/#/products/shoes
  • Was der Crawler sieht: example.com/
  • Alle Hash-Routen = für Crawler eine Seite

Die Lösung – History API nutzen:

// Vorher (Hash-Routing)
<Route path="/#/products/:id" />

// Nachher (Browser History)
<Route path="/products/:id" />

// React Router konfigurieren
<BrowserRouter>
  <Routes>
    <Route path="/products/:id" element={<Product />} />
  </Routes>
</BrowserRouter>

Server-Konfiguration nötig:

# nginx – index.html für alle Routen ausliefern
location / {
    try_files $uri $uri/ /index.html;
}

Priorität: Das ist tatsächlich wichtiger als Prerendering. Hash-URLs bedeuten, dass Crawler Ihre Seiten buchstäblich nicht unterscheiden können.

Erst URLs fixen, dann Prerendering implementieren.

SC
SSRMigration_Chris · January 8, 2026

Falls Sie irgendwann eine Next.js-Migration erwägen:

Vorteile von SSR gegenüber Prerendering:

  • Besser für dynamische Inhalte
  • Kein Problem mit veralteten Caches
  • Verbesserte Initial-Performance
  • Bessere Core Web Vitals
  • Zukunftssicher für KI

Migrationspfad von React zu Next.js:

  1. Mit wichtigen Seiten beginnen

    • Zuerst Seiten mit dem meisten Traffic migrieren
    • Rest der Seite bleibt SPA
    • Schrittweise Einführung
  2. Next.js App Router nutzen

    • React Server Components
    • Integrierte Rendering-Optionen
    • Gute React-Kompatibilität
  3. URL-Struktur beibehalten

    • Gleiche Routen, neues Rendering
    • Keine SEO-Störungen

Zeitschätzung:

  • Einfache Seite: 2–4 Wochen
  • Mittlere Komplexität: 4–8 Wochen
  • Groß/Komplex: 2–4 Monate

Nicht zögern: Starten Sie jetzt mit Prerendering, planen Sie die Migration parallel.

SL
StructuredDataSPA_Lisa · January 8, 2026

Structured-Data-Überlegungen für SPAs:

Aktuelles Problem: Ihr JSON-LD wird wahrscheinlich auch per JavaScript geladen.

Die Lösung: Kritische Schemas direkt ins initiale HTML einbinden:

<head>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Your Company",
    ...
  }
  </script>
</head>

Für dynamische Seiten: Prerendering sollte das Schema korrekt erfassen, wenn richtig implementiert.

Schema testen:

  1. Seitenquelltext ansehen (nicht „Element untersuchen“)
  2. Prüfen, ob das Schema im initialen HTML steht
  3. Wenn nicht sichtbar, können Crawler es nicht sehen

Strukturierte Daten helfen KI, Ihren Inhalt auch mit Prerendering besser zu verstehen.

RM
ReactDev_Marcus OP Frontend Lead · January 8, 2026

Hier unser Implementierungsplan:

Woche 1: Quick Fixes

  1. Umstieg von Hash- auf Browser-History-Routing
  2. Server für SPA-Routing konfigurieren
  3. Wichtige Metatags ins initiale HTML verschieben

Woche 2–3: Prerendering

  1. Prerender.io implementieren
  2. Für KI-Crawler-User-Agents konfigurieren
  3. Prüfen, ob gecachte Seiten korrekt sind
  4. Crawl-Logs überwachen

Ab Monat 2: SSR evaluieren

  1. Komplexität der Next.js-Migration prüfen
  2. Pilot mit 1-2 Schlüsselseiten
  3. Zeitplan für komplette Migration festlegen

Monitoring:

  1. Server-Logs auf KI-Crawler-Zugriffe prüfen
  2. Am I Cited nutzen, um KI-Sichtbarkeit zu tracken
  3. KI-Abfragen für unseren Content testen

So werden wir schnell sichtbar und planen langfristig weiter.

MD
MonitorCrawlers_Dan · January 7, 2026

So überprüfen Sie, ob KI-Crawler Ihre Inhalte sehen können:

Server-Logs prüfen auf:

GPTBot - OpenAI
PerplexityBot - Perplexity
ClaudeBot - Anthropic
ChatGPT-User - ChatGPT browsing

Simulieren, was Crawler sehen:

  1. JavaScript im Browser deaktivieren
  2. Ihre Seiten aufrufen
  3. Das sehen die Crawler

Nach Prerendering:

  • Prüfen, ob Crawler 200er-Responses erhalten
  • Prüfen, ob HTML echten Content enthält
  • Test mit curl:
curl -H "User-Agent: GPTBot" https://yoursite.com/page

Crawl-Frequenz überwachen:

  • Prüfen, wie oft KI-Bots kommen
  • Gutes Prerendering = häufigere Crawls
  • Prüfen, ob alle wichtigen Seiten gecacht sind

Crawl-Überprüfung zeigt, ob der Fix funktioniert hat.

CR
ContentStrategy_Rachel · January 7, 2026

Über das Rendering hinaus – Content bleibt entscheidend:

Sobald Crawler Ihre Inhalte sehen können:

  • Sie brauchen trotzdem KI-optimierte Content-Struktur
  • Klare Überschriften und Antworten
  • Strukturierte Daten implementieren
  • Aktuelle, frische Inhalte

Nicht vergessen:

  • Rendering-Fixes lösen nur die ZUGÄNGLICHKEIT
  • Für KI-Zitate braucht es trotzdem hochwertige Inhalte
  • Die gleichen Optimierungsprinzipien gelten weiterhin

Das Rendering-Fix bringt Sie ins Spiel. Content-Optimierung entscheidet das Spiel.

Have a Question About This Topic?

Get personalized help from our team. We'll respond within 24 hours.

Frequently Asked Questions

Warum können KI-Crawler SPA-Inhalte nicht sehen?
Die meisten KI-Crawler können kein JavaScript ausführen. Wenn sie eine SPA besuchen, sehen sie nur das anfängliche HTML-Gerüst ohne die dynamisch geladenen Inhalte. Da KI-Systeme keine vollständigen Browserumgebungen haben, können sie JavaScript-Anweisungen, die den eigentlichen Seiteninhalt rendern, nicht verarbeiten.
Was ist die beste Lösung, um SPAs für KI sichtbar zu machen?
Server-Side Rendering (SSR) ist der Goldstandard. Frameworks wie Next.js, Nuxt.js und Remix rendern vollständiges HTML auf dem Server. Für bestehende SPAs können Prerendering-Dienste wie Prerender.io statisches HTML an Crawler ausliefern, ohne die Architektur zu ändern.
Funktioniert Prerendering für KI-Crawler?
Ja, Prerendering ist sehr effektiv. Es generiert statische HTML-Snapshots, auf die KI-Crawler zugreifen können. Dienste erkennen die User-Agents von Crawlern (GPTBot, PerplexityBot, ClaudeBot) und liefern vorgerenderte Versionen aus, während reguläre Nutzer die SPA erleben.
Wie beeinflussen URL-Strukturen die KI-Sichtbarkeit einer SPA?
Hash-Fragmente (#) in URLs sind problematisch – KI-Crawler behandeln sie als eine einzelne Seite. Verwenden Sie die History API und pushState, um saubere URLs wie /products/item-name statt /products#123 zu erstellen. Jede Ansicht benötigt eine eigene, beschreibende URL.

Überwachen Sie die KI-Sichtbarkeit Ihrer SPA

Überprüfen Sie, ob KI-Crawler Ihre durch JavaScript gerenderten Inhalte auf verschiedenen KI-Plattformen sehen und zitieren können.

Mehr erfahren