We hebben een moderne React-site gebouwd met infinite scroll voor onze blog. Geweldige gebruikerservaring, maar onze content verschijnt helemaal niet in AI-antwoorden.
Google indexeert het prima (na wat werk met SSR). Maar AI-platforms lijken het grootste deel van onze content te missen.
Onze setup:
Vragen:
Zijn er frontend-devs die hiermee ervaring hebben?
Laat me uitleggen hoe verschillende AI-crawlers omgaan met JavaScript:
AI-crawler JavaScript-ondersteuning:
| Crawler | JS Rendering | Scroll Simulatie | Wachtijd |
|---|---|---|---|
| GPTBot | Beperkt/Geen | Nee | Minimaal |
| Google-Extended | Goed (zoals Googlebot) | Nee | Standaard |
| ClaudeBot | Beperkt | Nee | Minimaal |
| PerplexityBot | Variabel | Nee | Beperkt |
| Common Crawl | Geen | Nee | Geen |
Het kernprobleem:
Infinite scroll vereist:
De meeste AI-crawlers falen bij stap 1 of 2.
Waarom SSR niet genoeg is:
Je SSR levert de initiële pagina. Maar infinite scroll-content is niet “initieel” – het laadt pas na interactie. SSR lost de interactie-afhankelijkheid niet op.
Het fundamentele probleem:
Infinite scroll is fundamenteel onverenigbaar met de huidige AI-crawler mogelijkheden. Je hebt een alternatieve aanpak nodig.
Aanbevolen aanpakken (op volgorde van AI-vriendelijkheid):
Optie 1: Traditionele paginering (meest AI-vriendelijk)
/blog/page/1
/blog/page/2
/blog/page/3
Optie 2: Hybride aanpak
<!-- Infinite scroll pagina -->
<link rel="canonical" href="/blog/page/1" />
<!-- Paginering altijd beschikbaar -->
<nav>
<a href="/blog/page/1">1</a>
<a href="/blog/page/2">2</a>
</nav>
Optie 3: Prerender voor AI-crawlers
Elke optie heeft nadelen. Optie 1 is het eenvoudigst en meest betrouwbaar voor AI. Optie 2 behoudt je UX en voegt AI-toegankelijkheid toe.
Wij hadden exact hetzelfde probleem. Dit is onze oplossing:
De hybride aanpak geïmplementeerd:
// URL-structuur
/blog // Infinite scroll (standaard voor gebruiker)
/blog/archive/1 // Gepagineerd (toegankelijk voor crawlers)
/blog/archive/2
Belangrijke implementatiedetails:
Sitemap bevat alleen gepagineerde URL’s
Infinite scroll-pagina laadt dezelfde content
Interne links verwijzen naar individuele artikelen
robots.txt-aanwijzing:
# Laat crawlers focussen op individuele artikelen
# Niet op de infinite scroll-container
Sitemap: /sitemap.xml
Resultaten:
Next.js-specifieke aanpak:
Gebruik van 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 } };
}
Voordelen:
Voeg daarna infinite scroll toe als verbetering:
Dit geeft je het beste van beide werelden.
Prerendering als optie toevoegen:
Prerenderingservices voor AI-crawlers:
Je kunt AI-crawler user agents detecteren en prerendered content serveren:
// middleware
if (isAICrawler(req.headers['user-agent'])) {
return servePrerenderedVersion(req.url);
}
AI-crawler detectie:
const aiCrawlers = [
'GPTBot',
'ChatGPT-User',
'Google-Extended',
'ClaudeBot',
'PerplexityBot',
'anthropic-ai'
];
function isAICrawler(userAgent) {
return aiCrawlers.some(crawler =>
userAgent.includes(crawler)
);
}
Prerendering-opties:
Let op:
Niet alle AI-crawlers identificeren zich duidelijk. Sommige kunnen worden gemist. Dit is een aanvullende aanpak, geen vervanging voor goede paginering.
Testmethodiek voor AI-crawler toegankelijkheid:
Handmatige tests:
JavaScript uitschakelen test:
Broncode bekijken:
curl-test:
curl -A "GPTBot/1.0" https://jouwsite.com/blog/
Geautomatiseerde tests:
Google Search Console:
Lighthouse audit:
Wat je wilt zien:
E-commerce perspectief:
Wij hebben 10.000+ producten met “meer laden”-functionaliteit. Dit is onze oplossing:
Categoriepagina structuur:
/category/schoenen # Eerste 24 producten + meer laden
/category/schoenen?page=2 # Producten 25-48
/category/schoenen?page=3 # Producten 49-72
Implementatie:
Initiële pagina heeft altijd pagineringslinks
?page=-parameters zijn canoniek
Sitemap bevat alle gepagineerde URL’s
Producten hebben individuele URL’s
Resultaat:
AI-platformen citeren onze individuele productpagina’s, die ze ontdekken via de gepagineerde categorie-structuur.
Dit was ontzettend behulpzaam. Dit is mijn implementatieplan:
Aanpak: Hybride paginering
Fase 1: Gepagineerde routes toevoegen (week 1-2)
Fase 2: Bestaande infinite scroll updaten (week 3)
Fase 3: Testen en valideren (week 4)
Technische implementatie:
/blog → Infinite scroll (mensen, canonical naar archive/1)
/blog/archive/1 → Gepagineerd (crawlers, canonical naar zichzelf)
/blog/archive/2 → Gepagineerd (crawlers)
/blog/[slug] → Individuele artikelen (hoofdcontent)
Belangrijke principes:
Iedereen bedankt voor de gedetailleerde technische adviezen.
Get personalized help from our team. We'll respond within 24 hours.
Volg welke van je pagina's worden ontdekt en geciteerd door AI-platforms. Identificeer crawlproblemen die je zichtbaarheid beïnvloeden.
Discussie in de community over JavaScript-rendering door AI-crawlers. Ontwikkelaars delen ervaringen met React, Next.js en andere JS-frameworks voor AI-zichtbaa...
Discussie binnen de community over hoe JavaScript AI-crawling beïnvloedt. Echte ervaringen van ontwikkelaars en SEO-professionals die testen wat het effect is v...
Communitydiscussie over het optimaliseren van Single Page Applications voor AI-zoekmachines. Echte oplossingen om JavaScript-rijke sites zichtbaar te maken voor...