27 декабря 2019
Темы | Маркетинг
Нет времени читать?
Отправить статью на почту

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

27 декабря 2019
17 мин на чтение
85285
Что такое пагинация и как ее сделать на страницах сайта
author__photo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы выполнить настройку пагинации самостоятельно, потребуются определённые навыки. Чаще всего веб-мастера сталкиваются с необходимостью сделать её на языке 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. Возможно она уже предусматривает пагинацию и эту опцию остаётся только настроить.

Calltouch
Привлекайте, конвертируйте
и анализируйте ваших клиентов
Платформа омниканального маркетинга
Подробнее

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

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

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

  • Размер страницы и ссылок. Не стоит делать веб-страницу слишком короткой — размещайте от 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 более предпочтительным будет второй вариант с любой формулировкой.

Загрузить еще 12

Показать еще

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

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

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

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

Сквозная аналитика
Оценивайте эффективность всех рекламных кампаний в одном окне от клика до ROI
Вкладывайте в ту рекламу, которая приводит клиентов
Подробнее

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

Автор блога Calltouch
Нет времени читать?
Оцените
Поделитесь с друзьями
Лучшие маркетинговые практики — каждый месяц в дайджесте Calltouch
Подписывайтесь сейчас и получите 13 чек-листов маркетолога
Нажимая на кнопку "Подписаться", вы даёте своё согласие на обработку персональных данных и получение рекламной информации о продуктах, услугах посредством звонков и рассылок по предоставленным каналам связи.
У вас интересный материал?
Опубликуйте статью в нашем блоге
Опубликовать статью
Хотите получить актуальную подборку кейсов?
Прямо сейчас бесплатно отправим подборку обучающих кейсов с прибылью от 14 730 до 536 900р.
[contact-form-7 404 "Not Found"]
У нас тут cookies…
На сайте используются файлы cookies. Продолжая использование сайта, вы соглашаетесь с этим. Подробности об обработке ваших данных — в политике использования файлов cookie.
Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить