что это такое, простыми словами

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

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

На крупных сайтах десятки и сотни страниц : главная, карточки товаров, продуктовые страницы, блог и другие. Как помочь пользователям не заблудиться среди колоссального массива информации? Разложить все по полочкам — добавить ссылочный блок для разграничения содержимого. Этот блок называется пагинацией. 

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

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

Ее внедряют, чтобы:

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

Изначально термин «пагинация» начал использоваться в издательском деле. Он подразумевал под собой нумерацию страниц в книгах, газетах, журналах. Номер мог располагаться снизу, сверху, а также в боковой части листа. В 1499 году появилась первая книга с использованием пагинации. Ее ввел итальянский издатель Альд Мануций, который разработал дизайн оформления книг, используемый по сей день. Также его «детищем» стали курсив, введение пунктуационной системы и создание карманных книгоизданий.

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

Читайте также:

Как увеличить конверсию сайта: 30 рабочих способов

Пагинация необходима для:

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

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

Виды пагинации

Выделяется несколько видов пагинации:

1. Нумерованный список, каждая цифра которого содержит ссылку для перехода.
Нумерованный список на сайте
2. Алфавитный порядок, где при выборе конкретной буквы открывается перечень названий, на нее начинающийся.
Пагинация в алфавитном порядке
3. Цифровой диапазон, где подразумевается выбор страницы, на которой находится нужный материал.
Цифровой диапазон на сайте
4. Кнопка «Показать еще» позволяет загрузить определенное количество элементов на страницу одним кликом.

Кнопка «Показать еще» 

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

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

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

Читайте также:

Инструкция по визуальному оформлению текста

Как настроить пагинацию страниц на сайте

В каждом виде CMS пагинация имеет свои особенности. Мы расскажем о том, как самостоятельно настроить ее с помощью WordPress и PHP.

Пагинация на WordPress

Чтобы настроить пагинацию, необязательно осваивать язык программирования. В CMS WordPress такая функция уже предусмотрена. Даже если вы ничего не настроили, в нижней части страниц можно обнаружить кнопки со ссылками «Предыдущая страница» и «Следующая страница».

Предыдущая страница и следующая страница

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

Поиск делаем по метке pagination.

Плагины по метке Pagination

Далее вы можете выбрать совместимой с вашей версией WP плагин и установить его.

Читайте также:

Подробный гайд по оптимизации сайта на WordPress

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

• размеру ссылок. Они должны быть удобными для клика мышкой или нажатия пальцем;
• размеру страниц. Страница не должна быть ее чересчур короткой или длинной. Оптимальное значение — от 20 до 100 элементов на одну страницу;
• оформлению пагинации. Листая страницы, посетителям важно понимать, на какой из них они находятся. Желательно выделить ссылку на текущий номер контрастным цветом;
• пространству между элементами. Для визуальной привлекательности следует соблюдать баланс между ссылками. Они не должны быть слишком близко друг к другу, но при этом желательно уместить 10 ссылок на страницу.

Пагинация на PHP

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

В PHP пагинация делается двумя способами:

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

Код определяет то, что мы находимся на определенной странице, и вычленяет из базы нужные ссылки. 

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

Структура тематической пагинации.

Чтобы самостоятельно настроить постраничную пагинацию, надо сделать вот что:

1. Получить код следующего вида:
Готовый код
2. Разбить страницы на нужное количество. Для этого в код добавляется инструмент LIMIT и переменная $page, которая показывает текущую страницу.

$art — инструмент для того, чтобы показать, с какой записи необходимо выводить данные.

$kol — инструмент, который является показателем суммы записей для вывода на экран.

Код с этими инструментами
3. Добавить переменную $_GET, чтобы четко установить, на какой странице мы находимся необходимо:
Код с переменной $_GET
4. Для итогового формирования пагинации необходимо следующее:

• найти через запрос количество всех записей;
• узнать количество всех страниц:

Код, с которым вы узнаете количество всех страниц

Вывести ссылки через цикл:

Код для вывода ссылки через цикл. Готово!

Для тематической навигации также используется инструмент LIMIT, как и в постраничной пагинации. Главное отличие состоит в том, что дополнительно используется инструмент GET. Вот пример итогового кода:

Итоговый код с инструментом GET

Читайте также:

Как составить грамотное ТЗ на создание сайта: примеры и частые ошибки

Какие ошибки допускаются при настройке пагинации

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

1. Задержка индексации однотипных страниц. С ней сталкиваются, продвигая интернет-магазины, при наличии большого количества карточек товаров.
2. Дублированный контент на перелистываемых страницах. При обнаружении низкой уникальности роботы могут оштрафовать сайт.
3. Сложность в выявлении важных страниц от менее значимых. Первые могут ждать индексации несколько месяцев, а вторые быть одобренными за пару дней.
4. Скудный контент. Если в галерее изображений нет никакого текста и отсутствуют alt и title, роботы могут его не проиндексировать, поскольку им не за что будет «зацепиться».

Справиться с SEO-ошибками поможет закрытие страниц с пагинацией от роботизированного сканирования.

