Nous avons construit un site React moderne avec infinite scroll pour notre blog. Super expérience utilisateur, mais notre contenu n’apparaît pas du tout dans les réponses IA.
Google l’indexe correctement (après du travail avec le SSR). Mais les plateformes IA semblent ignorer la majorité de notre contenu.
Notre configuration :
Questions :
Des dev frontend ont-ils déjà géré ça ?
Je vais détailler comment différents crawlers IA gèrent le JavaScript :
Support JavaScript des crawlers IA :
| Crawler | Rendu JS | Simulation du scroll | Temps d’attente |
|---|---|---|---|
| GPTBot | Limité/Aucun | Non | Minimal |
| Google-Extended | Bon (comme Googlebot) | Non | Standard |
| ClaudeBot | Limité | Non | Minimal |
| PerplexityBot | Variable | Non | Limité |
| Common Crawl | Aucun | Non | Aucun |
Le problème central :
L’infinite scroll nécessite :
La plupart des crawlers IA échouent à l’étape 1 ou 2.
Pourquoi le SSR ne suffit pas :
Votre SSR sert la page initiale. Mais le contenu infinite scroll n’est pas “initial” – il charge sur interaction. Le SSR ne résout pas la dépendance à l’interaction.
Le problème fondamental :
L’infinite scroll est fondamentalement incompatible avec les capacités actuelles des crawlers IA. Il vous faut une approche alternative.
Approches recommandées (par ordre de compatibilité IA) :
Option 1 : Pagination traditionnelle (la plus compatible IA)
/blog/page/1
/blog/page/2
/blog/page/3
Option 2 : Approche hybride
<!-- Page infinite scroll -->
<link rel="canonical" href="/blog/page/1" />
<!-- Pagination toujours disponible -->
<nav>
<a href="/blog/page/1">1</a>
<a href="/blog/page/2">2</a>
</nav>
Option 3 : Prerender pour les crawlers IA
Chaque option a ses compromis. L’option 1 est la plus simple et la plus fiable pour l’IA. L’option 2 préserve votre UX tout en ajoutant l’accessibilité IA.
Nous avons eu exactement ce problème. Voici notre solution :
Mise en place de l’approche hybride :
// Structure des URLs
/blog // Infinite scroll (par défaut pour l'utilisateur)
/blog/archive/1 // Paginé (accessible au crawler)
/blog/archive/2
Points clés de l’implémentation :
Le sitemap n’inclut que les URLs paginées
La page infinite scroll charge le même contenu
Les liens internes mènent aux articles individuels
Conseils robots.txt :
# Laisser les crawlers se concentrer sur les articles individuels
# Pas sur le conteneur infinite scroll
Sitemap: /sitemap.xml
Résultats :
Approche spécifique Next.js :
Utilisation de 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 } };
}
Avantages :
Puis ajoutez l’infinite scroll en amélioration :
Cela vous donne le meilleur des deux mondes.
Ajout du prerendering comme option :
Services de prerendering pour les crawlers IA :
Vous pouvez détecter les user agents IA et servir du contenu pré-rendu :
// middleware
if (isAICrawler(req.headers['user-agent'])) {
return servePrerenderedVersion(req.url);
}
Détection des crawlers IA :
const aiCrawlers = [
'GPTBot',
'ChatGPT-User',
'Google-Extended',
'ClaudeBot',
'PerplexityBot',
'anthropic-ai'
];
function isAICrawler(userAgent) {
return aiCrawlers.some(crawler =>
userAgent.includes(crawler)
);
}
Options de prerendering :
Attention :
Tous les crawlers IA ne s’identifient pas clairement. Certains peuvent passer inaperçus. C’est une approche complémentaire, pas un substitut à une pagination correcte.
Méthodologie de test pour l’accessibilité crawler IA :
Tests manuels :
Test sans JavaScript :
Test affichage du code source :
Test curl :
curl -A "GPTBot/1.0" https://yoursite.com/blog/
Tests automatisés :
Google Search Console :
Audit Lighthouse :
Ce que vous voulez voir :
Point de vue e-commerce :
Nous avons plus de 10 000 produits avec une fonctionnalité “charger plus”. Notre solution :
Structure des pages catégories :
/category/shoes # 24 premiers produits + charger plus
/category/shoes?page=2 # Produits 25-48
/category/shoes?page=3 # Produits 49-72
Mise en œuvre :
La page initiale a toujours des liens de pagination
Les paramètres ?page= sont canoniques
Le sitemap inclut toutes les URLs paginées
Les produits ont des URLs individuelles
Résultat :
Les plateformes IA citent nos pages produits individuelles, qu’elles découvrent via la structure de catégories paginées.
Ça a été extrêmement utile. Voici mon plan d’implémentation :
Approche : Pagination hybride
Phase 1 : Ajouter des routes paginées (Semaine 1-2)
Phase 2 : Mettre à jour l’infinite scroll existant (Semaine 3)
Phase 3 : Tests et validation (Semaine 4)
Implémentation technique :
/blog → Infinite scroll (humains, canonical vers archive/1)
/blog/archive/1 → Paginé (crawlers, canonical vers soi-même)
/blog/archive/2 → Paginé (crawlers)
/blog/[slug] → Articles individuels (contenu principal)
Principes clés :
Merci à tous pour vos conseils techniques détaillés.
Get personalized help from our team. We'll respond within 24 hours.
Suivez quelles pages de votre site sont découvertes et citées par les plateformes IA. Identifiez les problèmes de crawl qui affectent votre visibilité.
Découvrez comment implémenter le scroll infini tout en maintenant l'explorabilité pour les crawlers IA, ChatGPT, Perplexity et les moteurs de recherche traditio...
Discussion communautaire sur le rendu JavaScript par les crawlers IA. Les développeurs partagent leurs expériences avec React, Next.js et autres frameworks JS p...
Discussion communautaire sur l’impact du JavaScript sur le crawling par l’IA. Retours d’expérience réels de développeurs et professionnels SEO testant l’impact ...