Wir haben für unseren Blog eine moderne React-Seite mit Infinite Scroll gebaut. Tolles Nutzererlebnis, aber unsere Inhalte erscheinen überhaupt nicht in KI-Antworten.
Google indexiert sie problemlos (nach etwas Arbeit mit SSR). Aber KI-Plattformen scheinen den Großteil unserer Inhalte zu übersehen.
Unser Setup:
Fragen:
Hat jemand aus dem Frontend-Bereich das schon gelöst?
Ich erkläre kurz, wie verschiedene KI-Crawler mit JavaScript umgehen:
JavaScript-Unterstützung bei KI-Crawlern:
| Crawler | JS-Rendering | Scroll-Simulation | Wartezeit |
|---|---|---|---|
| GPTBot | Begrenzt/keine | Nein | Minimal |
| Google-Extended | Gut (wie Googlebot) | Nein | Standard |
| ClaudeBot | Begrenzt | Nein | Minimal |
| PerplexityBot | Variiert | Nein | Begrenzt |
| Common Crawl | Keine | Nein | Keine |
Das Kernproblem:
Infinite Scroll erfordert:
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.
Empfohlene Ansätze (nach KI-Freundlichkeit):
Option 1: Traditionelle Paginierung (am KI-freundlichsten)
/blog/page/1
/blog/page/2
/blog/page/3
Option 2: Hybrider Ansatz
<!-- Infinite Scroll-Seite -->
<link rel="canonical" href="/blog/page/1" />
<!-- Paginierung immer verfügbar -->
<nav>
<a href="/blog/page/1">1</a>
<a href="/blog/page/2">2</a>
</nav>
Option 3: Prerendering für KI-Crawler
Alle Optionen haben Vor- und Nachteile. Option 1 ist am einfachsten und zuverlässigsten für KI. Option 2 erhält das UX und sorgt für KI-Zugänglichkeit.
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:
Sitemap enthält nur paginierte URLs
Infinite Scroll-Seite lädt denselben Inhalt
Interne Links zu einzelnen Artikeln
robots.txt-Hinweis:
# Crawler sollen sich auf Einzelartikel fokussieren
# Nicht auf den Infinite Scroll-Container
Sitemap: /sitemap.xml
Ergebnis:
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:
Dann Infinite Scroll als Enhancement:
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:
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:
JavaScript-deaktiviert-Test:
Quelltext-Test:
curl-Test:
curl -A "GPTBot/1.0" https://yoursite.com/blog/
Automatisierte Tests:
Google Search Console:
Lighthouse-Audit:
Was Sie sehen möchten:
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:
Startseite hat immer Paginierungslinks
?page=-Parameter sind canonical
Sitemap enthält alle paginierten URLs
Produkte haben eigene URLs
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)
Phase 2: Vorhandenes Infinite Scroll updaten (Woche 3)
Phase 3: Testen und validieren (Woche 4)
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:
Vielen Dank an alle für die detaillierten technischen Hinweise.
Get personalized help from our team. We'll respond within 24 hours.
Verfolgen Sie, welche Ihrer Seiten von KI-Plattformen gefunden und zitiert werden. Identifizieren Sie Crawling-Probleme, die Ihre Sichtbarkeit beeinträchtigen.
Erfahre, wie du Infinite Scroll umsetzt und dabei die Crawlability für KI-Crawler, ChatGPT, Perplexity und traditionelle Suchmaschinen sicherstellst. Entdecke P...
Community-Diskussion zur Optimierung von Single Page Applications für KI-Suchmaschinen. Reale Lösungen, damit JavaScript-lastige Websites für ChatGPT, Perplexit...
Diskussion in der Community darüber, wie die Paginierung die Sichtbarkeit in KI-Suchen beeinflusst. Nutzer teilen Erfahrungen mit Infinite Scroll vs. traditione...