Присоединяйтесь к нашему Telegram-каналу!

• Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
• Для этого вам необходимо подписаться на наш канал.

Как пользоваться пагинацией на чужом сайте

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

Цифровой список со ссылками на другие страницы

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

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

 

Заключение

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

1. Для интернет-магазинов с большим количеством товаров предпочтительнее выбрать страницы с кнопкой “Загрузить еще”. Сортировать товар лучше всего по стоимости, дате появления на сайте, популярности.
2. Для информационных сайтов (например таких, как наш блог Kokoc.com), применим скроллинг. Постраничная пагинация подходит не меньше.
3. Если у вас сайт с большим количеством фото- и видео контента, лучшим решением будет бесконечная прокрутка.

Что такое пагинация, инструкции по настройке страниц пагинации на сайте

Дек 24, 2021

12 мин — время чтения

Поделиться статьей:

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

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

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

Как пагинация влияет на SEO?

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

Юзабилити сайта

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

• Поведенческие факторы 

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

• Навигация

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

Сканирование и индексация

Чтобы страницы пагинации попали в результаты выдачи, важно учитывать некоторые особенности индексации страниц роботами:

• Уникальность содержимого

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

• Краулинговый бюджет

У бота поисковой системы есть определенный лимит страниц, которые он может просканировать за одно посещение сайта. Когда Googlebot обходит крупные ресурсы с многочисленными страницами пагинации, бюджета может не хватить для других важных URL-адресов. В результате их содержимое может индексироваться позже или вовсе не проиндексироваться. 

Подходы в настройке SEO-пагинации

Есть несколько стратегий, которые помогают сделать так, чтобы страницы пагинации не воспринимались поисковиками как дубли и смогли попасть в результаты поиска. Рассмотрим основные варианты правильной настройки пагинации.

Индексировать все страницы пагинации и их содержимое

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

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

Индексировать одну общую страницу со всеми результатами

Еще один подход — пагинация с тегом rel=canonical. Вам необходимо добавить на каждую страницу пагинации каноническую ссылку, которая ведет на View all (то есть общую страницу со всеми результатами). Каноническая ссылка будет указывать роботу на приоритетный для индексации контент среди копий, и в то же время карулер сможет пройти через все ссылки неканонических страниц (индексацию которых никто не запрещал). Таким образом вы указываете, что неосновные страницы типа  page=2/3/4, не нужно индексировать.

Такой тег выглядит вот так:

<link href="http://site.com/canonicheskaya-stranica" rel="canonical" />

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

Закрыть страницы пагинации от индексирования

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

Закрыть страницы пагинации  можно директивой в файле robots.txt:

Disallow: *page=

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

Для этого добавьте <meta name=”robots” content=”noindex”> в <head> страницы. 

Сам код будет выглядеть вот так: 

<!DOCTYPE html>
<html><head>
<meta name="robots" content="noindex">
(…)
</head>
<body>(…)</body>
</html>

Особенности: вариант актуален для крупных сайтов с объемными разделами и категориями. Для такого метода обязательное наличие корректной XML-карты. Из минусов — велика вероятность получить проблемы с индексированием товарных страниц, размещенных на закрытых от Google-бота страницах пагинации.

Бесконечная прокрутка

Возможно, вы уже сталкивались с бесконечной прокруткой в интернет-магазинах, где при скролинге постоянно появляются новые элементы внизу экрана. Такой тип пагинации называется single-page content. Настраивается динамическая демонстрация содержимого с помощью Ajax-подгрузок в JavaScript. 

Согласно рекомендациям Google, для реализации бесконечной прокрутки необходимо обеспечить постраничную загрузку контента. Таким образом вы дадите пользователям возможность возвращаться к уже просмотренным материалам и делиться ими. Как это реализовать? Просто предоставьте уникальные ссылки на каждый раздел, чтобы юзеры могли переходить по ним, копировать их и т.д. Поисковик рекомендует использовать History API для обновления URL во время динамической загрузки контента.

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

Ошибки SEO-пагинации и как их обнаружить

Теперь поговорим о проблемах пагинации на сайте, которые можно выявить, используя специальные инструменты.

1. Неправильная настройка канонических ссылок

Как мы уже говорили, канонические ссылки используют, чтобы перенаправлять роботов к приоритетным для индексации URL-адресам. На копиях или похожих страницах указывают атрибут rel=”canonical”, который ведет на основной (канонический) вариант. В некоторых случаях каноническая ссылка находится на той же странице, на которую она ведет, усиливая вероятность индексации этого URL-адреса. 

Если канонические ссылки настроены неправильно, система может проигнорировать указания на приоритетный URL. 

2. Одновременное использование canonical и noindex в метатеге robots

Никогда не смешивайте noindex и rel=canonical, так как они противоречат друг другу. В то время как rel=canonical указывает поисковику на приоритетный URL и пересылает все сигналы на основную страницу, noindex просто говорит краулеру не индексировать страницу. При этом noindex является более сильным сигналом для Google 

Если вы хотите, чтобы адрес не индексировался и при этом указывал на каноничный, используйте редирект 301.

3. Одновременное использование запрета в robots.txt и canonical

Подобно описанной выше ошибке, некоторые специалисты настраивают на неканонические страницы запрет в robots.txt. 

User-agent: *
Disallow: /

Но так делать не стоит. Иначе бот просто не сможет просканировать страницу и не считает установленный canonical. А значит краулер просто не поймет, какая из страниц каноническая.

Инструменты для поиска проблем SEO-пагинации на сайте

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

Google Search Console

Во вкладке «Исключено» раздела «Покрытие» отображаются непроиндексированныеа URL-адреса. Здесь можно увидеть, какие страницы сайта были определены поисковиком как копии без корректных директив от пользователя. 

Стоит обратить внимание на отчеты «Страница является копией», поскольку здесь есть информация о проблемах в настройке канонических ссылок. Если ни одна из копий страниц не определена в качестве канонической, или приоритетный URL, выбранный вебмастером, не совпадает с URL-адресом, рекомендуемым Google.

Сведения об исключенных страницах в Google Search Console

SEO-сервисы для комплексного аудита сайта

При помощи специальных инструментов можно провести детальный аудит ресурса по всем техническим параметрам. «Аудит сайта» от SE Ranking проверяет более 120 параметров и дает рекомендации по исправлению ошибок. Инструмент помогает выявить все проблемы, связанные с пагинацией, — дублирующийся контент, проблемы с каноническими URL-адресами. Дополнительно «Аудит сайта» укажет на повторения title, description и h2, что часто является признаком страниц пагинации.

Блок «Title» в SEO-отчете по сайтуБлок «Дублирование контента» в SEO-отчете по сайту

Как оптимизировать страницы пагинации?

Давайте пошагово разберем, как настроить SEO-пагинацию в зависимости от выбранного подхода.

Цель 1. Индексация всех страниц пагинации

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

Настройка SEO-пагинации:

1. Создайте страницы пагинации с уникальными URL.

Чтобы поисковик воспринимал пагинацию в качестве отдельных страниц, используйте вложенность URL-адресов по принципу url/n или параметры запроса ?page=n, где n — номер страницы в последовательности. 

Не стоит применять идентификаторы нумерации в виде #, поскольку Google их игнорирует и не распознает следующий за символом текст. Поисковик может определить URL как ранее обработанный и не заносить его в индекс.

2. Свяжите страницы пагинации друг с другом.

Добавьте в код каждой страницы ссылку на следующий по счету URL, используя тег <a href>. Также стоит указывать ссылку на первый URL пагинации. Это будет дополнительным сигналом о том, какую страницу цепочки выбирать целевой при ранжировании.

3. Обеспечьте индексацию страниц с помощью канонических ссылок.

Чтобы сделать каждую страницу пагинации канонической, в теге <head> необходимо указать атрибут rel=”canonical” для каждой страницы и ссылку, ведущую на эту страницу. 

Цель 2. Индексация одной общей страницы View all

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

Настройка SEO-пагинации:

1. Создайте страницу, объединяющую все результаты страниц пагинации. 

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

2. Укажите страницу «View all» в качестве канонической.

В теге <head> каждой страницы пагинации должен быть атрибут rel=”canonical”, направляющий робота на общий URL — приоритетную для индексирования страницу. 

3. Ускорьте загрузку страницы «View all».

Скорость отображения контента на экранах компьютеров и мобильных устройств влияет на позиции URL-адреса в выдаче. Определите причины, снижающие производительность страницы View all, например, с помощью онлайн-сервиса PageSpeed Insights. Затем сведите к минимуму все негативные для скорости факторы.

Цель 3. Ограничение индексации страниц пагинации 

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

Настройка SEO-пагинации:

1. Ограничьте индексацию всех страниц пагинации, кроме первой.

Не стоит для этого использовать файл robots.txt. Более предпочтительным будет следующий способ способов: 

• Запрет индексации с помощью метатега robots.

В блок <head> страниц пагинации от второй и выше нужно добавить метатег meta name=”robots” content=”noindex, follow”. Такая комбинация команд препятствует индексации страницы и при этом разрешает переходить по ссылкам, указанным на ней.

2. Оптимизируйте первую страницу пагинации.

Поскольку эта страница должна попасть в индекс, подготовьте ее к участию в ранжировании, уделяя внимание содержимому — контенту и тегам.

Заключение

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

Есть несколько способов реализовать SEO-пагинацию на сайте: 

• индексация всех страниц пагинации;
• индексация одной общей страницы «View All»;
• запрет на индексацию всех страниц пагинации, кроме первой.

Выявлять проблемы пагинации и проверять корректность ее настройки помогают специальные инструменты. Например, раздел «Покрытие» в Google Search Console и комплексный «Аудит сайта» от SE Ranking.

5461 views

Разбиение на страницы · Bootstrap

• Обзор
• Работа с иконками
• Отключенное и активное состояния
• Размер
• Выравнивание

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

Обзор

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