Пагинация: как устроена, какой вид выбрать и как не навредить SEO

Что такое пагинация?

Откройте любой каталог с тысячей товаров: вам покажут двадцать-пятьдесят карточек, а внизу будет ряд цифр и стрелка «Дальше». Этот ряд и называют пагинацией, то есть постраничной навигацией. Список режут на порции, и каждая порция лежит по своему адресу.

Такая нарезка нужна сразу троим. Посетителю: он видит часть списка и понимает, сколько ещё осталось. Серверу: из базы за раз уходит двадцать записей вместо двадцати тысяч. Поисковому роботу: цепочка ссылок «Дальше» ведёт его к карточкам, которые не поместились на первую страницу. Третий пункт чаще всего забывают, а проблем он приносит больше остальных.

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

Само слово пришло из издательского дела: по версии Adlook, оно происходит от латинского pagina, так в Риме называли страницу рукописи или свитка. Для владельца сайта это значит одно: пагинация должна быть понятна и человеку, который листает, и роботу, который обходит.

Какие виды пагинации бывают?

Видов пять, и на одном сайте нередко живут два сразу, например номера в каталоге и «Показать ещё» в отзывах. Для каждого есть привычная территория:

• Нумерованная: ряд ссылок с номерами страниц и кнопки «Назад» и «Дальше». Встречается в каталогах, блогах и на форумах.
• Буквенная: страницы называются по первой букве, подходит словарям и справочникам, где термин ищут по алфавиту.
• Диапазонная: вместо номеров ссылки с диапазонами позиций, удобна для форумов и длинных лент.
• Кнопка «Показать ещё»: новая порция добавляется под уже показанной, а адрес страницы остаётся прежним.
• Бесконечная прокрутка: порции подгружаются сами, пока человек листает ленту.

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

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

Что выбрать: номера, «Показать ещё» или бесконечную прокрутку?

Для списков товаров и поисковой выдачи выбирайте номера или «Показать ещё». Бесконечную ленту оставьте разделам для просмотра: фотографии, подборки, новости. Три истории показывают, почему так.

Etsy проверил бесконечную прокрутку в поиске по товарам, и результат команду удивил. По записи об этом A/B-тесте, на посетителя стало приходиться вдвое меньше просмотренных товаров, клики упали на 10,9%, а покупок из поиска стало меньше на 22,6%. Покупки в целом по магазину при этом не просели: люди просто перестали искать через поиск. Руководивший тестом Дэн Маккинли вспоминал, как уверенно команда исходила из простой мысли:

Больше товаров и быстрее - это очевидно лучше

Дэн Маккинли, Etsy, в записи об A/B-тесте

Что происходит с вниманием, измерил институт Baymard: он несколько лет тестировал схемы загрузки на людях в больше чем пятидесяти магазинах. В разборе Smashing Magazine сказано, что с бесконечной прокруткой участники смотрели намного больше товаров, чем с номерами или с кнопкой, но хуже вчитывались в каждый. Кнопка «Показать ещё» оказалась серединой: товаров смотрели больше, чем при номерах, и читали внимательнее, чем в ленте. У ленты есть и бытовой минус: подвал с доставкой и возвратом мелькает на секунду-две и тут же уезжает под следующую порцию.

Показателен и пример самого Google. Поиск уже убрал непрерывную прокрутку: сначала она появилась в мобильной выдаче, потом на десктопе, а затем компания вернула нумерацию и кнопку «Дальше» после десяти результатов. Объяснение простое: десять результатов отдаются быстрее, а людям не нужны шесть страниц выдачи, которые раньше подгружались сами.

Практичная схема для интернет-магазина выглядит так: на категориях и в поиске ставят номера или «Показать ещё» с настоящими ссылками, а ленту оставляют для блока вроде «Вам может понравиться». Тогда человек получает привычное управление, а робот получает дорогу к каждой карточке.

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

Пагинация и SEO: где робот спотыкается

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

Автор исследования SEOquick проверил магазины и нашёл два, у которых в HTML первой страницы категории нет ни одной ссылки, похожей на пагинацию: переключатель рисует скрипт уже после загрузки. Для робота такая страница заканчивается на первых двадцати товарах. Лечится гибридом: подгрузка для человека и обычные ссылки для робота. Если список строит скрипт, подумайте о серверной отрисовке.

Другая крайность - закрыть пагинацию от обхода. Один из магазинов, чей robots.txt прочитал автор SEOquick, закрыл все адреса со словом /page/ целиком. Это работает, только когда у товаров есть другой путь: карта сайта, перелинковка, фиды. А Rookee предупреждает, что запрет в robots.txt опаснее noindex: робот не увидит ни содержимое, ни метатеги, ни ссылки внутри закрытой страницы.

Есть и мелкие правила, которые ломают обход незаметно. Номер страницы не пишите после значка #: Google игнорирует такие адреса и может не пойти по ссылке, приняв её за уже виденную. Лучше обычный параметр вроде ?page=n. Для заголовков, описаний и h1 Adlook советует задавать уникальные значения с номером страницы, чтобы вторая и пятая страницы не выглядели копиями.

