Как сделать пагинацию на сайте: полное руководство по реализации страниц

Если вы задумались, как сделать пагинацию на сайте, то грамотная реализация страниц пагинации должна базироваться на балансе между удобством пользователей и жесткими требованиями поисковых систем. За свои 20 лет в продвижении сайтов я вывел множество ресурсов на первые позиции в Яндекс и Google, и каждый раз убеждаюсь: мелочей в технической оптимизации не бывает. Настройка пагинации — это именно тот фундамент, который либо ускорит рост трафика, либо загонит ваш каталог в песочницу.

Содержимое:

Страницы пагинации помогают разбивать большой массив данных на логические части. Это спасает сервер от перегрузок, а пользователя — от усталости при скроллинге. Но для поисковых ботов это минное поле. Если реализация страниц пагинации выполнена криво, вы получите дубли контента, склейку ссылочного веса и банальное выпадение важных товаров из индекса.

Давай разберем эту тему максимально подробно, чтобы тебе не пришлось искать дополнительную информацию на других ресурсах. Мы пройдем путь от базовых понятий до сложных связок с фильтрами и настроек в популярных CMS.

Зачем нужна правильная реализация страниц пагинации

Пагинация на сайте решает две глобальные задачи, которые напрямую влияют на коммерческие показатели. Первая — это пользовательский опыт (UX). Никто не хочет скроллить ленту из 10 000 товаров вниз до посинения, пытаясь найти нужную модель кроссовок.

Вторая задача — это техническая оптимизация и SEO пагинация. Поисковым ботам проще и быстрее обходить короткие страницы, чем бесконечные простыни HTML. Поисковые роботы имеют лимит на глубину обхода, и если страница весит слишком много, бот просто не дойдет до важных карточек товаров в самом низу.

Грамотная настройка пагинации распределяет ссылочный вес по сайту. Каждая страница пагинации получает часть веса от главной или категории и передает его дальше. Если этот процесс не контролировать, вес будет растворяться, а внутренние страницы останутся без поискового «питания». Узнайте что такое качественный контент.

Как сделать пагинацию на сайте: выбираем технический формат

Прежде чем лезть в код, нужно определиться, как именно пользователи будут переходить между частями каталога или блога. Реализация страниц пагинации может принимать несколько форм, и у каждой есть свои нюансы для SEO.

Классическая нумерация (1, 2, 3…)

Это самый старый, понятный и безопасный вариант для поисковиков. Внизу страницы вы видите ссылки на конкретные URL (например, site.ru/catalog/page-2/). Страницы пагинации в этом формате имеют собственные уникальные адреса, что позволяет ботам легко их находить и индексировать.

Преимущества: отличная индексация, понятная структура URL, легко передавать вес.
Недостатки: занимает место на экране, требует клика для перехода.

Кнопка «Загрузить еще»

Пользователь находится на первой странице, но внизу видит кнопку. При клике подгружается новая порция товаров. С точки зрения URL, вы остаетесь на первой странице, но контент обновляется.

Преимущества: экономит место, удобно для мобильных устройств.
Недостатки: SEO пагинация здесь хромает. Если контент подгружается через AJAX без изменения URL, поисковик может просто не увидеть вторую и третью «страницы».

Бесконечный скролл (Infinite Scroll)

Контент подгружается автоматически, когда пользователь достигает конца страницы. Это рай для UX в социальных сетях, но ад для e-commerce и SEO.

Преимущества: максимальное вовлечение, пользователь не думает о навигации.
Недостатки: поисковый бот не умеет скроллить. Он увидит только первый экран. Чтобы реализация страниц пагинации в таком формате работала для SEO, нужно обязательно дублировать контент в классическом виде или использовать сложные JS-решения с изменением URL (PushState).

SEO-настройка пагинации: rel=prev, rel=next и canonical

Настройка пагинации с точки зрения поисковых систем имеет свою богатую историю. Долгое время главным инструментом были атрибуты rel="prev" и rel="next". Они указывали боту, что страницы связаны между собой и представляют собой единый логический документ.

Реализация страниц пагинации с этими тегами выглядит так в блоке <head>:

<!-- На странице 2 -->
<link rel="prev" href="https://site.ru/catalog/page-1/" />
<link rel="next" href="https://site.ru/catalog/page-3/" />

В 2019 году Google официально заявил, что больше не использует rel="prev" и rel="next" для объединения страниц. Многие вебмастера решили, что можно выдохнуть и ничего не делать. Но это была опасная иллюзия.

Яндекс до сих пор учитывает эти теги и рекомендует их использовать. Кроме того, даже Google теперь использует их как подсказку для понимания структуры сайта. Поэтому SEO пагинация без этих тегов считается неполноценной. Добавлять их нужно обязательно, это не займет много времени.

Роль тега canonical при пагинации

А вот что делать с rel="canonical" — вопрос дискуссионный. Страницы пагинации не должны канонизироваться на первую страницу. Если ты укажешь на второй и третьей странице canonical на первую, ты скажешь поисковику: «Эти страницы — дубли, индексируй только первую». В итоге товары со второй страницы выпадут из индекса.

Золотое правило: каждая страница пагинации должна иметь canonical сама на себя. Это подтверждает, что контент на page-2 уникален и имеет право на жизнь в поиске.

Как сделать пагинацию на сайте с учетом фильтров

Это самая сложная часть, где совершается 90% всех ошибок. Страницы пагинации в связке с фасетными фильтрами генерируют миллионы мусорных URL. Представь: у тебя есть категория «Холодильники». Пользователь выбирает фильтр «Бренд: Samsung» и «Цвет: Белый».

Сайт генерирует URL: site.ru/catalog/samsung/white/page-2/. Теперь умножь это на все возможные комбинации фильтров и страниц. Получается бесконечный мусор. Дубли контента убивают ранжирование, и поисковик перестает понимать, какую страницу считать главной.

Правило первое: Canonical для фильтрованных страниц

Если фильтр не создает уникальное поисковое запросообразующее выражение (например, просто отсортировал товары по цене), настройка пагинации должна включать тег canonical, указывающий на основную, нефilterованную страницу категории.

<!-- Страница пагинации с фильтром по цене -->
<link rel="canonical" href="https://site.ru/catalog/page-2/" />

Так мы говорим Яндексу и Google: «Не индексируй этот мусор, склей вес с основной категорией».

Правило второе: Когда фильтры нужно индексировать

Иногда фильтр создает реальный поисковый интент. Например, «Купить iPhone 13 черный». Если люди часто ищут именно такую комбинацию, реализация страниц пагинации для этого фильтра должна быть открыта для индексации. В этом случае canonical указывает сам на себя, а в URL и метатегах обязательно должны отражаться параметры фильтра.

Правило третье: Закрытие от индексации в robots.txt и мета-тегах

Никогда не закрывай страницы пагинации в robots.txt директивой Disallow. Если бот не увидит ссылки на вторую и третью страницы, он не сможет их обойти и передать по ним вес.

Вместо закрытия в роботсе, используй мета-тег noindex, follow для технических сортировок, либо настраивай правильные canonical. Ссылки на страницы пагинации должны оставаться кликабельными для бота.

Реализация страниц пагинации в популярных CMS

Тебе не обязательно писать код с нуля, если ты используешь готовые движки. Настройка пагинации в CMS обычно сводится к правильному конфигурированию компонентов.

Пагинация на сайте в WordPress

В WordPress за вывод отвечает функция paginate_links(). Если ты разрабатываешь тему сам, убедись, что используешь именно её, а не устаревшие аналоги. Функция автоматически генерирует правильные ссылки с учетом структуры ЧПУ.

Для SEO-тегов rel="prev" и rel="next" в новых версиях WP нужно использовать хуки, так как из ядра их убрали. Добавь этот код в functions.php:

function add_rel_prev_next() {
    if ( is_paged() ) {
        global $page;
        $paged = get_query_var('paged') ? get_query_var('paged') : 1;
        
        // Prev
        if ( $paged > 1 ) {
            echo '<link rel="prev" href="' . get_pagenum_link( $paged - 1 ) . '" />' . "\n";
        }
        // Next
        $max_page = get_query_var('max_num_pages');
        if ( $paged < $max_page ) {
            echo '<link rel="next" href="' . get_pagenum_link( $paged + 1 ) . '" />' . "\n";
        }
    }
}
add_action( 'wp_head', 'add_rel_prev_next' );

Страницы пагинации в WP также требуют настройки через плагины SEO (Yoast, RankMath). В их настройках нужно убедиться, что включена генерация canonical на саму себя, а не на первую страницу.

