Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

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

.

Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

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

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

Сегодня пагинации бывают нескольких типов:

• Прямая нумерация («1», «2», «3»...).
• Прямая с указанием позиций в списке («1-10», «10-20» ...).
• Обратная с позициями («40-30», «30-20», «20-10» ...).

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

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

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

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

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

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

Для начала определяем, сколько у нас будет страниц, сколько из них будет отображаться в пагинации и какова текущая. Возьмем 45 страниц, текущую возьмем с $_GET"а (если ее нет, она равна 1). Число страниц, отображаемых в пагинации, оставляем гибким, чтобы корректировать число ссылок справа и слева от текущей.

Мы прописали сами данные, приступим к разработке пагинации. Она реализуется с помощью специальной функции - makePage, которая задается 4 параметрами: $iCurr (текущая страница), $iLastPage (последняя страница), $iLeftLimit (лимит слева), $iRightLimit (лимит справа).

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

Вывод при этом может иметь следующий вид:

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

Если мы находимся в начале, используем другой код:

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

На этом все.

Проблемы с пагинацией при SEO

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

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

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

Если говорить о повторяющемся контенте, позиция поисковиков к нему резко отрицательная. Объясняется это просто: каждой странице должен соответствовать релевантный контент. Если контент схож, например, список товаров + описание групп одинаковые либо похожи, поисковику трудно определить релевантную страницу из представленных.Значимость страниц распыляется и теряется, главная страница уже не выделяется на фоне остальных. Следовательно, в выдаче поисковика сайт теряет позиции.

SEO и пагинация

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

Закрыть пагинацию для индексации

Многие задаются вопросом, как закрыть страницы пагинации от индексации. Для этого есть несколько решений.

• Использовать мета-тег NOINDEX.

Здесь в «головную» секцию каждой страницы, кроме первой, мы вставляем строчку: . Таким образом мы не разрешаем роботу индексировать данную страничку, но позволяем проходить по ее ссылкам.

Здесь важно проработать XML карту ресурса. Если страницы ресурса динамичные, то есть можно использовать фильтры, ссылка первой веб-страницы должна выглядеть так: название домена/catalog. Со страниц «название домена/catalog?page=1» делаем редирект 301 на веб-страницу «название домена/catalog».

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

• Использовать файл robots.txt.

Страницы пагинации имеют определенный вид «вид http://название домена/category/page/n», в которых n- номер страниц. Необходимо прописать robots.txt, присвоить ему определенную команду: «Disallow: /category/page». Данный способ универсален и подходит для любых поисковиков. Однако нюанс сохраняется: весь контент со страниц пагинации, кроме контента первой, будет исключен.

Применять страницу «Смотреть все» и тег CANONICAL

Смысл в следующем: создается веб-страница, где будут отображаться все имеющиеся товары. Для поисковиков данная страница указывается как каноническая через тег CANONICAL.

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

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

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

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

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

Бесконечный скроллинг

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

Достоинства:

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

Недостатки:

• Нет возможности добавить свое местоположение в закладки, если нужно вернуться позже;
• После закрытия сайта, чтобы попасть в эту точку снова, приходится проделать весь путь с самого начала;
• Невозможно определить свое положение и в результате испортится весь опыт взаимодействия с продуктом;
• Не отражает реального объема доступных данных;
• Тяжело (невозможно) добраться до футера.

Классическая пагинация

механизм, который делит контент на отдельные страницы.

Достоинства:

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

Недостатки:

Прерывание состояния «потока» при поиске информации.

Новоизобретенная пагинация

Проанализировав достоинства и недостатки двух топовых видов, изобрела третий, который включает достоинства и выключает недостатки первых двух.

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

1. Берем постраничную пагинацию и «клеим» ее к правому краю сайта;
2. Фиксируем. При прокрутке страниц пагинация остается, а страницы меняются. Как вариант, можно «клеить» внизу экрана.

Стрелки вниз/вверх - начало/конец страницы;
Высота, ширина, внешний вид - на свой вкус. Если страниц много - опять используем прием классической пагинации: 1 2 3 4 5… 10

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

Никакой магии, все просто. Но почему-то на сайтах я такого способа не видела.

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

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

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

P.s. при написании статьи был использован материал и картинки из

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

Что такое pagination ?

Различается несколько видов:

• прямой с нумерацией (1,2,3)
• прямой с указанием позиций в списке (1−20, 21−40)
• обратный с указанием позиций в списке (новое, 600−31, 30−1)

Основные минусы

Временной лимит посещения сайта поисковыми роботами

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

Проблема с дублями

К идентичному контенту даже в рамках одного сайта поисковики относятся крайне негативно. В зависимости от той или иной структуры вашего листинга, велика вероятность того, что некоторые страницы могут иметь одинаковое содержание (текст, мета-теги). , скорее всего, вызовут недовольство у поисковых систем, что приведёт к проседанию страниц в выдаче.

Человеческий фактор

