Пагинация страниц: как ее создать и оптимизировать

В статье рассказывается:

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

Любой SEO-специалист должен работать с постраничной навигацией. Это одна из его прямых обязанностей. Но не стоит забывать об основополагающем правиле SEO-оптимизации: информация на странице должна полностью соответствовать запросу пользователя. Не нужно создавать множество дублей со схожими заголовками. Эффективное решение для SEO-оптимизаторов, помогающее избегать дублирования заголовков, — пагинация страниц. Споры по поводу того, какой она должна быть, не утихают. Сегодня мы попытаемся разобраться в данном вопросе.

Что такое пагинация страниц и каковы ее основные формы

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

Для более ясного понимания пагинации приведем простую аналогию. Листая какой-либо справочник или печатный каталог, мы видим, что данные в нем упорядочены. Товары или специализированная информация не представлены там единым непрерывным текстом. Благодаря такому разделению информации проще читать издание, кроме того, удается быстрее найти необходимые нам сведения. Пагинация решает и смежные задачи: облегчает и делает просмотр информации удобнее.

То есть пагинацию используют для того, чтобы повысить юзабилити сайта и скорость загрузки страниц.

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

Остановимся на самых удачных вариантах представления постраничной навигации.

Стандартный вид

Стандартная форма пагинации — номера страниц в перечне со ссылками на соответствующие разделы.

Источник: shutterstock.com

Нередко число видимых номеров страниц урезают до 5 (оставляя текущий и по две в одну и другую стороны), а также добавляют кнопки «Вперед», «Назад в начало», «В конец» (оно же к первой и последней странице списка).
В поисковых системах

Отличительная черта нумерации на страницах поисковиков — открытая верхняя граница списка. Это вполне логично: посетители почти никогда не просматривают больше трех страниц выдачи. Они хотят получить самые свежие данные или информацию, максимально соответствующую запросу. Поэтому рядом с постраничной навигацией размещают блок сортировки результатов поиска. Номер текущей страницы выделяют графически, не прикрепляя к нему ссылку.
В интернет-магазинах

Как правило, в пагинации интернет-магазинов обозначают количество найденных товаров.

Для определенных товарных групп, к примеру украшений и одежды, меню выбора «количество товаров» размещают на странице вместе с кнопкой «Показать все». Конечно, из-за этого одна страница может загружаться медленнее. Но зато число обращений снижается, что разгружает сервер в пиковые часы посещений.
В библиотеках

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

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

Владельцы некоторых подобных сайтов вместо привычной нумерации используют даты публикации материала.
В фотобанках

Фотобанки содержат огромный пласт графических данных, однозначная вербальная идентификация которых достаточно затруднительна. При этом посетителю неважно, на какой странице находится нужное ему изображение. Ему важно, чтобы картинка понравилась, и лучше всего, чтобы вероятность ее выбора другим пользователем была минимальна. Посетители фотобанков редко выбирают изображение с первой страницы. И поскольку на сайте может быть несколько тысяч страниц, в качестве навигационного блока лучше использовать поле для ввода страницы и кнопки «Вперед»/«Назад».
В банках аватарок

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

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

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

По большей части социальные сети призваны развлекать пользователей, а потому главная цель интерфейса Social Network — привлечь и удержать внимание посетителя. Говоря иначе, заинтересовать его, не дав уйти. Чтобы успешно решить эту задачу, в соцсетях в принципе не используют пагинацию. Вместо перехода на следующую страницу человек может подклеить ее к текущей ленте внизу.

В связи с этим страницы в соцсетях всегда без номеров и просмотреть их можно лишь в обратном порядке, по хронологии. Для межстраничной навигации используют ссылки «Вперед»/«Назад», «Ранее»/«Позднее», «Еще»/«Меньше» и т. д.
В продвинутых социальных медиа

Такие социальные сети, как Facebook, Twitter и ВКонтакте, вообще убрали пагинацию и пошли еще дальше: загрузка следующей страницы осуществляется в автоматическом режиме, после того как пользователь промотал текущую до конца экрана.
На видеоресурсах

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

Такая пагинация удобна как видеоресурсам, так и фотобанкам и библиотекам.

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

Как сделать на сайте удобную пагинацию страниц

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

