27 Декабрь 2019
17 мин на чтение
760

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

Нет времени читать?

Нажимая на кнопку "Отправить", вы даёте своё согласие на обработку персональных данных.


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

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

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

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

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

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

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

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

caltouch-platform

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

Аналитика для интернет-магазина
От 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.

caltouch-platform

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

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

Заключение
Пагинация на многостраничном сайте повышает уровень комфорта его использования и помогает пользователям быстрее найти нужную информацию.
Существует несколько видов пагинации и способов реализации этого механизма на веб-ресурсе. Можно отдать предпочтение как внесению изменений в HTML-код, так и установке специальных плагинов — это не играет особой роли.
Но к вопросу SEO-оптимизаци сайта с пагинацией нужно подойти серьёзно. Какой из четырёх способов предпочесть зависит от приоритетной поисковой системы (Яндекс или Google), количества элементов и многих других параметров. Правильно настроенная пагинация только повысит позиции сайта в поисковой выдаче, но любые ошибки в настройках могут стоить веб-мастеру дополнительных усилий и времени.

Оцените
Поделитесь с друзьями
Подпишитесь на обновления
Нажимая на кнопку "Подписаться", вы даёте своё согласие на обработку персональных данных.
Пришлите свою статью
Рекомендуем прочитать
Продажи и маркетинг
Что такое B2B продажи: особенности и техники

Как продавать в B2B и какие особенности таят в себе продажи «бизнеса для бизнеса» в статье.

13 Январь 2019

Продажи и маркетинг
Сегментация целевой аудитории

Пошаговая инструкция по инструментам для сегментации аудитории.

15 Ноябрь 2017

Продажи и маркетинг
Как составить чек-лист и правильно его вести

Чек-листы – наши любимцы. Это отличный способ запомнить все и поэтапно избавиться от всех нюансов, способных создать проблемы. Рассказываем, как использовать.

16 Январь 2019

Продажи и маркетинг
Обзор лучших современных техник продаж

Разбираем самые популярные техники продаж и рассказываем, какая и где работает эффективнее.

14 Декабрь 2018

Продажи и маркетинг
Сквозная аналитика: гайд по внедрению, советы по использованию

Предлагаем разобраться с тем, почему сквозная аналитика – «must have» любого предпринимателя.

5 Декабрь 2017

Продажи и маркетинг
Engagement rate (ER): расчет и значения показателей

Чем больше пользователей подписаны на обновления сообщества или канала, тем лучше. А так ли это нужно? Рассказываем про коэффициент вовлеченности и чем от отличается от просто «много».

30 Октябрь 2018

3 шага до уровня pro в E - COMMERCE. Онлайн марафон.
3 дня - 9 спикеров: 1С - Битрикс, AliExpress, Яндекс.Маркет, Retail Rocket и другие. Присоединяйся
Записаться
У нас тут cookies…
На сайте используются файлы cookies. Продолжая использование сайта, вы соглашаетесь с этим. Подробности об обработке ваших данных — в политике конфиденциальности.