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

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

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

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

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

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

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

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

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

Аналитика для интернет-магазина

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

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

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

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

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

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

Маркетинг

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

Источники трафика на сайт: какие бывают каналы привлечения и как их анализировать

Источники трафика на сайт: какие бывают каналы привлечения и как их анализировать

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

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

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

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

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

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

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

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

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