⚙️ JavaScript-Rendering für KI-Crawler

Vier Techniken, wie Inhalte per JavaScript geladen werden — und was Crawler davon sehen.

Experiment: Öffne den Seitenquelltext (Strg+U) und vergleiche ihn mit dem, was du hier siehst. Alle Inhalte in den blauen Feldern unten fehlen im Quelltext — sie werden erst zur Laufzeit durch JavaScript erzeugt.

1. Inline JavaScript-Daten

JS-generiert Nicht im HTML

Inhalt wird aus einer JavaScript-Variable im Seitencode generiert. Im HTML-Quelltext ist nur ein leeres <div> vorhanden — kein Text.

// Im Quelltext nur:
<div id="js-inline"></div>

// JavaScript erzeugt den Inhalt zur Laufzeit:
const items = [{ label: 'Seitentyp', value: '...' }, ...]
container.innerHTML = items.map(i => `...`).join('')

Lädt Inline-Daten …

System	Sieht den Inhalt?
Einfacher HTML-Crawler	Nein — leeres div
Googlebot (mit Rendering)	Ja
LLM-Training-Crawler	Meist Nein

2. Dynamisch via `fetch()` geladen

fetch() API Nicht im HTML

Der Inhalt wird nach dem Laden der Seite per fetch() aus data.json abgerufen. Im Quelltext gibt es nur ein Platzhalter-<div>.

fetch('data.json')
  .then(r => r.json())
  .then(data => {
    container.innerHTML = data.abschnitte.map(s => `...`).join('')
  })

Lädt Daten aus data.json …

Selbst wenn ein Crawler JavaScript ausführt, muss er den fetch()-Request abwarten. Crawler mit kurzem Timeout (häufig bei LLM-Trainings-Crawlern) sehen diesen Inhalt nicht.

3. Verzögerter Inhalt (3 Sekunden)

setTimeout Timeout-abhängig

Der Inhalt erscheint erst nach 3 Sekunden. Crawler mit einem Rendering-Timeout unter 3 Sekunden sehen diesen Inhalt nicht.

setTimeout(() => {
  container.innerHTML = '<div class="js-loaded">...</div>'
}, 3000) // 3 Sekunden Verzögerung

Inhalt erscheint in 3 Sekunden …

Rendering-Timeout des Crawlers	Sieht den Inhalt?
Unter 3 Sekunden	Nein
3–10 Sekunden (typisch Googlebot)	Ja
Kein JS-Rendering	Nein

4. Template-Literal / generierter HTML-Block

Template Literal Nicht im HTML

Ein kompletter HTML-Block wird aus JavaScript-Daten per Template-Literal generiert — typisch für React, Vue, Angular. Im Quelltext gibt es keinen dieser Texte.

const keywords = [
  { term: 'AEO', desc: 'Answer Engine Optimization' },
  { term: 'AIO', desc: 'AI Optimization' }, ...
]
container.innerHTML = keywords.map(k => `
  <div><strong>${k.term}</strong><p>${k.desc}</p></div>
`).join('')

Generiere Template …

SPA-Problem: Single Page Applications (React, Vue, Angular) rendern fast alles per Template-Literal. Ohne Server-Side Rendering (SSR) oder Static Site Generation (SSG) ist die KI-Sichtbarkeit stark eingeschränkt.

✅ Was immer sichtbar ist: JSON-LD / Schema.org

Strukturierte Daten in <script type="application/ld+json"> liegen direkt im HTML-Quelltext — komplett unabhängig von JavaScript-Rendering. Sie sind für alle Crawler sofort lesbar.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "JavaScript-Rendering und KI-Crawler",
  "author": { "@type": "Organization", "name": "SEO-AEO-AIO.de" }
}
</script>

Diese Seite enthält selbst ein JSON-LD-Block im <head>. Öffne den Quelltext und suche nach application/ld+json.

Empfehlungen für maximale KI-Sichtbarkeit

✓ Server-Side Rendering

HTML wird serverseitig generiert. Alle Crawler sehen sofort vollständigen Inhalt.

✓ JSON-LD strukturierte Daten

Schema.org-Markup im <head> — unabhängig von JS für alle lesbar.

✓ Progressives Enhancement

Basisinhalt im HTML, JS verbessert nur die Darstellung für menschliche Nutzer.

✗ Kritische Inhalte nur via fetch()

Inhalte, die für KI-Sichtbarkeit wichtig sind, nie ausschließlich per API laden.