Оптимізація Pagination SEO (rel=prev/next, Load More, Infinite Scroll)
Пагінація — один з найбільш недооцінених джерел SEO-проблем. На каталозі з 50 сторінками пагінації поисковик витрачає crawl budget на сотні сторінок з дублюючимся контентом, при тому ні одна не отримує достатньо ссилочного ваги для потрапляння в топ. Правильна пагінація — це вибір моделі (нумерована, Load More, Infinite Scroll), коректна сигналізація поисковику та збереження UX для користувача.
Після скасування rel=prev/next (2019)
Google перестав використовувати rel="prev" та rel="next" як сигнал для групування сторінок. Вони не завдають шкоди, але покладатися на них як на рішення проблеми пагінації більше неможна.
Актуальні методи:
- Canonical на першу сторінку (якщо сторінки пагінації не мають унікального контенту)
- Самоссилочний canonical на кожній сторінці пагінації (якщо контент унікальний)
- Параметр у robots.txt / GSC для виключення сторінок пагінації з індексу
- View-all сторінка як canonical source
Нумерована пагінація
Варіант A: Індексовані сторінки пагінації
Коли сторінки пагінації можуть ранжируватися самі по собі:
<!-- На /products/?page=2 -->
<link rel="canonical" href="https://example.com/products/?page=2" />
Кожна сторінка має унікальний <title> та <h1>:
<title>Каталог смартфонів — сторінка 2 | Магазин</title>
Варіант B: Все сторінки пагінації → canonical на першу
Для інформаційних розділів, блогів, архівів — де сторінка 2 не має окремої цінності:
<!-- На /blog/?page=3 -->
<link rel="canonical" href="https://example.com/blog/" />
Або noindex:
<meta name="robots" content="noindex, follow" />
follow важливий: роботу потрібно перейти по посиланням щоб знайти товари/статті.
URL-структура:
Path-based (/products/page/2/) краще ніж query-string (/products/?page=2) — краще сприймається краулерами.
Нормалізація в nginx:
if ($arg_page = "1") {
return 301 $uri;
}
Load More: SEO без змін URL
Кнопка "Загрузити ще" підгружає контент через AJAX без зміни URL.
Проблема: Google рендерить JS але не натискає кнопки — контент за "Load More" невидимий.
Рішення 1: History API + pushState
При клику змінити URL:
function loadMore(page) {
fetch(`/api/products?page=${page}`)
.then(r => r.json())
.then(data => {
appendProducts(data.items);
history.pushState(
{ page },
'',
`/products/?page=${page}`
);
});
}
Рішення 2: SSR першої порції + динамічна подгрузка
Перші N товарів рендеряться на сервері:
<div id="product-grid">
<!-- перші 24 товари статично -->
</div>
<button id="load-more" data-page="2">Загрузити ще</button>
Infinite Scroll
Найгірший варіант для SEO за замовчуванням. Контент нижче fold не гарантовано проіндексується.
Правильна реалізація: Infinite Scroll + фрагментні URL
При пересіченні порога прокрутки (Intersection Observer) змінити URL:
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const page = entry.target.dataset.page;
history.replaceState(null, '', `/products/?page=${page}`);
}
});
}, { rootMargin: '0px 0px -50% 0px' });
SEO-компроміс:
Додати стандартну нумерану пагінацію в footer, приховану CSS але видиму поисковикам:
<nav aria-label="Pagination" class="sr-only">
<a href="/products/?page=1">1</a>
<a href="/products/?page=2">2</a>
</nav>
View-All сторінка
Для невеликих каталогів (до 200–300 товарів) оптимальна єдина сторінка /products/all/ зі всіма товарами. На неї ставиться canonical зі всіх сторінок пагінації, вона отримує весь ссилочний вага.
<!-- На /products/?page=2, /products/?page=3 -->
<link rel="canonical" href="https://example.com/products/all/" />
Перевірка результату
# Перевірити що сторінки пагінації не індексуються (якщо noindex вибраний)
curl -s "https://example.com/products/?page=5" | grep -i 'canonical\|noindex'
# Рендеринг JS через Googlebot-емулятор
npx puppeteer-core --url "https://example.com/products/" --js-enabled true
Використовувати GSC URL Inspection для сторінок пагінації. Переивірити що canonical визначен коректно та noindex застосований.
Тривалість
Аудит пагінації + рекомендації — 1–2 дні. Технічна реалізація — 3–6 днів.