Wie gehen KI-Crawler mit Infinite Scroll um? Unsere Inhalte werden nicht indexiert

Ich erkläre kurz, wie verschiedene KI-Crawler mit JavaScript umgehen:

JavaScript-Unterstützung bei KI-Crawlern:

Das Kernproblem:

Infinite Scroll erfordert:

1. JavaScript-Ausführung
2. Auslösen von Scroll-Events
3. Zusätzliche HTTP-Anfragen
4. Rendering der neuen Inhalte

Die meisten KI-Crawler scheitern an Schritt 1 oder 2.

Warum SSR nicht ausreicht:

Ihr SSR liefert die Startseite. Aber Infinite Scroll-Inhalte sind nicht „initial“ – sie laden erst bei Interaktion. SSR löst die Interaktionsabhängigkeit nicht.

Das grundlegende Problem:

Infinite Scroll ist mit den aktuellen Fähigkeiten von KI-Crawlern grundsätzlich inkompatibel. Sie brauchen eine alternative Lösung.

Wir hatten genau dieses Problem. Unsere Lösung:

Hybrider Ansatz in der Praxis:

// URL-Struktur
/blog              // Infinite Scroll (Standard für Nutzer)
/blog/archive/1    // Paginiert (für Crawler zugänglich)
/blog/archive/2

Wichtige Details:

