Каталог с тысячей товаров или блог за пять лет писательства невозможно выложить одной страницей. Браузер зависнет на загрузке, пользователь не доскроллит до низа, поисковик не сможет нормально проиндексировать — три проблемы от одной попытки показать все разом. Пагинация решает все три одновременно. Разберем, что это и как ее правильно на сайте настроить, в том числе с точки зрения SEO.
Что такое пагинация
Пагинация — это механизм разделения большого массива однотипного контента на отдельные страницы со ссылочной навигацией между ними. Если в каталоге 500 карточек товаров, а на странице выводится 20, получится 25 страниц — связь между ними и есть пагинация.
Технически это блок ссылок внизу страницы — номера, кнопки «Назад» и «Вперед», иногда «В начало» и «В конец». Каждая страница имеет собственный URL (как правило, с параметром `?page=2` или с сегментом `/page/2/`). Поисковые роботы обходят их как отдельные документы, пользователи кликают по нужному номеру.
У пагинации есть две альтернативы — бесконечная прокрутка (контент подгружается автоматически во время скролла) и кнопка «Загрузить еще» (новые блоки добавляются по клику). У каждого варианта свои сильные и слабые стороны, но классическая пагинация остается самой универсальной — ее одинаково хорошо понимают и пользователи сайта, и роботы.
Зачем нужна пагинация
Основная цель — чтобы пользователь не утонул в тысяче карточек на одной странице сайта. За этим стоит несколько более глубоких причин, важных для любого крупного проекта:
- Скорость загрузки — 20–30 товаров грузятся за секунду, 500 — за полминуты и больше.
- Нагрузка на сервер — меньше запросов к базе данных, меньше отдаваемого HTML.
- Удобство ориентации на сайте — пользователь видит текущее место своего нахождения в каталоге и его объем.
- Сохранение состояния — после клика по карточке и возврата назад страница та же.
- Индексация — поисковики обходят документы по отдельности и лучше понимают структуру.
- Шеринг — конкретную страницу выдачи можно отправить ссылкой.
- Аналитика — видно, до какой глубины доходит пользователь.
Без пагинации интернет-магазин с серьезным каталогом фактически перестает работать — страница не открывается, поисковик не индексирует, конверсия рушится в ноль.
Как сделать пагинацию
Реализация пагинации зависит от стека технологий. На самописных движках все делается вручную через серверный код, на CMS — встроенными средствами или плагинами, во фреймворках — готовыми хелперами.
Базовая схема для связки PHP и MySQL выглядит так:
- Получить общее количество записей через `COUNT(*)`
- Разделить на количество элементов на странице (например, 20)
- Округлить в большую сторону
- Из URL прочитать номер текущей страницы, по умолчанию первая
- Сформировать SQL-запрос с `LIMIT` и `OFFSET` — для третьей страницы это будет `LIMIT 20 OFFSET 40`
- Вывести список записей в шаблон
- Сформировать блок навигации со ссылками на соседние и крайние страницы
Современные фреймворки (Laravel, Symfony, Django, Rails) умеют это из коробки — достаточно вызвать метод коллекции и передать количество элементов. На фронтенде для React, Vue и Angular есть готовые библиотеки `react-paginate`, `vue-paginate`, `ngx-pagination` — они избавляют от рутины с пересчетом смещений.
Какой URL делать для первой страницы пагинации? Канонический вариант без параметра, то есть `/catalog/` и `/catalog/page/1/` должны вести на один документ. Второй URL чаще всего склеивают 301-м редиректом на основной, иначе получите дубль с самого старта.
Настройка пагинации
Готовый блок навигации — это только начало. Дальше идет серия параметров, без которых пагинация на сайте будет работать против вас, а не на вас.
- Количество выводящихся элементов
Рабочий диапазон — 20–50 для каталога товаров с крупными карточками, 10–20 для статей блога, 50–100 для табличных списков и компактной верстки. Меньше десяти — пользователь устает кликать, больше сотни — теряется смысл самой пагинации.
- Формат URL
Два основных варианта — параметрический (`example.com/catalog?page=2`) и ЧПУ (`example.com/catalog/page/2/`). Второй удобнее для SEO и более читаемый для пользователя, но требует настройки правил перезаписи на сервере.
- Метаданные
На страницах пагинации Title и Description должны отличаться от первой, иначе поисковик видит дубль. Стандартное решение — добавлять номер страницы в Title по шаблону «Категория — стр. 2», а Description либо обрезать, либо тоже модифицировать.
- Хлебные крошки
Они обычно остаются такими же, как на первой странице категории — указывают путь до самой категории, а не до конкретного номера. Добавление номера в крошки только засоряет интерфейс.
- Сохранение фильтров и сортировки
Когда пользователь применил фильтр и сортировку, переход на вторую страницу не должен их сбрасывать. Параметры фильтрации просто добавляются к URL пагинации.
Особенности настройки пагинации WordPress
В WordPress есть несколько встроенных функций для вывода блока пагинации. Какую использовать — зависит от темы сайта и задачи:
- `the_posts_pagination()` — основная современная функция, выводит готовый блок с настройками отступов, текста кнопок и количества номеров.
- `paginate_links()` — возвращает массив или строку, стилизуется как угодно.
- `next_posts_link()` и `previous_posts_link()` — пара старых функций для простой навигации без нумерации.
- `the_comments_pagination()` — отдельная функция для разбивки длинных веток комментариев.
- `wp_link_pages()` — для постраничной разбивки длинной статьи через тег `<!--nextpage-->`.
Пример вызова основной функции в файле шаблона выглядит так:
```php
the_posts_pagination([
'mid_size' => 2,
'prev_text' => 'Назад',
'next_text' => 'Вперед',
]);
```
Для WooCommerce есть специализированная функция `woocommerce_pagination()` — она учитывает специфику каталога товаров и подхватывает настройки магазина из админки сайта.
Кастомные запросы через `WP_Query` требуют отдельного внимания. Без явной передачи параметра `paged` все страницы будут показывать одинаковый контент — типовая ошибка тех, кто пишет кастомный шаблон архива. Правильный код передает текущий номер через `get_query_var('paged')` и подставляет его в массив параметров запроса.
Из плагинов для расширения возможностей популярны:
- WP-PageNavi (красивые номерные блоки)
- Ajax Load More (динамическая подгрузка без перезагрузки)
- Jet Smart Filters (фильтры с интегрированной пагинацией для Elementor)
База пагинации (слово `page` в `/page/2/`) задается через свойство `$wp_rewrite->pagination_base` — менять ее без необходимости не рекомендуется, поскольку поисковики уже привыкли к стандартному виду.
Влияние пагинации на продвижение сайта
Со стороны SEO пагинация всегда была источником одновременно пользы и проблем. Долгое время Google рекомендовал использовать атрибуты `rel="prev"` и `rel="next"` — они объединяли документы в логическую серию. В 2019 году Google официально подтвердил, что эти атрибуты больше не нужны — алгоритмы научились понимать пагинацию без них.
Яндекс по-прежнему упоминает `rel="prev/next"` в своих рекомендациях, поэтому атрибуты лучше оставлять — вреда от них нет, а для Яндекса польза сохраняется. Это тот случай, когда лишний код не мешает.
Главный практический вопрос — индексировать страницы пагинации сайта или нет. Здесь существует несколько подходов:
- Все открыто для индексации — простой вариант для небольших каталогов до 50 страниц.
- Все, что дальше второй закрыто через `noindex, follow` — экономится краулинговый бюджет, в выдаче не плодятся дубли.
- Каноникал указывает сам на себя (`self-referencing`) — чище для понимания структуры сайта, рекомендуется Google.
- Каноникал указывает на первую страницу — спорный прием, Google не рекомендует.
Последний вариант выглядит логично, но в документации Google прямо сказано, что остальные страницы в пагинации дублями не считаются и склеивать их каноникалом не нужно. На больших каталогах это иногда работает неожиданным образом — товары из конца каталога могут вообще выпадать из индекса.
Проблемы с пагинацией для SEO
Большинство сложностей связано с тем, как поисковик воспринимает однотипные документы со сквозной нумерацией. Разберём пять типовых проблем, которые встречаются на каталогах и блогах чаще всего, и покажем рабочие решения для каждой
Дубли метаданных и контента
Если на 25 страницах каталога одинаковые Title, Description, H1 и одинаковый SEO-текст внизу — поисковик видит 25 дублей. Это размывает релевантность и предсказуемо роняет позиции сайта в выдаче.
Решение:
- Добавление номера в Title — «Каталог светильников, стр. 2 — Магазин X»
- Скрытие SEO-текста категории на всех страницах, кроме первой
- Использование self-canonical
- Закрытие через `noindex, follow` — поисковик не индексирует, но ходит по ссылкам товаров
Размывание ссылочного веса
Внешние ссылки в большинстве случаев ведут на первую страницу категории. Дальше вес распределяется по внутренним ссылкам, и страницы пагинации забирают часть веса, который мог бы достаться карточкам товаров или подкатегориям. Решением в данном случае является грамотная перелинковка, в которой к товарам идут ссылки не только из пагинации, но и из блоков «Похожие», «Популярные», «Хиты продаж».
Индексация дальних страниц сайта
Если в категории 50 страниц, краулер Google может просто не дойти до 40-й и не проиндексировать оттуда товары. Симптом такой — товары есть в каталоге, но их нет в поиске.
Решений несколько:
- дробить большую категорию на подкатегории;
- добавлять товары в `sitemap.xml` напрямую;
- прокачивать ссылочный вес страницы каталога через внутреннюю перелинковку на сайте.
Бесконечная прокрутка без поддержки прямого URL
Если контент подгружается через AJAX без обновления адреса в браузере, поисковик увидит только первую «страницу», а все остальное останется невидимым. Решение реализуется по принципу прогрессивного улучшения — даже с бесконечной прокруткой каждая порция данных должна быть доступна по своему URL, а History API обновляет адрес в браузере.
Комбинации параметров URL
Если на странице пагинации работают фильтры, получаются варианты вида `?page=2&color=red&size=l&price_from=5000&sort=new`. Количество таких комбинаций — тысячи и десятки тысяч. Google не успевает обходить все, тратит краулинговый бюджет впустую. Решение — закрывать ненужные параметры в `robots.txt`, использовать `canonical` для схлопывания вариантов, настраивать обработку параметров в Google Search Console и Яндекс.Вебмастере.
Преимущества пагинации для улучшения UX сайта
Хорошо реализованная пагинация — это инструмент, который помогает пользователю ориентироваться в большом массиве данных и не теряться в нем. У классической пагинации есть несколько преимуществ, которые особенно хорошо видны в сравнении с бесконечной прокруткой.
Контроль над процессом
Пользователь сам решает, когда переходить к следующей порции данных. Бесконечная прокрутка валит контент сверху лавиной — на мобильных это часто превращается в неконтролируемую гонку с большим пальцем, особенно если подгрузка идет медленнее, чем скролл.
Сохранение позиции
После клика по товару и возврата кнопкой «Назад» страница остается той же. С бесконечной прокруткой возврат к 30-му товару из подгруженных 200 — отдельная боль, разработчики решают ее через сохранение состояния в `sessionStorage`, и работает оно не везде корректно.
Возможность шеринга
Ссылку на конкретное место в каталоге сайта можно отправить коллеге, добавить в закладки, прислать менеджеру магазина. С бесконечной прокруткой URL один для всего бесконечного потока — поделиться можно только началом списка.
Понятный масштаб
Пользователь видит «Страница 3 из 47» и понимает, сколько контента впереди. С бесконечной прокруткой ощущение такое, будто листать можно вечно — и это часто становится причиной усталости, человек закрывает на сайте вкладку, так и не дойдя до нужного места.
Полезные советы
Хорошие практики по пагинации для пользовательского интерфейса собрались в небольшой список, одинаково применимый к интернет-магазинам, блогам, каталогам недвижимости и любым другим проектам с большими списками данных:
- Указывать общее количество элементов и страниц.
- Делать кнопки перехода по пагинации крупными и удобными для тапа пальцем (минимум 44×44 пикселя).
- Подсвечивать текущую страницу на сайте контрастно.
- На мобильных оставлять упрощенный блок — только стрелки и три-пять номеров вокруг текущего.
- Добавлять выпадающий список выбора выводимого количества элементов н.
- Сохранять фильтры и сортировку во время переходов.
- Прокручивать страницу к началу списка после клика по номеру.
Многие крупные сайты сегодня используют гибридную модель пагинации — бесконечная подгрузка работает по умолчанию, но URL обновляется через History API и классическая пагинация в коде остается. И пользователю удобно, и поисковик доволен.
Пагинация на сайте — тот случай, когда простая на вид вещь требует внимательного подхода в деталях. Реализовать блок номеров технически несложно, гораздо сложнее настроить его так, чтобы и пользователю было удобно, и поисковик правильно понимал структуру каталога. Грамотная пагинация снижает нагрузку на сервер, ускоряет загрузку, помогает индексации товаров и в конечном счете растит конверсию.
При этом продумывать правильную пагинацию нужно еще на этапе проектирования каталога или блога — переделывать ее на работающем сайте всегда дороже и дольше, чем заложить нормально с самого начала.
