Пагинация страниц на сайте: что это такое и как работает

Сегодня нельзя себе представить ни одного популярного и успешного ресурса в Глобальной сети без удобного и понятного меню навигации. Оно помогает в тех случаях, когда необходимо углубиться в подробности того контента, который вас заинтересовал. Переходите по внутренним ссылкам, получайте различные разъяснения и уточнения, не относящиеся к изначальной теме напрямую, но зависящие от неё и расширяющие пул охватываемого контента.

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

Важно помнить о том, что даже качественная и объёмная статья, может оказаться перенасыщенной основным ключевым вхождением. Множество дублей в заголовках могут оказать негативное влияние на процесс продвижения. И здесь вам на помощь может прийти такой инструмент, как пагинация страниц. Какого-то определённого общепринятого стандарта пагинации не существует. Каждый SEO-специалист на собственном опыте выясняет, какие её вариации наиболее эффективны.

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

В наиболее широком смысле, термин «пагинация» означает разделение контента на несколько отдельных страниц, связанных друг с другом сквозными ссылками.

Это наиболее легко понять на примере обычных бумажных книг. В них много информации, которая разделена на страницы. И воспользовавшись элементами навигации, такими как, например, оглавление, можно быстро отыскать ту часть контента, которая вам необходима. Сортировка информации – вообще очень полезная вещь. Привычка не бросать всё в одну кучу помогает намного быстрее разбираться с большими объёмами контента.

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

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

Стандартная

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

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

Поисковая

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

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

Магазинная

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

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

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

Пример пагинации страниц на маркетплейсе

Библиотечная

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

В Глобальной сети такой подход применяется, например, при поиске музыки. Ведь искать приходится по названию песни, группы или имени конкретного исполнителя. Да и всевозможные ресурсы для учеников и студентов никто не отменял. Им подобная пагинация необходима в первую очередь.

Информационная

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

Таким же образом работают и спортивные ресурсы. Ведь календарь событий мира спорта также привязан к конкретным датам. Искать результаты соревнований намного удобнее, когда они размещены в списке, оформленном в виде календаря. Где нажав на нужную дату, вы сможете посмотреть информацию о прошедших тогда событиях.

Пример пагинации страниц на новостном портале

Медийная

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

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

Брендовая

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

Пагинация страниц здесь устроена таким образом, что в качестве номеров страницы указывается диапазон результатов выдачи. Это банально понятнее, чем считать количество элементов на каждой странице и умножать полученное число на её порядковый номер.

Упрощённая

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

Индивидуальная

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

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

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

Работает это, как правило, следующим образом:

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

Что такое пагинация в дизайне?

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

В качестве примера, рассмотрим варианты для WordPress:

WP-PageNavi;
WP-Paginate;
WP PageNavi Style;
Alphabetic Pagination.

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

А теперь перейдём к настройке пагинации. Несмотря на то, что это банальный список страниц, различных тонкостей в его кастомизации и оптимизации бывает предостаточно:

Размер страниц – не делайте их слишком короткими. Пагинация ради пагинации ещё никого до добра не доводила. Если текст короткий, разбивать его на несколько страниц нет никакого смысла. Если говорить о списках или каталогах, то количество элементов, публикуемых на каждой странице, обычно находится в пределах от 20 до 100 единиц. В противном случае посетителям попросту надоест бесконечно кликать по кнопкам, и они начнут уходить к конкурентам. Наиболее критично это для мобильных устройств. Там не только количество элементов должно быть правильным, но и размеры каждой кнопки навигации. Если люди не смогут попасть по нужной ссылке пальцем, они быстро потеряют интерес.
Оформление пагинации – не забывайте о необходимости отдельно выделять текущую страницу. В противном случае пользователи могут быстро заблудиться и перестать понимать, куда им нужно перейти, чтобы вернуться к осмысленному взаимодействию с контентом. Не менее важно учитывать и количество ссылок на каждой странице. Не нужно пытаться вместить сразу несколько десятков номеров страниц в одном списке. Люди попросту не смогут с ним адекватно взаимодействовать. Если у вас обширный диапазон страниц, лучше сделайте интерфейс с возможностью ввода нужного номера. А для постепенных переходов настройте кнопки «Вперёд» и «Назад».
Юзабилити – оптимизируйте формат пагинации, чтобы он был удобен как в мобильной версии сайта, так и в десктопной. Опытные пользователи будут пытаться перелистывать страницы при помощи универсальных команд, вводимых с клавиатуры. Неплохо бы предусмотреть и такую вероятность. Сообщайте о настройках хоткеев вашей пагинации. Условные обозначения клавиш можно указать прямо на кнопках или в отдельном информационном блоке.

Для чего нужна пагинация в SEO?

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

Наиболее часто встречающиеся проблемы с пагинацией:

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

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

Сделать это можно несколькими способами.

Noindex

Это программное решение, которое потребуется внедрить в каждую страницу вашего ресурса. Пропишите в <head> каждой из них следующий тег: <meta name=“robots” content= “noindex,follow” />. Добавляйте его на все страницы каталога, кроме первой. Это простой и топорный способ, который позволяет одинаково эффективно закрывать нужные элементы сайта, как от Яндекса, так и от Google.

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

«Смотреть всё»

Создаёте на сайте страницу «Смотреть всё» и настраиваете её в качестве канонической. Для это существует отдельный тег – canonical.

А теперь добавляете в код всех страниц пагинации ссылку rel=«canonical». Пользователи будут перенаправляться на страницу «Смотреть всё», а с точки зрения бота это означает, что страницы пагинации являются второстепенными и не требуют индексации.

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

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

Rel=prev/next

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

Вам нужно будет добавить в раздел head следующий тег:

Он должен быть добавлен на каждую страницу. Но в зависимости от места размещения, его содержание будет меняться.

первая страница будет содержать ссылку только на следующую:

далее понадобятся две — на предыдщую

и на следующую

заключительная страница содержит ссылку только на предыдущую:

Что делать со страницами пагинации?

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

Главная страница должна быть настроена, как каноничная – именно она наиболее релевантна поисковым запросам, а значит должна преобладать над остальными в выдаче. Это позволит избавить все, похожие на дубли, страницы от излишнего внимания ботов. Некачественные, с точки зрения алгоритмов, карточки больше не будут снижать индекс качества вашего сайта.
Добавьте параметр rel=«canonical» на страницу товаров – оформление списка товаров в качестве каноничной страницы позволит продемонстрировать ботам, что магазин или каталог действительно полезен.

Необходимо поговорить и об оптимизации контента и настройке SEO для пагинации:

Каждая страница пагинации должна обладать собственным title. Это продемонстрирует тот факт, что страницы самостоятельные и полезные для посетителей, а не висят мёртвым грузом.
Создавайте для каждой из них уникальный description. Никогда не стоит пренебрегать теми возможностями, которые предоставляют вебмастерам поисковые системы. Настройка каждого доступного элемента в состоянии оказать положительное влияние на индекс качества сайта в целом.
Не копируйте одни и те же тексты. Поисковые системы не любят повторов. Идеальное решение – написать уникальный контент для каждой из ваших страниц. К сожалению, сделать это можно далеко не всегда.
Если вы работаете с интернет-магазином и для страницы пагинации закончились товары, лучше настроить автоматический редирект.
Каждая страница пагинации должна обладать собственным уникальным адресом.
Переход к листингу должен быть обеспечен независимо от того раздела, в котором в настоящий момент находится посетитель.
Обеспечьте возможность возвращения к предыдущим настройкам фильтрации в рамках страницы пагинации. Если пользователь искал определённый товар и решил перейти в другую категорию или к выдаче с другим фильтром, предоставьте ему возможность вернуться к предыдущей выдаче. В противном случае вы обречёте своих клиентов задавать настройки сортировки снова и снова.
Все страницы пагинации должны поддерживать одинаковый набор фильтров. Пользователи ожидают возможности работать с полноценным набором инструментов, независимо от выбранной категории информации.

Все эти правила не только улучшат качество взаимодействия посетителей с элементами навигации вашего сайта. Они также помогут вам повысить индекс качества сайта с точки зрения поисковых систем. Ведь поисковики ценят наличие достаточного функционала для сайтов со сложной структурой.

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