1. Sitemap enthält nur paginierte URLs

   • KI-Crawler finden /blog/archive/* Seiten
   • Diese rendern vollständigen Inhalt serverseitig

2. Infinite Scroll-Seite lädt denselben Inhalt

   • Nutzt die Pagination-API im Hintergrund
   • Besseres UX für Menschen

3. Interne Links zu einzelnen Artikeln

   • Nicht zur Scroll-Position
   • Jeder Artikel hat eine eigene URL

4. robots.txt-Hinweis:

# Crawler sollen sich auf Einzelartikel fokussieren
# Nicht auf den Infinite Scroll-Container
Sitemap: /sitemap.xml

Ergebnis:

• UX für Menschen bleibt (Infinite Scroll)
• KI-Crawler greifen über die Archivseiten auf alle Inhalte zu
• Einzelne Artikel werden alle indexiert
• Zitierquote nach Umsetzung um das 4-fache gestiegen

Next.js-spezifischer Ansatz:

Mit getStaticPaths + getStaticProps:

// pages/blog/page/[page].js
export async function getStaticPaths() {
  const totalPages = await getTotalPages();
  const paths = Array.from({ length: totalPages }, (_, i) => ({
    params: { page: String(i + 1) }
  }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const posts = await getPostsForPage(params.page);
  return { props: { posts, page: params.page } };
}

Vorteile:

• Statische Seiten für jede Paginierung
• Voller Inhalt im HTML beim Build
• KI-Crawler erhalten den kompletten Inhalt
• Schnelle Ladezeiten (statisch)

Dann Infinite Scroll als Enhancement:

• Infinite Scroll clientseitig nutzt dieselbe API
• Progressive Enhancement-Ansatz
• Funktioniert auch ohne JS

So bekommen Sie das Beste aus beiden Welten.

Prerendering als Option:

Prerendering-Dienste für KI-Crawler:

Sie können KI-Crawler anhand des User-Agents erkennen und prerenderte Inhalte ausliefern:

// middleware
if (isAICrawler(req.headers['user-agent'])) {
  return servePrerenderedVersion(req.url);
}

KI-Crawler-Erkennung:

const aiCrawlers = [
  'GPTBot',
  'ChatGPT-User',
  'Google-Extended',
  'ClaudeBot',
  'PerplexityBot',
  'anthropic-ai'
];

function isAICrawler(userAgent) {
  return aiCrawlers.some(crawler =>
    userAgent.includes(crawler)
  );
}

Prerendering-Optionen:

• Prerender.io
• Rendertron
• Eigene Lösung auf Basis von Puppeteer
• Prerendering zur Build-Zeit

Achtung:

Nicht alle KI-Crawler geben sich eindeutig zu erkennen. Manche werden evtl. nicht erfasst. Dies ist ein ergänzender Ansatz, kein Ersatz für korrekte Paginierung.

Testmethodik für die KI-Crawler-Zugänglichkeit:

Manuelle Tests:

1. JavaScript-deaktiviert-Test:

   • Blog im Browser öffnen
   • JavaScript deaktivieren
   • Welche Inhalte sind sichtbar?
   • Das entspricht der Sicht vieler Crawler

2. Quelltext-Test:

   • Seitenquelltext anzeigen (nicht „Element untersuchen“)
   • Ist der Inhalt im HTML?
   • Oder nur JavaScript-Platzhalter?

3. curl-Test:

   curl -A "GPTBot/1.0" https://yoursite.com/blog/
   

   • Ist im Response echter Inhalt enthalten?

Automatisierte Tests:

4. Google Search Console:

   • URL-Prüfungstool
   • „Gerenderte Seite anzeigen“ zeigt, was Googlebot sieht
   • (Nicht KI-Crawler, aber ähnliches JS-Rendering)

5. Lighthouse-Audit:

   • „SEO“-Kategorie prüfen
   • Crawlability-Probleme werden angezeigt

Was Sie sehen möchten:

• Inhalt in der initialen HTML-Antwort
• Links zu allen Seiten auffindbar
• Kein JS für Inhaltsanzeige erforderlich

E-Commerce-Perspektive:

Wir haben 10.000+ Produkte mit „Mehr laden“-Funktion. So lösen wir es:

Kategorie-Seitenstruktur:

/category/shoes                    # Erste 24 Produkte + Mehr laden
/category/shoes?page=2            # Produkte 25-48
/category/shoes?page=3            # Produkte 49-72

Umsetzung:

1. Startseite hat immer Paginierungslinks

   • Auch bei aktiviertem Infinite Scroll
   • Im Footer Links zu Seite 1, 2, 3…

2. ?page=-Parameter sind canonical

   • Jede Seite ist eigener Inhalt
   • Kein Duplikat der Hauptseite

3. Sitemap enthält alle paginierten URLs

   • Nicht nur die Infinite Scroll-URL

4. Produkte haben eigene URLs

   • Kategorie-Paginierung dient der Auffindbarkeit
   • Produkte sind der eigentliche Inhalt

Ergebnis:

KI-Plattformen zitieren unsere Produktseiten, die sie über die paginierte Kategoriestruktur finden.

Das war extrem hilfreich. Hier mein Umsetzungsplan:

Ansatz: Hybride Paginierung

Phase 1: Paginierte Routen einführen (Woche 1-2)

• /blog/archive/[page] Routen erstellen
• SSR für vollen Inhalt im HTML
• Paginierungsnavigation einbauen
• Sitemap entsprechend anpassen

Phase 2: Vorhandenes Infinite Scroll updaten (Woche 3)

• Infinite Scroll für /blog beibehalten
• Archivseiten als Datenquelle nutzen
• Canonical von /blog auf /blog/archive/1

Phase 3: Testen und validieren (Woche 4)

• Mit deaktiviertem JS testen
• curl-Test für KI-User-Agents
• KI-Zitierquote überwachen

Technische Umsetzung:

/blog                 → Infinite Scroll (Menschen, canonical zu archive/1)
/blog/archive/1       → Paginiert (Crawler, canonical zu self)
/blog/archive/2       → Paginiert (Crawler)
/blog/[slug]          → Einzelartikel (Hauptinhalt)

Leitprinzipien:

• Inhalte ohne JavaScript zugänglich
• Jedes Stück Inhalt hat eine direkte URL
• Sitemap enthält alle Inhaltsseiten
• Infinite Scroll ist ein Enhancement, kein Muss

Vielen Dank an alle für die detaillierten technischen Hinweise.