Infinite scroll, pagination & SEO: how to combine them without killing your traffic?

Infinite scroll is beautiful. Smooth. Modern. But when implemented poorly, it becomes a black hole for Google.

One single URL. No deep links. No crawl. No indexing.
Which means: zero traffic to your paginated content.

Fortunately, the fix is simple: combine infinite scroll, HTML pagination and accessibility. It’s a clean, hybrid strategy I’ve recommended for years. Google doesn’t document it, but it works. And I’ll show you how.

Why it matters: SEO, accessibility, and 2025 requirements

Google doesn’t scroll, it clicks

Yes, your JavaScript script that loads blocks on scroll is brilliant. But Google doesn’t scroll like your users.
And no, it no longer uses <link rel="next"> and <link rel="prev"> since 2019.

What does Google expect instead?
Clear HTML links to every page, accessible without JavaScript.

Should you still use <link rel="next"> and <link rel="prev">?
Yes—you’re not just optimizing for Google. Other crawlers still use them.

Infinite scroll breaks accessibility

With the European Accessibility Act 2025, you're required to provide navigation that is:

• Keyboard-navigable
• Clearly structured
• Usable without having to "guess that you need to scroll"
• No pagination = no landmarks = non-compliant.

Pagination vs infinite scroll vs "Load more": what to choose?

And that’s where the hybrid strategy comes in.

The recommended hybrid strategy

1. Start with clean HTML pagination

<nav class="pagination" aria-label="Pagination">
  <ul>
    <li><a href="/blog/page/1" aria-label="Go to page 1">1</a></li>
    <li><a href="/blog/page/2" aria-label="Go to 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="Go to page 4">4</a></li>
    <!-- ... -->
  </ul>
</nav>

Navigable without JS, keyboard accessible, and crawlable; perfect.

2. Add a “Load more” button

<button id="load-more" aria-label="Load more articles">
  Load more
</button>

This triggers the transition to infinite scroll, after explicit user action.

3. Activate infinite scroll after the click

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: The pushState URL change allows users to share deep links, and helps Google follow the structure, as long as a real page exists behind it.

4. Test with JavaScript disabled

Turn off JS in your browser. Can you still navigate to /blog/page/7?
If not: your deep content is invisible.

5. Canonical tag on the current page

On /blog/page/3, not /page/1:

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

Should we index paginated pages?

Simple rule:
Index paginated pages
Noindex pages with sorting or filtering parameters

Why?
A URL like /products?page=2&sort=price-desc is just a variation of existing content.
Letting Google index them just duplicates content unnecessarily.

What we want:
/articles/page/2 : indexable
/articles/page/2?sort=popularity : noindex

And always:
Canonical must point to the current page.
Never to page 1, and never to a filtered URL

Need clean deep pagination? Use deep-pagination

If you have 1,000, 10,000, or 1,000,000+ pages, showing every number is absurd.
But you still need to let users and Google access deep pages intelligently.

In SEO, the further a page is from the homepage, the less link juice it receives. For content located on page 1337, for example, it's essential to build intelligent pagination that allows access with minimal clicks from the homepage.

To help with that, I open-sourced a tiny library for this article: deep-pagination
I’ve used it in production for years. It balances SEO, accessibility, and UX.

Example usage:

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]

Perfect for generating semantic pagination links:

<nav aria-label="Pagination">
  <ul>
    <!-- ... -->
    <li><a href="/page/1000" aria-label="Go to page 1000">1000</a></li>
    <li><span aria-hidden="true">…</span></li>
    <li><a href="/page/1249" aria-label="Go to 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="Go to page 1251">1251</a></li>
    <li><span aria-hidden="true">…</span></li>
    <!-- ... -->
  </ul>
</nav>

Summary: golden rules for SEO-friendly pagination

• Every paginated page has a unique, indexable URL
• Canonical always points to the current page, never to page 1
• We index paginated content unless it's filtered or sorted
• Infinite scroll only starts after user interaction
• The URL updates with pushState as new content loads
• We test without JavaScript to ensure crawlability
• We can use deep-pagination to generate smart deep links