Большинство пользователей обычно просматривают не более 2−3 страниц из предложенного списка. Следовательно, с позиции ниже 10-той - трафика можно не ждать.

Неудобство юзабилити

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

Не нужно, но… необходимо

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

Способы решения проблем SEO оптимизации постраничного пейджинга

1. Расширение навигации сайта

Рэнд Фишкин (гений, плейбой, стиляга, сооснователь MOZ, SEO специалист и маркетолог с мировым именем) в одном из своих видеоуроков советует пересмотреть стратегию сайта. А именно - заменить постраничный пейджинг, созданием каталогов второго и третьего уровня.

2. Устранение постраничной навигации страниц пагинации посредством noindex

Плюсы:

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

Минусы:

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

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

Данная процедура осуществляется посредством добавления в мета-тега:

Советы:

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

3. Запрет индексации сайта при помощи файла robots. txt

Просто прописываем директиву: Disallow: /category/pagе

Минус: Исключает контент со всех страниц листинга, кроме первой.

4. Тег canonica l и страница «Смотреть всё» для страниц пагинации

Плюсы:

• Понимает как Google, так и Яндекс (для Google является приоритетным способом исключения из индексации).
• Вся информация индексируется через веб-страницу «Смотреть всё».

Минусы:

• Качество картинок и общий объем контента будет под определёнными ограничениями.
• Увы, для поисковой системы Яндекса canonical не является директивой. Если контент на страницах пейджинга не будет идентичен, то поисковой бот обязательно проигнорирует этот тег.
• Благодаря большому количеству фильтров и страниц, возрастает количество динамических страниц на которых нужно прописать данный тег.

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

Достаточно прописать в следующую строку:

Совет:

• Уменьшите разрешение объема товаров. Это исключит проблему долгой прогрузки страниц.

5. Asynchronous Javascript and XML

Плюсы:

• Каталог для поисковых систем выглядит как одна единая веб-страница. Как итог: весь контент будет проиндексирован, и исключается возможность появления дублей.
• Страница загружается не так долго, как в случае с «Показать всё».

Главная идея данного варианта SEO оптимизации - при прокрутке страницы вниз, автоматически подгружается новый контент. Достигнуть такого результата можно при помощи AJAX (Asynchronous Javascript and XML), позволяющей осуществлять обмен данными между сервером и браузером в фоновом режиме.

6. Решение проблемы пагинации при помощи тегов rel="prev"и rel="next"

Плюсы:

• Индексации подвергается весь контент.
• Не требует сложного ПО.

Минусы:

• Данный тег не воспринимает Яндекс.
• HTML код прост, но создается большой объем работы для прописывания всех необходимых цепочек.

Принцип достаточно лёгок: при помощи тегов Google получает команду при индексировании объединить все страницы, на которых прописан данный код, в одно целое.

Пример для трёх страниц каталога:

• для первой

Всем привет! Есть в SEO, как кажутся, элементарные и очевидные вещи, но если немного разобраться в них, возникает много вопросов и нюансов, которые беспокоят владельцев проектов. Сегодня я хочу поговорить про страницы пагинации (или еще их называют страницами листинга). Хочется написать развернутый урок: что, зачем и почему, чтобы все разъяснить, как удалось это сделать с уроком .

Я уже рассказывал на своем блоге, (там же и рассказывал, что такое постраничная навигация). Теперь пришло время показать, что нужно с ними делать с точки зрения SEO. Многих беспокоят следующие вопросы:

• стоит ли их закрывать индексацию пагинации в robots.txt;
• может стоит закрыть их с помощью meta name="robots";
• или лучше использовать rel=canonical;
• а может вообще их оставить открытыми для индексации;
• ну и другие вопросы.

Итак, поехали!

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

Как вы уже поняли постраничная навигация может быть на страницах, где размещено большое количество:

• карточек товаров;
• информационных постов;
• обсуждения на форумах.

Индексация пагинации

Лучше страницы пагинации не запрещать от индексирования, чтобы роботы доходили до как можно большего количества товаров/постов (особенно важно, когда у вас очень много товаров). Но опять же, несмотря на то, что страницы открыты для индексирования, я бы рекомендовал сделать так, чтобы они не участвовали в основном поиске. Я противник низкокачественных страниц в индексе и считаю, что в поиске должны быть только нужные страницы, и важность подобных страниц будет выше, нежели будет полно низкосортного контента. Как же тогда быть?

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

Требования Яндекса

Причем в данном случае проблем с индексацией товаров или постов не будет, так как rel=canonical не запрещает ходить роботам по страницам, но в индексе будет только основная страница в обоих поисковиках.

Требования Google

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

И да, есть такой момент: Яндексу все равно на теги rel=prev и rel=next, он не понимает их и просто игнорирует.

А что же говорят SEOшники?

Мнений на эту тему очень много, приведу парочку.

Кто-то говорит, что каждую страницу пагинации нужно подтачивать под разные запросы. К примеру, первую страницу под "Купить ноутбук", вторую под "Купить ноутбук недорого", третью под "Купить ноутбук в интернет-магазине" и так далее. Не делайте так. Поисковики не настолько тупые, может быть это еще и работало лет 5-8 назад, но сейчас однозначно так не стоит делать.

