Что такое пагинация и как ее сделать на страницах сайта

Роман Андреев

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

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

Наши продукты помогают вашему бизнесу оптимизировать расходы на маркетинг

Узнать подробнее

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

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

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

Существуют следующие виды пагинации:

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

Ни один из этих типов не имеет особых преимуществ перед другими. Какой применить на своём сайте — дело вкуса веб-мастера.

Модуль е-коммерс

Аналитика для интернет-магазина
От 990 рублей в месяц

• Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
• Отслеживайте корзины, звонки, заявки и продажи с них с привязкой к источнику
• Постройте полную воронку продаж от бюджета на рекламу до ROI
• Отслеживайте какие категории и бренды чаще покупают

Узнать подробнее

Зачем нужна пагинация

На сайте она решает несколько задач:

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

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

Как сделать пагинацию

Чтобы выполнить настройку пагинации самостоятельно, потребуются определённые навыки. Чаще всего веб-мастера сталкиваются с необходимостью сделать её на языке PHP. Перед началом работы важно точно узнать, какое количество элементов (статей, карточек товара и т. п.) представлено в системе и во сколько страниц пагинации они будут объединяться.

При настройке этого механизма используются параметры:

• $iCurr (текущая страница);
• $iLastPage (последняя страница);
• $iLeftLimit (лимит слева);
• $iRightLimit (лимит справа);
• $iSlice (число элементов не видных с левой стороны от текущей страницы. Их нужно добавить справа).

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

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

elseif($iCurr<=$iLeft)

{

$iSlice = 1+$iLeft-$iCurr;

for ($i=1; $i<=$iCurr+($iRight+$iSlice); $i==)

{

//вывод

}}

На каждую пагинационную страницу посередине нужно вставить:

if($iCurr > $iLeft && $iCurr < ($iEnd-$iRight))

}

for ($1=$iCurr-$iLeft; $1<=$iCurr+$iRight; $i++)

}

//вывод

}}

На последней, соответственно, будет код:

else {

$iSlice = $iRight — ($iEnd — $iCurr) ;

for ($i=$iCurr-($iLeft+$iSlice); $i,=$iEnd; $i++)

{

//вывод

}}

Другой вариант — использовать специальный скрипт. Например, для этой цели подойдёт simplePagination. Его необходимо скачать и установить на сайт. Предварительно на последнем потребуется подключить фрэймворк jQuery.

Пагинация страниц в WordPress

К счастью, чтобы настроить пагинацию, необязательно осваивать работу с кодом. Например, в WordPress эта задача решена по умолчанию. Если вы не выполняете никаких настроек, в нижней части каждой страницы появляются ссылки Next post (Следующий пост) и Previous Post (Предыдущий пост). Это тоже своеобразная пагинация, но можно представить её и в другом виде.

Для этого понадобится специальный плагин. Чтобы их найти, достаточно воспользоваться поиском WordPress.

Несколько примеров плагинов для WordPress:

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

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

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

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

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

• Размер страницы и ссылок. Не стоит делать веб-страницу слишком короткой — размещайте от 20 до 100 элементов. Иначе пользователю быстро наскучит переходить по бесконечным ссылкам. Последние должны быть достаточно большими, особенно в мобильной версии. Нет ничего хуже крошечных цифр, по которым невозможно попасть пальцем и нужно постоянно увеличивать.
• Оформление пагинации. Важно, чтобы пользователь сразу понимал, на какой странице он находится. Для этого она как минимум должна быть выделена в списке ссылок. Также правильно нужно оформлять сам ссылочный ряд. Не стоит размещать в нём больше десяти ссылок подряд. Остальные должны появляться по мере продвижения пользователя по страницам.
• Удобство использования. Пагинацию необходимо оптимизировать под мобильную версию. Для тех, кто заходит с компьютера, можно предусмотреть пролистывание страниц с помощью команд на клавиатуре, например, стрелками вправо и влево, а также нажатием клавиши Enter. Сообщите пользователю о такой возможности под блоком ссылок.

Особенности настройки пагинации WordPress

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

• Откройте «Параметры»
• Выберите «Чтение»
• Задайте нужное число постов в поле «На страницах блога отображать не более»

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

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

Проблемы с пагинацией при SEO

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

Типичные сложности поисковой оптимизации сайтов с пагинацией:

• Слишком долгое индексирование, так как за один раз поисковый робот обрабатывает только определенное количество страниц.
• Часть веб-страниц (например, карточки однотипных товаров, различающиеся только названием модели) воспринимаются как дубли, поисковая система применяет к сайту санкции и его позиции в выдаче ухудшаются.
• Сложно отделить для поисковой системы важные страницы от второстепенных, поэтому последние могут быть проиндексированы в течение нескольких дней, а SEO-оптимизированные тексты для разделов ждать индексации месяцами.

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

Удаление страницы пагинации из индекса с помощью noindex

Весьма эффективный, хотя и достаточно трудоемкий метод. Для его осуществления необходимо использовать тег <meta name=“robots” content= “noindex,follow” />

Этот тег добавляют на все страницы каталога, исключая первую. Прописать его нужно в раздел <head> вручную и именно на это на многостраничном сайте уйдёт много времени. Важно, чтобы ссылка (URL) первой страницы не повторялась.

Преимущества данного способа:

• подходит и для Яндекс, и для Google;
• прост в исполнении, хотя и трудоемок;
• работает эффективно, все ненужные страницы точно будут исключены из индексации.

Недостатки также есть:

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

“Смотреть все” и rel=”canonical”

• На сайте создаётся страница «Смотреть всё».
• В её настройках указывается, что она является канонической (используется тег canonical).
• В коде для всех страниц пагинации применяется ссылка rel=”canonical” , которая ведёт пользователя на страницу «Смотреть всё». Ссылку нужно располагать в поле HEAD.

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

Преимущества метода:

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

Недостатки метода:

• необходима очень высокая скорость загрузки страницы «Смотреть всё». Оптимально, если она будет занимать не более трех секунд. Не подходит для сайтов с сотнями позиций;
• с некоторыми CMS может выдавать серьёзные ошибки. Нужно заранее уточнить совместимость.

Rel=”prev”/”next”

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

Ссылки добавляемые в раздел HEAD имеют следующий вид: <link rel=»next» href=»http://examplesite.com/page2.html»>. Разберём основные атрибуты:

• link rel=»next» — ссылка ведёт на следующую страницу;
• link rel=»prev» — ссылка ведёт на предыдущую страницу;
• href=»…» — вместо многоточия подставить адрес ссылки для перехода.

Эти конструкции нужно добавить на каждую страницу. Однако в зависимости от её места в пагинации они будут выглядеть по-разному:

• для первой страницы нужна только ссылка на следующую <link rel=»next» href=»http://examplesite.com/page2.html»> ;
• для последующих две — на предыдщую <link rel=»prev» href=»http://examplesite.com/page1.html»> и на следующую <link rel=»next» href=»http://examplesite.com/page3.html»> ;
• на последней в цепочке только на предыдущую <link rel=»next» href=»http://examplesite.com/page3.html»> .

Преимущества способа:

• сделать просто, требует внесения незначительных изменений в HTML-код;
• не нужна страница «Смотреть всё».

Недостатки:

• совершенно не воспринимается Яндексом, только для Гугла;
• если где-то есть ошибка в цепочке, далее при индексации будет применяться эвристический метод и вся система перестанет работать.

AJAX и прокрутка Javascript

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

Это может происходить по двум сценариям:

• автоматически;
• после нажатия кнопки «Показать ещё».

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

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

Выход: использовать совместно ссылки вида rel=”prev”/”next” и rel=”canonical”. Для каждой страницы, которая служит адресом ссылки в другом звене цепочки, создаётся каноническая для перенаправления.

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

Оптимальным решением будет разделить эти бренды и создать для каждого из них уникальную цепочку ссылок типа rel=”prev”/”next”. Важно также прописать для товаров каждой из них уникальный Title и Description.

Сквозная аналитика

 от 990 рублей в месяц

• Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
• Анализируйте воронку продаж от показов до ROI
• Настройте интеграции c CRM и другими сервисами: более 50 готовых решений
• Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
• Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды

Узнать подробнее