Пагинация — это необходимость для каждого большого сайта. Сколько статей или карточек товара может быть на крупном веб-ресурсе? Десятки, сотни, тысячи… Ориентироваться в таком количестве страниц пользователю очень трудно. И тут без пагинации не обойтись.
Однако есть и третий «участник» процесса — поисковые системы. Как они реагируют на использование пагинации и что делать, чтобы сайт не терял своих позиций в поисковиках. Ответы и варианты действий ищите ниже.
Что такое пагинация
Чтобы понять, что такое пагинация, достаточно представить, как выглядели бумажные книги до появления современного варианта с возможностью перелистывать страницы. Свиток, на котором был написан текст, нужно было долго разматывать, чтобы найти нужную информацию. Без пагинации так же выглядят и длинные веб-страницы.
Пагинацией называется разделение большого массива данных, имеющихся на сайте, на отдельные страницы для удобства использования.
Существуют следующие виды пагинации:
- Список номеров страниц, каждая цифра в котором является ссылкой;
- Список диапазонов позиций сайта, где каждая группа цифр отсылает пользователя на страницу, на которой расположены данные материалы;
- Буквенная пагинация, когда вместо цифр карточки товара группируются по буквам алфавита.
Ни один из этих типов не имеет особых преимуществ перед другими. Какой применить на своём сайте — дело вкуса веб-мастера.
Модуль е-коммерс
От 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.
Сквозная аналитика
- Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
- Анализируйте воронку продаж от показов до ROI
- Настройте интеграции c CRM и другими сервисами: более 50 готовых решений
- Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
- Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды
