Inhalt ohne JavaScript: Warum KI-Crawler deine Seite leer sehen

Warum das wichtig ist

Ein Browser lädt zuerst das HTML, dann CSS und JavaScript. Bei vielen modernen Seiten baut erst das Skript den eigentlichen Inhalt zusammen. Für Menschen dauert das eine halbe Sekunde. Ein Crawler, der kein JavaScript ausführt, bleibt beim ersten Schritt stehen. Bei einer reinen Single-Page-App findet er dort oft nur ein leeres <div id="root"></div> und ein paar Skript-Verweise.

Die meisten KI-Crawler arbeiten genau so. Rendern kostet Rechenzeit, und wer sehr viele Seiten am Tag abruft, spart sich das. Googlebot ist die Ausnahme: Er führt JavaScript aus, aber in einem zweiten Schritt, der sich verzögern kann. Für Google ist eine JavaScript-Seite also ein Risiko mit Wartezeit, für KI-Suchen oft ein Totalausfall.

Das betrifft nicht nur aufwendig programmierte Projekte. Auch Texte in Tabs, Akkordeons oder Slidern, die erst beim Klick nachgeladen werden, fehlen im ausgelieferten HTML. Genauso Consent-Lösungen, die den Seiteninhalt erst nach der Zustimmung per Skript einfügen. Ein Crawler klickt nicht.

So prüfst du es selbst

Alternativ schaltest du JavaScript ab: In Chrome öffnest du die Entwicklertools mit F12, drückst Strg+Shift+P, tippst "JavaScript" und wählst "JavaScript deaktivieren". Dann lädst du die Seite neu. Was jetzt noch dasteht, sieht auch ein Crawler.

Achtung bei der Elementansicht der Entwicklertools: Sie zeigt das fertig gerenderte Dokument, nachdem alle Skripte gelaufen sind. Für diesen Test taugt sie nicht.

Im kostenlosen Check zählt checkfrei die Wörter im ausgelieferten HTML, bevor irgendein Skript läuft. Unter 150 Wörtern gibt es eine Warnung, unter 50 einen Fehler. Fällt eine Seite hier durch, obwohl sie im Browser voller Text ist, hast du genau das beschriebene Problem.

1. 01Öffne deine Seite im Browser und drück Strg+U (am Mac Cmd+Option+U). Das zeigt den Quelltext so, wie der Server ihn schickt.
2. 02Such mit Strg+F nach einem Satz aus der Mitte deiner Seite.
3. 03Findest du ihn, ist alles gut. Findest du nur Skript-Verweise und leere Container, hat ein KI-Crawler nichts zu lesen.

So behebst du es

Die Wege unterscheiden sich vor allem im Aufwand. Server-Side Rendering baut das HTML bei jedem Aufruf auf dem Server. Statische Generierung baut es einmal beim Veröffentlichen. Für Firmenseiten, deren Inhalt sich selten ändert, ist das meist die beste Wahl. Prerendering ist die Notlösung für bestehende Single-Page-Apps: Ein Dienst rendert die Seiten vorab und liefert Crawlern die fertige Fassung. Das funktioniert, ist aber eine Baustelle mehr, die jemand warten muss.

Bei reinen React- oder Vue-Apps ohne Framework ist der saubere Weg ein Umzug auf ein Framework, das auf dem Server rendert: Next.js für React, Nuxt für Vue. Das ist Arbeit, aber danach steht der Text auch für Besucher schneller da.

// app/leistungen/page.tsx
// Server Component: Die Daten werden auf dem Server geholt,
// der Text steht im ausgelieferten HTML.
export default async function Leistungen() {
  const leistungen = await ladeLeistungen();
  return (
    <>
      <h1>Unsere Leistungen</h1>
      {leistungen.map((l) => (
        <section key={l.id}>
          <h2>{l.titel}</h2>
          <p>{l.text}</p>
        </section>
      ))}
    </>
  );
}

Typische Fehler

• ·Nur die Startseite getestet. Unterseiten aus einer anderen Vorlage verhalten sich oft anders.
• ·Wichtige Aussagen als Text im Bild. Im HTML steht dann nur ein Dateiname und bestenfalls ein Alternativtext.
• ·Prerendering eingerichtet und nie wieder kontrolliert. Liefert der Dienst veraltete Fassungen, merkt das niemand, weil die Seite im Browser normal aussieht.