Comment les crawlers IA gèrent-ils l'infinite scroll ? Notre contenu n'est pas indexé

Je vais détailler comment différents crawlers IA gèrent le JavaScript :

Support JavaScript des crawlers IA :

Le problème central :

L’infinite scroll nécessite :

1. Exécution JavaScript
2. Déclenchement d’événement de scroll
3. Requêtes HTTP supplémentaires
4. Rendu du nouveau contenu

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.

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 :

1. Le sitemap n’inclut que les URLs paginées

   • Les crawlers IA trouvent les pages /blog/archive/*
   • Elles rendent tout le contenu côté serveur

2. La page infinite scroll charge le même contenu

   • Utilise l’API de pagination en interne
   • Meilleure UX pour les humains

3. Les liens internes mènent aux articles individuels

   • Pas à la position infinite scroll
   • Chaque article a sa propre URL

4. Conseils robots.txt :

# Laisser les crawlers se concentrer sur les articles individuels
# Pas sur le conteneur infinite scroll
Sitemap: /sitemap.xml

Résultats :

• UX humain inchangée (infinite scroll)
• Les crawlers IA accèdent à tout via les pages archives
• Tous les articles individuels sont indexés
• Le taux de citation a quadruplé après mise en place

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 :

• Pages statiques pour chaque pagination
• Tout le contenu dans le HTML au build
• Les crawlers IA reçoivent l’intégralité du contenu
• Chargement rapide (statique)

Puis ajoutez l’infinite scroll en amélioration :

• L’infinite scroll côté client utilise la même API
• Approche progressive enhancement
• Fonctionne aussi sans JS

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 :

• Prerender.io
• Rendertron
• Solution custom basée sur Puppeteer
• Prerendering au build

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 :

1. Test sans JavaScript :

   • Ouvrez votre blog dans un navigateur
   • Désactivez JavaScript
   • Quel contenu est visible ?
   • Cela se rapproche de la vue d’un crawler sans JS

2. Test affichage du code source :

   • Affichez le code source de la page (pas l’inspecteur)
   • Votre contenu est-il dans le HTML ?
   • Ou bien seulement des placeholders JS ?

3. Test curl :

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

   • La réponse contient-elle le vrai contenu ?

Tests automatisés :

4. Google Search Console :

   • Outil d’inspection d’URL
   • “Page rendue” montre ce que voit Googlebot
   • (Pas les crawlers IA, mais un rendu JS similaire)

5. Audit Lighthouse :

   • Vérifiez la catégorie “SEO”
   • Problèmes de crawl détectés

Ce que vous voulez voir :

• Contenu dans la réponse HTML initiale
• Liens vers toutes les pages découvrables
• Aucun JS requis pour la visibilité du contenu

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 :

1. La page initiale a toujours des liens de pagination

   • Même avec infinite scroll activé
   • Le footer contient les liens page 1, 2, 3…

2. Les paramètres ?page= sont canoniques

   • Chaque page a son propre contenu
   • Pas un duplicata de la page principale

3. Le sitemap inclut toutes les URLs paginées

   • Pas seulement l’URL de base infinite scroll

4. Les produits ont des URLs individuelles

   • La pagination catégorie est pour la découverte
   • Les produits sont le vrai contenu

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)

• Créer les routes /blog/archive/[page]
• SSR pour tout le contenu dans le HTML
• Ajouter la navigation de pagination
• Mettre à jour le sitemap pour les inclure

Phase 2 : Mettre à jour l’infinite scroll existant (Semaine 3)

• Garder l’infinite scroll sur /blog
• Utiliser les pages archive comme source de données
• Canonical de /blog vers /blog/archive/1

Phase 3 : Tests et validation (Semaine 4)

• Tester sans JS
• Tests curl pour user agents IA
• Suivi du taux de citation IA

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 :

• Contenu accessible sans JavaScript
• Chaque contenu a une URL directe
• Le sitemap inclut toutes les pages de contenu
• L’infinite scroll est un plus, pas une exigence

Merci à tous pour vos conseils techniques détaillés.