Что такое пагинация, и как её оптимизировать
Мануалы
Пагинация используется на разных типах сайтов, а в особенности на больших интернет-магазинах. Благодаря ей огромные пласты информации можно разделить на части, за счёт этого увеличивается скорость загрузки страниц, а также становится удобно просматривать и находить нужные элементы.
При настройке пагинации легко допустить ошибки, которые могут серьёзно навредить оптимизации веб-ресурса.
Подробнее о том, как правильно внедрить пагинацию на страницах, я расскажу в этом посте.
- 1. Что такое пагинация страниц на сайте
- 2. Зачем нужна пагинация
- 3. Как оптимизировать страницы пагинации
- 4. Как настроить пагинацию на сайте
- 5. Как проверить, правильно ли настроена пагинация
1. Что такое пагинация страниц на сайте
Для удобства использования виртуального товарного каталога и структурирования информации все данные разделяют по нумерованным страницам. Чаще всего нумерация располагается в нижней части страницы, так как для пользователей привычнее именно такой вид. В нужный момент они перемещаются на другие страницы, кликнув на её порядковый номер либо на кнопку «Следующая страница».
Пагинация на сайте — это разбиение контента сайта по отдельным страницам. Для перехода пользователей по этим страницам используется навигационный блок — пагинатор. Пример навигационного блока:
Если элементов в каталоге очень много, для удобства указывается текущая страница, а также первая и последняя.
В некоторых интернет-магазинах также отображаются кнопки предыдущей и следующей страниц.
В фотобанках и библиотеках пагинация выглядит иначе. Она может иметь вид календаря, диапазона чисел. Например, на портале с книгами удобнее ориентироваться по буквам:
2. Зачем нужна пагинация
Представьте, если сотни или тысячи товаров разных категорий будут расположены на одной странице. Теоретически это возможно, так как длина виртуальной страницы не имеет пределов, но в таком случае скорость загрузки может страдать. Это плохо повлияет на поведенческие факторы и поисковое продвижение.
Представьте , что вы просматриваете каталог с товарами. Спустя время вам захотелось вернуться с конца списка к его началу или середине. Если навигационного блока с нумерацией страниц нет, сделать это быстро у вас вряд ли получится. Поэтому вы не захотите задерживаться на таком сайте и предпочтёте тот, где присутствует пагинатор, благодаря которому сможете легко находить нужные товары.
Преимущества пагинации:
- Упрощает навигацию по сайту, улучшает юзабилити.
- Способствует ускорению загрузки страниц за счёт разбиения контента.
- Повышает удобство пользования товарами благодаря нумерации страниц.
- Создаёт порядок внутри сайта и его разделов.
3. Как оптимизировать страницы пагинации
Пагинация создаёт удобство для посетителей и помогает роботу быстрее индексировать страницы, переходить от разделов к категориям и описаниям товаров. Однако неправильно настроенная SEO-пагинация приводит к проблемам в оптимизации. При большом количестве страниц робот может проиндексировать лишь несколько и пропустить страницы, важные для продвижения.
Кроме того, большое количество страниц с полностью или частично одинаковым контентом (например, карточки с товарами) поисковый робот воспринимает как дубли. Владелец сайта может этого не заметить, но поисковики за дубли наказывают. Поэтому при создании пагинации нужно убедиться, что метаданные каждой страницы уникальны.
Например, в магазине одежды лучше оптимизировать страницы основных категорий: верхняя одежда, пижамы, головные уборы. На первых страницах категорий нужно добавить уникальные описания с ключевыми фразами, которые не будут повторяться на карточках товаров.
Что делать со страницами пагинации
Для успешного поискового продвижения сайта следует использовать один из вариантов оптимизации страниц пагинации:
- Закрыть от индексации все страницы пагинации, кроме главной в каталоге через метатег
<meta name=”robots” content=”noindex, follow” />
Его нужно добавить в содержимое тега <head> каждой страницы пагинации, кроме основной. При этом необходимо проверить, чтобы URL главной и первой страницы не дублировались. Для этого настройте 301 редирект с первой страницы (page-1) на главную страницу категории. А текст описания раздела разместите только на page-1.
Пример: в магазине игрушек есть категория «Куклы», в которую вложены страницы с карточками товаров:
При возврате со страницы site.ru/dolls/page-3 на главную страницу категории должен выполняться переход на site.ru/dolls/, а не на site.ru/dolls/page-1. Значит со страницы site.ru/dolls/page-1 настраиваем редирект на site.ru/dolls/. Этот способ подходит для Яндекс и Google, но стоит учесть, что при этом увеличивается риск неиндексации глубоко вложенных страниц. Они просто могут не появиться в поиске, так как индексироваться будет основная страница категории. Тем не менее, это самый простой способ указать роботам страницы, которые нужно индексировать. Использовать тег noindex без лишней надобности не рекомендуется, чтобы не закрывать от индексации дальние страницы с товарами.
site.ru/dolls/;
site.ru/dolls/page-1;
site.ru/dolls/page-2;
site.ru/dolls/page-3. - Создать каноническую страницу, на которую ведут все страницы пагинации. В этом случае создаётся одна страница с кнопкой «Посмотреть всё», на которой размещается вся сетка товаров. Далее на каждую страницу пагинации добавляется тег rel="canonical" с указанием на страницу «Посмотреть всё».
Эта задача практически невыполнима на сайтах с сотнями или тысячами товаров, так как главная страница со всеми товарами будет очень долго грузиться. Оптимальный вариант — создать несколько канонических страниц под каждую категорию. Для этого на каждую страницу пагинации в раздел Head добавьте код:
<link rel="canonical" href="https://site.ru/category/page-main/"/>где page-main — главная страница категории.
Так вы указываете роботу, что страница site.ru/category/ входит в главную page-main. - Использовать автоматическую прокрутку AJAX и JavaScript.
В этом случае нумерация страниц отсутствует, а данные подгружаются постепенно при скроллинге страницы. Бесконечная прокрутка особенно актуальна для социальных сетей. При скроллинге информация со следующих страниц подгружается автоматически без отображения кнопок, номеров и других знаков. В этом случае для удобства пользователей рекомендуется добавить кнопку «Посмотреть ещё» или «Показать ещё N товаров».
Такой метод прокрутки чаще используется на сайтах с большим количеством товарной продукции или картинок. Чтобы посетитель не запутался в страницах, ему предлагается подгрузить еще N позиций, либо их загрузка происходит автоматически. При этом в нижней части страницы всегда остаётся кнопка со стрелкой наверх.
Раньше можно было внедрять ещё один метод оптимизации пагинации — атрибуты rel="prev" и rel="next". В официальной справке Google рекомендовал использовать такой метод оптимизации страниц пагинации, но в марте 2019 года прекратил учитывать эти атрибуты при индексации.
Поскольку Яндекс-робот также не воспринимает "prev" и "next”, больше нет смысла их использовать . Если эти атрибуты уже встроены в страницы — не спешите удалять, так как они не помешают поисковой оптимизации и могут быть полезными для посетителей сайта.
4. Как настроить пагинацию на сайте
Создание пагинации состоит из нескольких этапов:
- Подключение jQuery библиотеки через добавление кода в раздел Head на страницах пагинации. Скачать архив с файлами можно на официальном сайте библиотеки.
- Подключение плагина пагинации и стилей CSS через скрипты, которые прописываются заранее с учетом дизайна.
- Добавление HTML-кода, который нужно прописать в месте вывода нумерации страниц.
- Запуск плагина с указанием общего количества страниц, отображаемых ссылок, размера цифр в нумерации. Если нужно, здесь прописываются строки для отображения кнопок «Следующая» и «Предыдущая».
5. Как проверить, правильно ли настроена пагинация
Наиболее распространённые ошибки при внедрении пагинации:
- Дубликаты метатегов Title.
О том, как найти и устранить дубликаты метатегов, читайте в посте на нашем блоге «Как найти дубликаты с помощью Netpeak Spider».
- Повторы участков текста. Для их выявления можно использовать программы определения уникальности текста. Проверьте уникальность каждого абзаца и удалите внутренние повторы.
- Неправильно указаны страницы для индексации. Установите атрибут rel=”canonical” только для главных страниц разделов. Закройте от индексации страницы пагинации через robots.txt.
- Долго грузится страница «Посмотреть всё», на которую настроена пагинация со всех карточек товаров. При наличии большого количества продукции лучше сделать несколько главных страниц, которые объединяют разные категории
Подводим итоги
Пагинация страниц упрощает их индексацию, но в то же время может создать трудности в поисковом продвижении. Существует риск возникновения дублей страниц и игнорирования поисковыми роботами глубоко вложенных страниц с товарами.
При небольшом количестве вложенных страниц можно закрыть от индексации все страницы, кроме главных, с обозначением категорий. Более предпочтительный вариант — создать каноническую страницу, в которой будут собраны все товарные категории.
Неправильно настроенная пагинация приводит к некорректной индексации страниц сайта поисковыми роботами. При наличии одинакового контента страницы сайта падают в выдаче либо вовсе исчезают из поиска. Поэтому важно регулярно проводить проверку пагинации, а именно выявлять неправильную индексацию, наличие дублей и страниц с низкой скоростью загрузки.