Пагинация на сайте в 1С-Битрикс

В Битриксе реализация страниц пагинации завязана на компонент bitrix:catalog.section. В параметрах компонента есть раздел «Настройки постраничной навигации».

Тебе нужно указать:

• Количество элементов на странице (обычно 24, 48 или 96 для товаров).
• Название переменной для постраничной навигации (по умолчанию PAGEN_1 или page).
• Шаблон URL страницы (например, #SECTION_ID#/page/#PAGEN_1#/).

Для вывода красивых ссылок используется метод CDBResult::GetPageNavString(). Чтобы добавить rel="prev" и rel="next", нужно модифицировать шаблон компонента template.php, прописав логику определения текущей страницы и подстановки тегов в <head> через $APPLICATION->AddHeadString().

Ограничения конструкторов (Tilda, Readymag)

Если ты используешь конструкторы, настройка пагинации сильно ограничена. В Tilda есть стандартный блок «Каталог» с пагинацией. Он автоматически генерирует правильные URL и метатеги. Но ты не сможешь гибко настроить связку пагинации и фильтров. Если у тебя сложный интернет-магазин, конструкторы могут стать бутылочным горлышком для SEO.

Главные ошибки при настройке пагинации

За 20 лет в продвижении сайтов я видел сотни аудитов, и реализация страниц пагинации часто страдает из-за одних и тех же граблей. Давай разберем самые фатальные.

Ошибка 1: Закрытие страниц в robots.txt

Новички думают: «Зачем боту лезть на 50-ю страницу, если там старые товары? Закрою-ка я их в Disallow». Это грубейшая ошибка. Если ты закроешь страницы в роботсе, бот перестанет переходить по ссылкам на них. Вес не будет перетекать, а товары выпадут из индекса. Закрывать в роботсе можно только мусорные URL фильтров, но не классические страницы пагинации.

Ошибка 2: Использование noindex на страницах > 1

Логика такая же, как в первом случае. Вебмастер ставит noindex на вторую и последующие страницы, чтобы избежать дублей метатегов. Но вместе с индексом выпадает и уникальный контент (карточки товаров). Страницы пагинации должны быть доступны для индексации, уникализировать нужно метатеги, а не прятать страницы.

Ошибка 3: Отсутствие ссылок на следующие страницы в HTML-коде

Если твоя пагинация реализована на JavaScript, и ссылки генерируются только после клика пользователя, поисковый бот их не увидит. Обязательно проверяй исходный код страницы. Ссылки на page-2, page-3 должны быть в HTML-разметке сразу при загрузке документа. Если их там нет, бот не пойдет дальше первой страницы.

Ошибка 4: Сквозные ссылки в подвале

Часто дизайнеры добавляют в подвал сайта ссылки на «Популярные товары» или «Новинки», которые ведут на внутренние страницы пагинации. Это размывает вес. Сквозные ссылки должны вести только на главные страницы категорий, а не на технические страницы пагинации.

Чек-лист: проверка реализации страниц пагинации

Чтобы ты мог самостоятельно проаудировать свой сайт, я составил подробный чек-лист. Пройдись по нему перед тем, как считать настройку пагинации завершенной.

• Физическое наличие ссылок. Открой исходный код первой страницы каталога (Ctrl+U). Найди ссылки на вторую и третью страницы. Они должны быть в HTML, а не подгружаться JS.
• Уникальность метатегов. Проверь Title и Description на 1, 2 и 3 страницах. Они должны отличаться (обычно добавлением номера страницы).
• Наличие rel=prev и rel=next. Посмотри код второй страницы. Там должны быть теги, указывающие на первую и третью страницы.
• Правильный canonical. На второй странице тег rel="canonical" должен вести сам на себя (на вторую страницу), а не на первую.
• Отсутствие запретов. Проверь robots.txt. Страницы пагинации не должны быть закрыты директивой Disallow. Проверь мета-теги — на них не должно стоять noindex.
• Скорость загрузки. Страница пагинации не должна грузиться дольше 2.5 секунд. Если у тебя по 100 товаров на странице, уменьшай до 24 или 48. Оптимизируй изображения товаров.
• Мобильная адаптация. Проверь, как выглядит пагинация на смартфоне. Ссылки не должны слипаться, а кнопка «Загрузить еще» должна быть доступна для тапа без случайных нажатий на рекламу.
• Проверка в Вебмастере. Зайди в Яндекс.Вебмастер в раздел «Индексирование» -> «Анализ сайта». Введи URL второй страницы. Проверь, как Яндекс видит canonical и нет ли ошибок обхода.

Нюансы для AJAX и JavaScript пагинации

Если ты все же решил использовать кнопку «Загрузить еще» или бесконечный скролл, реализация страниц пагинации потребует от программиста танцев с бубном. Поисковики научились рендерить JavaScript, но делают это с задержкой и не всегда корректно.

Чтобы AJAX-пагинация индексировалась, разработчик должен использовать History API (PushState). При подгрузке новой порции товаров URL в адресной строке должен меняться на site.ru/catalog/page-2/.

Кроме того, нужно обеспечить fallback для ботов. Когда бот заходит на страницу, он не будет кликать кнопку «Загрузить еще». Поэтому на сервере нужно отдавать ботам сразу весь объем товаров (или хотя бы ссылки на следующие страницы в HTML-коде), чтобы бот мог перейти дальше. Настройка пагинации для JS-сайтов — это всегда компромисс между UX и SEO.

Альтернативный взгляд: нужно ли индексировать глубокие страницы

В SEO-сообществе нет единого мнения по поводу индексации 50-й и 100-й страниц пагинации. Некоторые эксперты считают, что туда все равно никто не ходит, и вес там не нужен. Они предлагают закрывать глубокие страницы через noindex или canonical на первую страницу.

У этого подхода есть право на жизнь, если у тебя очень большой каталог, а товары на 50-й странице — это неликвид трехлетней давности. Но если ты продаешь уникальные б/у товары, или у тебя новостной портал, где важна каждая статья, страницы пагинации должны индексироваться полностью. Решай исходя из бизнес-логики своего проекта.

Оптимизация поведенческих факторов на страницах пагинации

Пагинация на сайте влияет не только на техническое SEO, но и на поведенческие факторы. Если пользователь перешел на вторую страницу и не нашел нужного товара, он уйдет. Чтобы удержать его, нужно правильно расставлять товары.

Сортировка по умолчанию на страницах пагинации должна быть продумана. Не ставь сортировку «По цене (дешевые)». Дешевые товары часто имеют низкую маржинальность и плохие отзывы. Лучше использовать сортировку «По популярности» или «По релевантности».

Также реализация страниц пагинации должна включать визуальные подсказки. Пользователь должен четко видеть, на какой странице он находится. Активная страница в меню должна выделяться цветом. Если пользователь потеряется в навигации, он просто закроет вкладку.

Как проверить, как бот видит пагинацию

Ты можешь посмотреть на свой сайт глазами поискового робота. В Яндекс.Вебмастере есть инструмент «Проверка статуса URL». Вбей туда адрес второй страницы каталога.

Инструмент покажет, как Яндекс видит canonical, есть ли редиректы, и отдает ли сервер правильный код ответа (должен быть 200 OK, а не 301 или 404). В Google Search Console используй «Проверку URL». Если бот говорит, что страница проиндексирована и канонический URL указан верно, значит, SEO пагинация настроена правильно. Узнайте что такое заголовки H1-H6 и примеры.

Итоговые рекомендации для владельца сайта

Настройка пагинации не требует ежедневного вмешательства, но она требует правильного старта. Если ты запускаешь новый сайт, заложи правильную архитектуру URL и метатегов на этапе разработки. Исправлять ошибки на работающем интернет-магазине с 10 000 товаров будет в десять раз дороже.

Всегда тестируй изменения на тестовой копии сайта. Изменил шаблон Title для пагинации? Проверь, не сломалась ли генерация на мобильных устройствах. Добавил кнопку «Загрузить еще»? Убедись, что боты все еще видят ссылки на следующие страницы.

Реализация страниц пагинации требует постоянного мониторинга, но если вы внедрите описанные выше стандарты, ваш сайт будет полностью готов к масштабированию и росту трафика. Применяйте эти инструкции, тестируйте изменения и помните, что поисковые системы любят порядок и логику во всем, а грамотная пагинация на сайте всегда окупается ростом органического трафика и улучшением поведенческих метрик.