Определять оптимальную форму пагинации и решать, нужна ли она в принципе, следует в контексте конкретного сайта, а потому всегда надо отталкиваться от стремления сделать удобную юзабилити для пользователей.

Создать качественную пагинацию нетрудно. Главное — соблюдать нижеприведенные рекомендации.

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

«Навигация на сайте: как ее правильно построить?» Подробнее

Удобный размер страницы

Ваша страница не должна быть очень маленькой. Сайт или приложение — не печатное издание, где размер страниц ограничен его собственным объемом и величиной его листов. Габариты сайта ограничены только вычислительной мощностью гаджета и выдержкой пользователя. Оптимальным считают отображение от 20 до 80 записей на странице. Но это лишь примерное значение. Реальное зависит от категории сайта. На одних этот показатель равен 10, на других — 100. Самое важное — сделать сайт удобным для посетителя.

Удобный размер ссылок

Элементы пагинации страниц (как и любой другой части навигации) нужно делать крупными. Прежде всего это требуется мобильным пользователям, чтобы они не промахивались при нажатии кнопки на сенсорном экране своего устройства. Попасть на кнопку на экране мобильного гаджета, конечно, труднее, чем навести курсор на необходимый элемент с ПК или с помощью стилуса.

Визуальное выделение номера страницы

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

Оптимальное пространство вокруг элементов

Ставьте не больше 10 ссылок. Кроме того, ваша задача — убедиться и в том, что размера ссылок и свободного места между ними хватает для того, чтобы посетитель нажимал на ту ссылку, на которую действительно хотел нажать.

Возможность перейти на предыдущую и следующую страницу

Для посетителей очень удобны ссылки на предшествующую и следующую страницы. Их нужно зрительно оградить от других. Дополнительно (или вместо текста) в ссылке может содержаться иконка стрелки.

Возможность перейти на первую и последнюю страницу

Нередко встречается пагинация, включающая в себя ссылки на первую и последнюю страницы. Они не очень распространены, однако необходимы посетителям, желающим начать изучение сайта с самых первых публикаций (если последние расположены на первой странице, что характерно для новостных сайтов). Эти ссылки визуально напоминают ссылки, ведущие на предшествующую и следующую страницы (к примеру, двойная стрелка), что запутывает посетителей: они не понимают, какая ссылка что означает. Решить проблему, добавив текст, — не выход. Нужно обозначать первую и последнюю страницу цифрами, как и другие ссылки.

Оптимизация под мобильную версию

Габариты экрана у мобильных устройств ограничены, а потому следует разумно сократить количество элементов и увеличить их размеры.

Как сделать на сайте удобную пагинацию страниц

Источник: shutterstock.com

Для мобильных гаджетов можно оставить номер текущей страницы вместе с базовыми элементами (первой, предыдущей, следующей и последней страницей).

Оптимизация под клавиатуру

Сделайте так, чтобы пользователи могли применять клавиатуру для навигации, переходя с помощью клавиши «Вправо» на следующую страницу, клавиши «Влево» — на предыдущую. Важно лишь рассказать пользователю о такой возможности. Чтобы его предупредить, просто напишите под пагинацией: «Используйте клавиши ← влево и вправо → для навигации по страницам». Кроме того, можно дать человеку возможность переходить по ссылкам клавишей Tab. При выделенной ссылке нажатие Enter должно вызывать переход на следующую страницу.

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

«Структура сайта: схемы, советы по разработке, примеры» Подробнее

Проставление нумерации страниц

Чем пользоваться — пейджингом или навигацией «Далее/Назад»? На малостраничном сайте вероятность того, что пользователь пройдется по всем страницам, возрастает. Если же у человека нет возможности оценить количество записей, его терпение может иссякнуть раньше, чем он перейдет на следующую страницу.

Один из самых простых способов создания постраничной навигации

Пагинация страниц php и с использованием баз данных, библиотек jQuery и AJAX возможна разными способами. Выделяют плагины, работающие на стороне пользователя и на стороне сервера.

Приведем простой пример скрипта с применением jQuery, работающего на стороне пользователя. Он позволит вам создать быстрый и эстетичный пейджинг страниц.

