Пагинацией называют навигационную часть сайта, которая позволяет пользователям проще перемещаться между отдельными товарными позициями, публикациями и другими элементами контента. Проще говоря — это сокращение всей информации, представленной на сайте, и отображение ее отдельными элементами. Особенно полезно это в случаях, когда на сайте присутствует большое количество данных.
В печатной литературе аналог пагинации — упорядоченная информация, не представленная сплошным списком. Так значительно проще в ней ориентироваться и быстро находить нужное. Пагинация используется для того же самого: позволяет сделать поиск нужного товара максимально простым и удобным.
Как выглядит и для чего предназначена
Есть несколько вариантов использования этого инструмента:
- С прямой нумерацией («1, 2, 3…»).
- С прямой нумерацией, в которой указаны позиции в списке («1-10, 10-20…»).
- С обратной нумерацией, в которой указаны позиции («40-30, 30-20…»).
Все современные интернет-магазины используют эту опцию, которая делает работу с сайтом значительно проще. Ведь, не будь ее, весь огромный ассортимент был бы размещен в одном месте. Загружаться при этом все будет с минимальной скоростью — чем большее количество товаров представлено, тем медленнее идет подгрузка.
С помощью постраничной навигации можно сделать отдельные разделы легче, удобнее в использовании.
Как сделать на своем сайте
Учиться создавать пагинацию имеет смысл на языке PHP, поскольку именно на нем, как правило, пишут веб-приложения.
Итак, на сайте представлено большое количество контента (он может быть любым, от товарного ассортимента до отдельных информационных статей), который нужно организовать так, чтобы с ним было удобно работать пользователю.
Прежде всего необходимо определить, сколько страниц будет создано, сколько из них будет видно в навигационном блоке и где мы находимся прямо сейчас. Для примера используем 45 страниц. Для установления текущей можно использовать $_GET (в тех случаях, когда ее нет, отображаться будет 1). Число страниц, которые будут отображаться при навигации, нужно оставить гибким: так можно будет изменять количество ссылок по обеим сторонам от текущей.
/*текущая страница*/
$iCurr = (empty($_GET['page']) ? 1 : intval($_GET['page']));
/*всего страниц или конечная страница*/
$iLastPage = 45;
/*левый и правый лимиты*/
$iLeftLimit = 4;
$iRightLimit = 5;
/*вызов функции*/
makePager($iCurr, $iLastPage, $iLeftLimit, $iRightLimit);
После того как прописаны все данные, можно начать непосредственно разработку инструмента. Для создания пагинации используется опция makePage, в которой можно корректировать 4 основных параметра:
- $iCurr (текущее положение);
- $iLastPage (последний раздел);
- $iLeftLimit (количество страниц слева);
- $iRightLimit (количество страниц справа).
После того как прописаны все данные, можно начать непосредственно разработку инструмента. Для создания пагинации используется опция makePage, в которой можно корректировать 4 основных параметра:
function makePager($iCurr, $iEnd, $iLeft, $iRight){
if($iCurr > $iLeft && $iCurr < ($iEnd - $iRight)){
for($i = $iCurr - %iLeft; $i <= $iCurr + $iRight; $i++){
//вывод
}
}
elseif($iCurr <== $iLeft){
$iSlice = 1 + $iLeft - $iCurr;
for($i = 1; $i <= $iCurr + ($iRight + $iSlice); $i++){
//вывод
}
}
else{
$iSlice = $iRight - ($iEnd - $iCurr);
for($i = $iCurr - ($iLeft + $iSlice); $i <= $iEnd; $i++){
//вывод
}
}
}
Вывод будет выглядеть после этого следующим образом:
if($iCurr > $iLeft && %iCurr < ($iEnd - $iRight)){
for($i = $iCurr - $iLeft; $i <= $iCurr + $iRight; $i++){
echo ''.($i == $iCurr ? ''.$i.'' : $i).'';
}
}
Нужно обратить внимание на код. Самый простой вариант — это когда в начале работы мы находимся в условном центре сайта, скажем, на восьмой странице. С обеих сторон от ее номера будут спокойно отображаться и другие.
if($iCurr > $iLeft && $iCurr < ($iEnd - $iRight)){
for($i = $iCurr = $iLeft; $i <= $iCurr + $iRight; $i++){
//вывод
}
}
Однако если речь идет о первой из них, то необходимо использовать другой код:
elseif($iCurr <= $iLeft){
$iSlice = 1 + $iLeft - $iCurr;
for($i = 1; $i <= $iCurr + ($iRight + $iSlice); $i++){
//вывод
}
}
Параметром $iSlice обозначают количество элементов, скрытых с левой стороны. С другой их необходимо добавить.
Еще один вариант — самый конец навигационного блока. В этом случае код тоже слегка меняется:
Это все, что нужно для создания пагинации на сайте.
Сложности, возникающие при SEO-продвижении
Для удобства использования сайта наличие навигационного блока — огромный плюс. Но при СЕО-продвижении он может только помешать — в этом случае необходимо правильно все настроить. Иначе поисковики могут отображать сайт в своих результатах очень далеко от верхних позиций. Тому есть несколько причин:
- Штрафные санкции от поисковиков за повторяющийся контент.
- Проблемы с индексацией отдельных товарных позиций.
Поисковый бот проводит на сайте только определенный отрезок времени. В том случае, когда он попадает в интернет-магазин, на каждой странице которого есть по нескольку одинаковых позиций, различающихся только некоторыми параметрами, скорее всего, нужную позицию он просто не найдет, если она расположена не в одном из первых встречных блоков. Поэтому так важно добиться, чтобы все страницы хорошо индексировались при поиске.
Проблемы с повторяющимся контентом возникают из-за трудностей поиска релевантного контента к запросу. Если в каждом разделе вся информация выглядит практически одинаково, то поисковик не может адекватно выбрать нужную. Страницы становятся менее значимыми, ключевая перестает выделяться на общем фоне, и позиция сайта в выдаче снижается.
Как настроить навигацию для SEO
Пагинация должна как минимум не мешать СЕО-продвижению, а в идеале — еще и помогать ботам максимально быстро находить нужное. Чтобы добиться этого, можно использовать несколько способов.
Запретить ее индексировать
Есть ряд решений для такого варианта.
Использование мета-тега NOINDEX.
В этом случае в шапке каждой страницы за исключением самой первой, используется строчка: . Она запретит боту индексировать этот раздел сайта, но не помешает ему перемещаться по ссылкам.
Для применения такого метода нужно предварительно подумать над XML-картой сайта. Если нумерация динамична, то есть, при работе на сайте идет активное использование фильтров, то ссылка на начальный раздел формируется так: домен/catalog. С учетом этого, с адреса «домена/catalog?page=1» настраивается редирект 301 по адресу «домен/catalog».
Нужно при этом учитывать ряд деталей. Google игнорирует NOINDEX, хоть и воспринимает его в качестве элемента индексации. При наличии множества динамически изменяющихся страниц, тег нужно прописать для каждой. Из поиска при этом полностью исключается все, кроме того, который содержится на начальной странице.
Использование страницы «Смотреть все», а также тега CANONICAL
Это небольшая хитрость: формируется раздел сайта, на котором будут размещены все текущие товары. Поисковикам она будет указана как приоритетная с помощью тега CANONICAL.
В этом случае также нужно кое-что учесть: если нужно обработать большое количество контента, загрузка сильно затянется. Зато на этот тег адекватно реагируют все поисковики, а значит, сайт пройдет полную индексацию.
Однако для количества контента есть свои ограничения. В том случае, когда товарных позиций и фильтров очень много, тег прописывается на каждом динамическом разделе.
Применение файла robots.txt.
Навигационные страницы строятся по схеме «http://домен/category/page/n». В данном случае n — порядковый номер страницы.
Нужно создать robots.txt, который будет выполнять действие «Disallow: /category/page». Этот вариант одинаково хорош для работы со всеми поисковиками, но характерная особенность сохраняется и здесь: никакой контент, кроме расположенного на первой страницы, не будет учтен.