А кто-то говорит запретить в robots.txt или использовать тег meta name="robots" content="noindex,follow". Я раньше тоже так делал, но это не совсем правильно, так как поведенческие факторы со страниц пагинации не будут передаваться. Да и Яндекс также говорит:

Я не продвигаю страницы категорий на блоге (а зря, я рассказывал про пользу правильной ), все руки не доходят, как-нибудь доберусь обязательно, уберу "noindex, follow". Тем, кто продвигает категории, рекомендую использовать инструкцию выше.

Дублирование в пагинации

Кстати, если Яндекс считает, что страницы пагинации - это дубли, то Google так не считает, ему главное указать rel=prev и rel=next. Если вы используете тег rel=canonical на основную страницу, то в индексе будет только она. Если же использовать только rel=prev и rel=next, страницы пагинации будут попадать в индекс поисковых систем.

Теги prev и next показывают роботу, что страницы связаны в логической последовательности, как бы это одна большая страница. Именно поэтому одновременно использовать rel prev/next и rel canonical на основную страницу - неправильно. То есть, если вы хотите указать и каноникал, и prev/next, тогда каноникал указываем только на саму страницу (саму на себя).

Как оформить страницы пагинации

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

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

И еще, если мы находимся на второй или любой другой странице, ссылка на первую страницу должна идти сразу на основную, а не на /page/1, вот пример:

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

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

Бесконечный скроллинг и прочие javascript/ajax использовать можно, но чтобы не было проблем, я бы рекомендовал сделать так, чтобы все элементы индексировались и отдавались роботу. И все же, я бы продублировал бесконечный скроллинг цифрами 1,2,3,4, так как некоторым пользователям так удобнее. Вот пример:

Также, когда страниц очень много, можно сделать разбивку по 10 страниц для того, чтобы индексирующему роботу "бегать" по страницам было легче, да и страницы будут располагаться в меньшем количестве кликов. То есть выводим примерно так:

1, 2, 3 ... 10, 20, 30, 40, 50, 60, 70...79.

Вывод - как же в итоге поступить правильно?

На мой взгляд есть 3 варианта наиболее правильных развития событий:

1. Если вам важен Яндекс или интересны оба поисковика (практически для всех проектов под Россию), то делаем каноникал на первую страницу.
2. Если интересует только Гугл (например, ваш сайт находится в странах СНГ, где в некоторых из них трафика в Яндексе практически нет, или зарубежные проекты), то делаем rel canonical саму на себя и прописываем prev/next.
3. Если у вас есть страница, где выводятся все товары, можно указать рел каноникал на нее, использовать rel=prev и rel=next. Тогда будет правильно для обоих поисковых систем. Но в таком случае, напомню, минусы тоже есть: если у вас имеются категории, где выводятся больше количество товаров, то это замедлит скорость загрузки сайта, а это влияет на ранжирование.

Во всех случаях запрета на индексирование не требуется (ни в robots.txt, ни в meta name="robots"). Не забываем, что текст размещаем только на 1-ой странице, чтобы не было дублей с большим количеством совпадений. Вы можете проследить за изменения страниц в индексе в панели вебмастеров Яндекса и Google.

Если делать подобные шаги для оптимизации сайта, результат не заставит себя ждать. Вот свежий пример из последних наших работ (это суммарный трафик с поисковых систем, начали работать в октябре 2017-го года, кликните, чтобы увеличить):

Ребята, кто успел попасть на предзапись моего SEO-марафона, я почти всем ответил на вопросы, осталось еще чуть-чуть, вопросов пришло очень много, разгребаю. 🙂 Если вдруг вы не успели записаться на предзапись марафона, ждите новостей на блоге (подпишитесь на рассылку по почте, чтобы не пропустить старт продаж), в феврале стартуем!

Ну и вопрос: а что вы делаете со страницами пагинации на своих проектах?

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

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

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

В создании качественной пагинации нет ничего сверхсложного, достаточно лишь следовать перечисленным ниже советам.

1 Оптимальный размер страницы

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

2 Размер ссылок

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

3 Указание текущего положения

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

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

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

5 Ссылки на предыдущую и следующую страницы

6 Ссылки на первую и последнюю страницы

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

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

Тем не менее, решение простое - обозначить первую и последнюю страницу цифрами, как и остальные ссылки.

7 Проверьте мобильную версию

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

8 Навигация с помощью клавиатуры

Дайте пользователям возможность использовать для навигации клавиатуру. Клавиша «Вправо» - следующая страница, клавиша «Влево» - предыдущая страница. Главное - предупредить пользователя о данной возможности. Для предупреждения хватит текста под пагинацией: «Используйте клавиши ← влево и вправо → для навигации по страницам».

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

Номера страниц или «Далее/Назад»?

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

Вывод

Хорошая пагинация улучшает читабельность и уменьшает сложность.