Используем скрипт постраничной навигации simplePagination, укомплектованный тремя темами оформления с поддержкой Bootstrap. Скрипт довольно мало весит и прост в установке.

Подключаем jQuery

Если на своем на сайте вы еще не используете jQuery, на странице между тегами <head> и </head> нужно подключить jQuery не ниже версии 1.7.2.

jQuery

Сделать это можно двумя способами. Первый — воспользоваться специальным хранилищем Google: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>.

Второй — использовать библиотеку jQuery из скачанного архива с исходниками, заранее загрузив ее на хостинг в папку с вашим сайтом:

Следующей строчкой нам нужно подключить непосредственно плагин jquery.simplePagination.js:

Подключаем CSS

Пагинация страниц CSS предполагает выбор темы с наиболее подходящим дизайном из трех представленных: светлого, темного и компактного. Далее из исходного файла со стилями необходимо выбрать часть кода с желаемым стилем и вставить его в файл стилей .css сайта.

Если не хотите усложнять себе задачу, просто подключите исходный файл CSS такой строчкой кода:

Прописываем код HTML

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

<div id="light-pagination" class="pagination"></div> (светлая тема);
<div id="dark-pagination" class="pagination"></div> (темная тема);
<div id="compact-pagination" class="pagination"></div> (компактная тема).

Кейс: VT-metall

Узнай как мы снизили стоимость привлечения заявки в 13 раз для металлообрабатывающей компании в Москве

Узнать как

Инициализируем плагин

Для запуска плагина нам нужно всего несколько строк кода:

$(function() {

$(#light-pagination).pagination({

items: 100,

itemsOnPage: 10,

cssStyle: 'light-theme'

});

Данный пример приведен для светлой темы #light-pagination. Для ее замены на темную нужно лишь изменить селектор на #dark-pagination, для компактной — #compact-pagination. Обязательно в этом случае меняйте и класс в файле со стилями cssStyle.

Чтобы настроить этот скрипт, применяют такие опции:

items — общее число элементов для расчета страниц пагинации (1 по умолчанию);
itemsOnPage — число отображаемых на каждой странице элементов (1 по умолчанию);
pages — число страниц в списке. Если обозначено значение, то вышеуказанные опции items и itemsOnPage не применяются;
displayedPages — число отображаемых в процессе навигации страниц. Максимально допустимо 3. По умолчанию — 5;
edges — число страниц, которые видны в начале и в конце пейджинга. По умолчанию — 2;
currentPage — стартовая страница после запуска. По умолчанию — 1;
hrefTextPrefix — строчка, которая используется в атрибуте HREF. Ее добавляют перед номером страницы. По умолчанию "#page- ";
hrefTextSuffix — строчка, которая используется в атрибуте HREF. Ее вставляют после номера страницы. По умолчанию — пустая;
prevText — текст кнопки на предыдущую страницу. По умолчанию — Prev;
nextText — текст кнопки на следующую страницу. По умолчанию — Next;
cssStyle — определяет стиль CSS. По умолчанию — light-theme;
selectOnClick — выбор страницы после нажатия. По умолчанию — включен (true).

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

Как сделать на сайте удобную пагинацию страниц

Источник: shutterstock.com

В итоге весь код этого пагинатора, установленного на одной из страниц сайта, должен выглядеть так:

$(window).load(function(){

$('#light-pagination').pagination({

items: 100,

itemsOnPage: 10,

hrefTextPrefix: '',

hrefTextSuffix: '.html',

prevText: 'Начало',

nextText: 'Конец',

cssStyle: 'light-theme'

});

</script>

Этот скрипт нужно установить на все страницы, где требуется пагинация.

Пагинация страниц и SEO-оптимизация

В связи с тем, что на большинстве сайтов предусмотрены функции в виде страниц навигации, настраивать пагинацию приходится и веб-мастерам, и SEO-оптимизаторам.

Пагинация страниц и SEO-оптимизация

Источник: shutterstock.com

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

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

Также существует риск возникновения проблем с дубликатами. С учетом структуры ваших страниц с пагинацией не исключено, что контент некоторых из них будет схожим или аналогичным друг другу. Кроме того, вы будете часто замечать, что теги title и meta description на сайте одинаковы. В такой ситуации работа поисковиков может усложняться в связи с дублирующимся контентом, когда наступит время выявить страницы, максимально соответствующие определенному поисковому запросу.

Дубли страниц

Сегодня SEO-специалисты решают эту проблему 4 методами.

Используют noindex

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

Как применяется метод?

Этот метатег:

добавляют в секцию <head> на все страницы, кроме первой. Это позволяет исключить из индекса все страницы пагинации, кроме главной в каталоге. При этом обеспечивается индексация страниц пагинации и товаров в нем.

Вот что следует помнить:

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

Допустим, если пагинация у вас создана такая:

site.com/catalog?page=2

site.com/catalog?page=3

…

site.com/catalog?page=N

то, если вы находитесь на первой странице, ссылка на первую должна быть следующей:

site.com/catalog

при этом со страницы

site.com/catalog?page=1

должен быть настроен 301 редирект на site.com/catalog.

Преимущества:

совмещается с Яндексом;
является самым простым из всех существующих решений;
эффективно исключает все страницы пагинации из индексации, если рациональных причин для их включения в нее нет.

Недостатки:

несмотря на способность решать потенциальную проблему пагинации, при использовании этого способа из индексации исключается постраничный контент;
при большом количестве товаров, если не использовать xml-карту сайта, глубоко расположенная в каталоге продукция будет долго индексироваться.

Рекомендуемые статьи по данной теме:

Используют rel =«canonical»

Google рекомендует использовать именно canonical для страниц пагинации. В данном случае необходимо создать отдельную страницу «Смотреть все» и вывести на ней все продукты/страницы из данного каталога. При этом на всех страницах пагинации надо проставить rel=«canonical» на «Смотреть все».

Как реализуется этот способ? После создания страницы «Смотреть все» (допустим, это site.com/catalog/view-all.html) на всех страницах пагинации в секцию <head> ставят \:

Это позволяет показать поисковикам, что каждая страница пагинации как бы является элементом «Смотреть все».

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

Здесь нужно учесть следующие моменты. Загрузка страницы «Смотреть все» должна занимать 1–3 секунды, а потому такой метод прекрасно подходит для сайтов, где 5–20 страниц с пагинацией, и при этом не применим к каталогам с сотнями страниц для пагинации.

Преимущества:

предпочтительный способ для Google;
все содержание пагинации присутствует в индексе поисковой системы через страницу «Смотреть все».

Недостатки:

метод не может быть использован на многостраничных сайтах, а также на ресурсах, где много высококачественных изображений для товаров/статей;
достаточно трудно реализовать его на большей части стандартных CMS.

Используют Rel=«prev»/«next»

Еще один способ, позволяющий решать проблему с пагинацией. Возможно, он самый трудоемкий, но при этом наиболее универсальный для Google (Яндекс сейчас не учитывает эти директивы). Так как реализовать его достаточно трудно, использовать его следует очень аккуратно.

Рассмотрим схему работы.

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

Применяя rel=«prev»/«next», вы, по сути, связываете все страницы цепочкой. Свое начало она берет на первой странице: для этого в секцию добавляется <head>:

Это единственный атрибут для первой страницы. Для второй нужно обозначить как предшествующую, так и следующую:

Для третьей страницы делаем аналогично второй:

Находясь уже на заключительной, четвертой странице, указывают лишь предыдущую в цепи:

Google использует атрибуты rel=«prev»/«next», объединяя эти страницы в один элемент индексации. Обычно для пользователей это будет первая страница, поскольку, как правило, именно она самая релевантная.

Особенности:

rel=«prev» и rel=«next» для Google — не директивы, а вспомогательные атрибуты;
значениями могут быть как относительные, так и абсолютные URL (на основании с допустимыми значениями тега <link>);
при обозначении в документе ссылки <base> относительные пути определяются на основании базового URL;
в случае выявления Google ошибки в вашей разметке (допустим, отсутствия ожидаемого значения атрибута rel=«prev» или rel=«next») основой для последующей индексации страниц и распознавания контента станет собственный эвристический алгоритм Google;
необходимо следить за тем, чтобы URL первой страницы не повторялся.

Преимущества:

дает возможность решать проблему с пагинацией страниц, не используя «Смотреть все»;
реализация осуществляется лишь с несущественными изменениями в HTML.

Недостатки:

Яндекс не учитывает эти атрибуты;
реализация бывает достаточно трудной;
необходимо очень внимательно проставлять связи в цепи страниц.

Используют AJAX и JavaScript прокрутки

Вы наверняка сталкивались с ситуацией, когда нужно бесконечно прокручивать ассортимент в интернет-магазинах. Для загрузки товаров необходимо постоянно прокручивать их в нижнюю часть экрана. Несмотря на то, что это неплохой вариант сделать юзабилити сайта лучше, его также нужно использовать грамотно.

Лучше сделать так, чтобы ассортимент не загружался при прокрутке автоматически. Правильнее разместить под последними товарными позициями кнопку «Показать еще N товаров».

Зачастую при использовании атрибутов rel=«prev»/«next» на страницах пагинации могут присутствовать параметры, не меняющие контент:

сессионные переменные;
сортировки;
изменение количества элементов на страницу.

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

«Каноническая ссылка: как правильно установить, ошибки при использовании» Подробнее

В этом случае контент дублируется. Решить проблему позволяет сочетание rel=«prev»/«next» и rel=«canonical».

Для этого в первую очередь нужно удостовериться, что на всех страницах пагинации с rel=«prev»/«next» использован тот же параметр. Кроме того, для каждого URL с параметром следует прописать его каноническую страницу без этого параметра. Допустим, мы располагаем теми же самыми 4 страницами пагинации и, чтобы отслеживать посетителей, пользуемся идентификатором сессии sessionid=55:

Идентификатор сессии sessionid=55

Важно также правильно использовать фильтры и rel=«prev»/«next». Допустим, вы используете параметры, по которым сайт способен выдать уникальное содержание, и для вас важно, чтобы такие отфильтрованные страницы присутствовали в индексе. Например, у вас есть категория с кроссовками и вы намерены создать посадочные страницы для поисковой выдачи с различными брендами, применив при этом параметры в URL.

В этом случае:

не нужно применять rel=«canonical» на основную категорию в связи с уникальным содержанием;
для каждого бренда необходимо сформировать свои уникальные цепочки, основой для которых станет rel=«prev»/«next»:
создать для каждого фильтра уникальные и релевантные title, descriprion вместе с текстом описания категории.

Итак, решать проблему с пагинацией мы рекомендуем следующим образом: при наличии технической возможности создать страницу «Смотреть все». При условии быстрой загрузки подобных страниц и их не очень крупного размера вы можете использовать такой вариант, поскольку его советует Google, а Яндекс понимает директиву rel=«canonical».

Но чаще всего разумнее использовать сочетание атрибутов rel=«next/prev» (понимает Google) и метатега robots=«noindex,follow» (как Google, так и Яндекс).

Пагинация страниц в WordPress

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

Раньше, чтобы реализовывать эту возможность, пользовались сторонними плагинами или специальными функциями, расположенными в файле functions.php. Но после выхода WordPress версии 4.1 функцию постраничной навигации встроили в ядро CMS. Сейчас, чтобы реализовать постраничную навигацию, достаточно внутреннего функционала WordPress и необходимости в добавлении стороннего кода или плагинов нет.

С помощью плагина

Самый распространенный плагин постраничной навигации для WordPress — WP-PageNavi. Он прекрасно решает поставленную задачу пагинации, а потому бессмысленно говорить об остальных плагинах и сравнивать их с ним.
Без помощи плагина

Для создания пагинации на сайте без плагинов необходимо использовать функцию the_posts_pagination(), встроенную в WordPress. В нужном нам месте следует вставить такой код (чаще всего это файлы index.php, category.php и подобные им):

<?php the_posts_pagination(); ?>

В результате своей работы функция the_posts_pagination() выдаст приблизительно такой HTML-код:

<nav class="navigation pagination" role="navigation">

<h2 class="screen-reader-text">Навигация по записям</h2>

<div class="nav-links"><span class="page-numbers current">1</span>

<a class="page-numbers" href="http://domainname.tld/page/2/">2</a>

<span class="page-numbers dots">…</span>

<a class="page-numbers" href="http://domainname.tld/page/98/">98</a>

<a class="page-numbers" href="http://domainname.tld/page/99/">99</a>

<a class="next page-numbers" href="http://domainname.tld/page/2/">Следующая страница</a>

</div>

</nav>

Сразу виден Н2-заголовок «Навигация по записям», который, как правило, не должен находиться на сайте. Чтобы его устранить, добавьте следующий код в файл functions.php:

/* Удалите H2 из пагинации */

add_filter('navigation_markup_template', 'my_navigation_template', 10, 2 );

function my_navigation_template( $template, $class ){

return '

<nav class="%1$s" role="navigation">

<div class="nav-links">%3$s</div>

</nav>

';

}

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

По умолчанию the_posts_pagination() отображает только первую и последнюю страницу, а также по одной странице вокруг текущей. Вместо других используется многоточие.

Эту тенденцию можно изменить, используя аргументы:

show_all — показывать все страницы;
end_size — число страниц в начале и конце списка;
mid_size — число страниц слева и справа от текущей страницы.

Пагинация страниц в WordPress

Источник: shutterstock.com

Например:

<?php

the_posts_pagination( array(

'mid_size' => 2,

'end_size' => 2,

) );

Если текстовые ссылки вы не любите, приукрасьте их. Настройка страниц пагинации может выглядеть так:

.page-numbers {

padding: 1% 2%;

box-shadow: 0 0 10px #ccc;

margin: 0 1% 0 0;

background: #fff;

border-radius: 3px;

}

Ссылки на страницы пагинации будут смотреться интереснее.

Скачайте полезный документ:

Итак, в WordPress пагинацию можно легко реализовать, не используя внешние плагины и сторонний код. Если вас интересует постраничная навигация WordPress, хватит встроенного функционала CMS.

Как закрыть страницы пагинации в WordPress от индексации

Для чего закрывать пагинацию от индексации? Прежде всего, чтобы беспроблемно продвигать сайт. Это основное и единственное объяснение. Надо сказать, что URL-адрес всех подстраниц отсылает к основной странице, где как раз и начинается пагинация. То есть названия этих страниц в теге <title> будут дублироваться. Поисковикам не очень нравится такая ситуация. В связи с этим владельцу сайта будут поступать соответствующие оповещения, а позиции веб-ресурса в рейтинге поисковых систем могут снизиться. Поэтому если на вашем сайте все же будет пагинация, позаботьтесь о том, чтобы она корректно отображалась для поисковых роботов.

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

«Внутренняя перелинковка сайта: в чем ее преимущества» Подробнее

Решить задачу, связанную с закрытием от индексации, можно несколькими способами. Отличие между ними состоит лишь в схеме реализации. Остановимся на самых простых и известных методах, используемых пользователями WordPress.

При использовании плагина Clearfy Pro необходимо помнить, что он уже оснащен инструментами, предназначенными для закрытия от индексации страниц пагинации сайта. Нужно зайти в панель администратора и перейти в раздел Clearfy Pro. Далее на вкладке «Дубли» сдвинуть ползунок вправо, напротив опции «Удалить дубли пагинации постов», и сохранить изменения.
Для закрытия от индексации страниц пагинации в SEO-плагине All in One SEO Pack необходимо, установив и активировав его, зайти в панель администратора, перейти в All in One SEO -> Общие настройки, отметить пункт «Запретить пагинацию для канонических URL», после чего нажать «Обновить настройки».
При помощи файла functions.php.

Необходимо добавить специальный PHP-код в файл вашей темы functions.php и вставить в конец указанного файла следующие строчки:

function wpschool_noindex_paged() {

if ( is_paged() ){

?>

<meta name="robots" content="noindex,nofollow">

<?php

}

}

add_action( 'wp_head', 'wpschool_noindex_paged', 2 );
При помощи файла robots.txt. В этом случае необходимо редактировать конфигурационный файл robots.txt, предназначенный исключительно для поисковых роботов. Чтобы закрыть страницы пагинации в robots.txt от индексации, в самый конец файла добавляем строчку:

Disallow: */page/

Надо сказать, что здесь не указывают адрес сайта, поскольку он уже известен для robots.txt. Такой метод имеет один недостаток: не все поисковики могут соблюдать заданные в нем правила.