Infinite scroll, pagination & SEO : comment les combiner sans tuer votre trafic ?

Le scroll infini, c'est beau. Fluide. Moderne. Mais si c'est mal foutu, c'est surtout un trou noir pour Google.

Une seule URL. Aucun lien profond. Pas de crawl. Pas d'indexation. Et donc : zéro trafic sur vos contenus paginés.

Et pourtant, la solution est simple : mixer scroll infini, pagination HTML et accessibilité. Une stratégie hybride, propre et éprouvée, que je recommande depuis des années. Google ne la documente pas. Mais elle fonctionne. Et je vous montre comment.

Pourquoi c'est crucial : SEO, accessibilité, exigences 2025

Google ne scroll pas, il clique

Oui, votre script JS qui charge des blocs au scroll est génial. Mais Google ne scrolle pas comme vos users.
Et non, il n'utilise plus les balises <link rel="next"> et <link rel="prev"> depuis 2019.

Ce que Google attend ?
Des liens HTML clairs vers chaque page, accessibles sans JavaScript.

Est-ce qu'on utilise quand même les <link rel="next"> et <link rel="prev"> ? Oui, il n'y a pas que Google dans la vie.

Le scroll infini n'est pas conforme si vous oubliez l'accessibilité

Depuis le European Accessibility Act 2025, vous avez l'obligation d'offrir une navigation :

• utilisable au clavier
• avec repères clairs et structurés
• accessible sans deviner "qu'il faut scroller pour charger plus"
• Pas de pagination = pas de repères = non conforme.

Pagination vs scroll infini vs "Afficher plus" : que choisir ?

Et c'est là qu'intervient la stratégie combinée.

La stratégie hybride recommandée

1. Commencez par une pagination HTML

<nav class="pagination" aria-label="Pagination">
  <ul>
    <li><a href="/blog/page/1" aria-label="Aller à la page 1">1</a></li>
    <li><a href="/blog/page/2" aria-label="Aller à la page 2">2</a></li>
    <li><a href="/blog/page/3" aria-current="page" aria-label="Page 3">3</a></li>
    <li><a href="/blog/page/4" aria-label="Aller à la page 4">4</a></li>
    <!-- ... -->
  </ul>
</nav>

Navigable sans JS, accessible clavier, et crawlable, tout est ok.

2. Ajoutez un bouton "Charger plus"

<button id="load-more" aria-label="Charger plus d'articles">
  Charger plus
</button>

Ce bouton déclenche ensuite le passage en infinite scroll, après action explicite.

3. Activez l'infinite scroll après ce clic

const loadMoreButton = document.getElementById('load-more');
let page = 4;
let scrollEnabled = false;

loadMoreButton.addEventListener('click', (e) => {
  e.preventDefault()
  scrollEnabled = true;
  loadPage(page++);
});

const observer = new IntersectionObserver((entries) => {
  const entry = entries[0];
  if (entry.isIntersecting && scrollEnabled) {
    loadPage(page);
    history.pushState(null, "", `/blog/page/${page}`);
    page++;
  }
}, {
  root: null,
  rootMargin: '0px',
  threshold: 1.0
});

observer.observe(loadMoreButton);

Important : le changement d'URL (pushState) permet aux utilisateurs de partager un lien profond, et à Google de suivre la structure, s'il y a une vraie page derrière.

4. Test sans JS

Coupez JavaScript dans votre navigateur. Est-ce que vous pouvez aller à /blog/page/7 ?
Si non : votre contenu profond est invisible.

5. Balise canonical sur la page courante

Sur /blog/page/3 et surtout pas vers /page/1

<link rel="canonical" href="https://votre-site.com/blog/page/3">

Doit-on indexer les pages suivantes ?

La règle est simple :
On indexe les pages paginées, sauf si elles sont liées à des paramètres de tri ou de filtre.
Pourquoi ?
Parce qu'une URL comme /produits?page=2&sort=prix-desc génère une version alternative d'un contenu déjà existant.
Si vous laissez Google indexer toutes ces variations, vous dupliquez le contenu pour rien.

Ce que l'on veut :
/articles/page/2 : indexable
/articles/page/2?sort=popularity : noindex

Et surtout :
La balise canonical doit pointer vers la page courante.
Jamais vers la page 1. Jamais vers une URL filtrée.

Besoin de pagination profonde propre ? Utilisez deep-pagination

Quand vous avez 1 000, 10 000 voire 1 000 000 de pages, afficher tous les numéros est absurde. Mais vous devez permettre à Google et à l'utilisateur d'accéder à des pages lointaines intelligemment.

En SEO, plus une page est éloignée de la page d’accueil, moins elle bénéficie de jus de lien. Pour un contenu situé en page 1337, par exemple, il est essentiel de construire une pagination intelligente permettant d’y accéder avec un minimum de clics depuis la page d’accueil.

C’est pour ça que j’ai open-sourcé une petite lib à l'occasion de cet article : deep-pagination.
Je l'ai conçue pour gérer la pagination profonde avec un bon équilibre entre SEO, accessibilité et lisibilité, je l'utilise en prod depuis des années.

Exemple d'utilisation :

npm install deep-pagination

import { deepPagination } from 'deep-pagination';

const result = deepPagination({
  current: 1250,
  max: 50000
});

console.log(result.pages);
// [1, 250, 500, 1000, "…", 1248, 1249, 1250, 1251, 1252, "…", 5000, 10000, 25000, 50000]

Parfait pour générer des <li><a> dans une pagination sémantique :

<nav aria-label="Pagination">
  <ul>
    <!-- ... -->
    <li><a href="/page/1000" aria-label="Aller à la page 1000">1000</a></li>
    <li><span aria-hidden="true">…</span></li>
    <li><a href="/page/1249" aria-label="Aller à la page 1249">1249</a></li>
    <li><a href="/page/1250" aria-current="page" aria-label="Page 1250">1250</a></li>
    <li><a href="/page/1251" aria-label="Aller à la page 1251">1251</a></li>
    <li><span aria-hidden="true">…</span></li>
    <!-- ... -->
  </ul>
</nav>

Résumé : les règles d'or

• Chaque page paginée a une URL propre et indexable
• La canonical pointe vers la page courante, jamais vers la page 1
• On indexe la pagination, sauf si elle contient des paramètres de tri ou de filtre
• Le scroll infini n'est activé qu'après une action utilisateur
• L'URL change dynamiquement (pushState) pour les pages chargées
• On teste sans JavaScript pour s'assurer que tout est crawlable
• On peut utiliser deep-pagination pour générer intelligemment des liens vers des pages profondes