Canonical и noindex: Яндекс и Google советуют разное

Здесь Яндекс и Google советуют по-разному, и это нормально. Google просит не делать первую страницу канонической для всех остальных: у каждой страницы списка должен быть свой адрес и свой canonical. Джон Мюллер, пересказывает автор SEOquick, выразился коротко:

Вторая страница не равна первой

Джон Мюллер, Google, в пересказе SEOquick

Яндекс допускает старую схему. Платон Щукин советовал для категорий, на страницы которых нет трафика, а контент во многом идентичен, ставить на вторую и следующие страницы rel=canonical на первую. Позже в блоге Яндекса для вебмастеров смягчили позицию: неканонические страницы, как правило, в поиск не попадают, но могут появиться, если релевантнее запросу и сильно отличаются по содержанию.

Как это выглядит на практике, показал разбор SEOquick. Магазин Foxtrot делает по документации: у каждой страницы свой canonical, index, follow и номер в заголовке. Epicentr выбрал противоположное: canonical на первую страницу плюс noindex, follow, так что страницы обходятся, но в индекс не попадают. Оба решения согласованы с остальной настройкой, и в этом их сила.

Тревогу снимает и цифра оттуда же: среди 36 тысяч самых посещаемых адресов двенадцати украинских магазинов нашлось ровно пятнадцать страниц пагинации, то есть 0,04%. Список-страницы почти не приносят трафика, они нужны роботу как дорога к товарам. Сам по себе их вес в индексе тоже не страшен. SEOquick приводит разбор Гленна Гейба: на сайте, где пагинация составляла 67% всех проиндексированных адресов, то есть 18 600 страниц, за шестнадцать месяцев видимость осталась стабильной, а рост продолжался. Поэтому выбирайте схему под обход и чистоту индекса: позиций эти страницы почти не дают.

Перед выбором схемы проверьте несколько мелочей, которые чаще всего и ломают результат:

• Адреса ?page=1 и /page/1/ часто выдают копию первой страницы, поэтому их склеивают редиректом.
• Массовый noindex на всю пагинацию ухудшает обход вложенных страниц, а закрытие в robots.txt ещё опаснее.
• Пагинация в сочетании с фильтрами и сортировками множит адреса: такие варианты в индекс открывать нельзя.
• Описание категории показывайте на первой странице, на остальных оставьте только список.

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

Пагинация в коде: WordPress и база данных

В WordPress хватит плагина вроде WP-PageNavi, а если нужен свой код, Adlook показывает запрос WP_Query и стандартную функцию paginate_links, которая выводит нумерацию. Остальное дело вёрстки.

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

Разработчикам стоит знать цену глубоких страниц. Автор разбора на Tproger замерил таблицу в 1,2 млн строк: выборка со смещением в миллион заняла 2,4 секунды, а курсорная вариация - 3 миллисекунды. База не умеет перепрыгивать строки, она честно читает их и выбрасывает.

Вторая беда - дубликаты. У автора того же разбора синхронизация у клиента дважды загрузила одни и те же двадцать заказов: между запросами в таблицу добавились записи, нумерация сдвинулась, и три письма в поддержку ушло, пока нашли виновника. Курсор от такого защищён, но номеров страниц не умеет, поэтому админкам с кнопкой «страница 47» остаётся смещение. Мелочь, которая экономит запрос: просите на одну запись больше, чем отдаёте, тогда по лишней записи видно, что следующая страница есть, и отдельный COUNT не нужен. Страницу за пределами списка отдавайте с ошибкой 404.

Проверка пагинации: пять шагов за вечер

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

1. Откройте исходный код первой страницы категории и найдите ссылки на вторую страницу: нет в HTML, значит, робот видит только первую порцию.
2. Проверьте адреса ?page=1 и /page/1/: они должны вести на первую страницу, а несуществующий номер должен отдавать 404.
3. Сравните страницы по тексту: описание категории оставьте на первой, иначе вторая и пятая окажутся копиями.
4. Задайте уникальные title, description и h1 с номером страницы.
5. В Яндекс Вебмастере откройте «Страницы в поиске» и посмотрите, какие страницы списка исключены и почему.

Как незаметно всё ломается, показала история самого SEOquick. У блога пятьдесят одна страница пагинации, у каждой свой canonical и заголовок вида «страница 7», формально всё верно. Но при замере все пятьдесят две страницы содержали одни и те же 203 ссылки и разметку ItemList на 1186 элементов, отличался только тайтл. Причина обычная: список статей фильтруется на клиенте, а сервер на каждый адрес отдаёт весь фид целиком. Ни одно решение по отдельности ошибкой не было, ошибка родилась на стыке. Поэтому после любой смены движка или вёрстки пройдите этот список заново. приёмы поисковой оптимизации собраны в руководстве по SEO.

Раз в квартал повторяйте проверку и сверяйте её с прошлой: пагинация ломается не при запуске, а при редизайне, смене движка или переезде.

Частые вопросы