Что такое пагинация и как ее внедрить на сайт?

Марат Исрафилов ЭКСПЕРТ

Совладелец и директор агентства интернет-рекламы Юла Group. Более 15 лет опыта на рынке. Основная деятельность: - SEO Продвижение сайтов в ...

Поделиться

В этой статье речь пойдет о таком термине из SEO, как пагинация. Расскажем, что это такое, для чего нужно и как грамотно настроить пагинацию на своем сайте. 

Что такое пагинация

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

Реклама

До +25% к бюджету с getUNIQ

Рекомендуем: getUNIQ – пополняй рекламные кабинеты с выгодой!

• Обещанный платеж
• Единый кабинет и пополнение без комиссий
• Автоматизация, создание и ведение рекламных кампаний во всех сетях
• Настроим рекламу с нуля в Яндекс.Директ, myTarget, VK, TikTok и других сетях
• Наглядная статистика, Автопостинг и Автопополнение

Перейти на сайт

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

Для наглядности приведем пример:

А теперь представим эту книгу в формате свитка – длина получившегося «рулона» будет около 25 м (именно столько занимают 2 660 строк текста). Насколько легко у вас получится запомнить момент, на котором вы остановились, а затем быстро найти его? 

В мире веб-сайтов существует та же проблема. Если объединить всю информацию на одной странице – получится настоящий кошмар, потому что:

• Сайт будет выглядеть неаккуратно
• Пользователю будет трудно найти нужную информацию
• Страница будет загружаться очень долго и т.д.

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

Виды пагинации

Существует несколько видов пагинации:

1) Пагинация с номерами страниц

Каждой странице присваивается свой номер, с помощью которого пользователь может быстро перейти к нужному материалу. Такой вид пагинации используют большинство сайтов. Например, в разделах «Блог», «Статьи» и т.д. Обычно на каждой такой странице находится 10-15 статей. Чтобы посмотреть ранее размещенный материал, пользователю придется перейти на 2-ю, 3-ю и следующие страницы. 

2) «Показать ещё»/«Загрузить далее»

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

3) Бесконечный скролл

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

4) Алфавитная пагинация

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

5) Комбинированная пагинация

Объединение нескольких видов пагинации. Чаще всего объединяют пагинацию с номерами страниц и кнопку «Показать еще». Благодаря этому пользователь может сам выбрать, как ему будет удобнее просматривать материал – по порядку или быстро перелистывая на нужную страницу.

Функции пагинации

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

1) Увеличение скорости загрузки страниц

На страницах современных сайтов наряду с текстом размещаются изображения, видеоролики и другой контент. Из-за этого размер одной страницы может достигать нескольких мегабайт. А теперь представьте, что сайт состоит из сотен таких страниц – как думаете, сколько времени займет загрузка, если весь материал размещен на одной странице? Для примера: «вес» русскоязычной Википедии – более 25 ГБ. 

2) Улучшение юзабилити сайта

Здесь можно выделить два основных преимущества:

• Упрощение навигации. Искать материал на сайте намного проще, если он разбит на определенные категории и подкатегории или помещен на разные страницы. 
• Например, вам не придется искать «Евгения Онегина» в каталоге онлайн-библиотеки – достаточно просто перейти в список авторов и выбрать букву «П».
• Придание сайту аккуратного и привычного вида. Любой современный сайт состоит из нескольких страниц (исключение – лендинги). Пользователь не привык видеть весь контент в одном месте. 

3) SEO-оптимизация

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

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

Чтобы сделать пагинацию на сайте, вы можете воспользоваться следующими способами:

1) Написать код самому

Около 80% всех сайтов создано на РНР. Чтобы самостоятельно сделать пагинацию, нужно владеть этим языком программирования. 

Пагинация на РНР может быть:

• Постраничная
• Тематическая

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

Главное преимущество метода заключается в его универсальности – он подойдет для большинства сайтов независимо от того, на чем они сделаны. Минус в том, что вы должны владеть РНР.

2) Загрузить готовый плагин/модуль

Если вы не владеете языками программирования, а ваш сайт создан на основе CMS – вы можете использовать готовые решения. Они предусмотрены практически для всех «движков», например:

• WordPress
• OpenCart
• Joomla
• Drupal и т.д.

В некоторых случаях нужные модули уже установлены в CMS, а в некоторых – вам придется отдельно искать их, при необходимости покупать и устанавливать. Например: плагины для WordPress

WordPress – самая популярная CMS. По разным оценкам на долю этого «движка» приходится около 40% всех сайтов мира, поэтому пагинацию сайтов на нем стоит рассмотреть отдельно. Для настройки пагинации вы можете использовать множество готовых модулей. 

Рассмотрим некоторые из них:

• WP-PageNavi. Популярный бесплатный плагин, позволяющий создавать причудливые ссылки для разбивки материала на страницы вместо стандартной разбивки WordPress;
• WP-Paginate. Простой и гибкий плагин, позволяющий сделать навигацию более удобной;
• Pagination by BestWebSoft. Простой плагин для автоматической нумерации страниц в блоге, архиве и пр. Вы можете выбрать позицию для размещения плагина (например, над содержимым или под содержимым), отображение стрелок («Далее» и «Назад»), числовой тип отображения пагинации («1», «2» и т.д.) и многое другое;
• Pagination Styler for WooCommerce. Плагин для пагинации для модуля WooCommerce (интернет-магазины на WordPress). С его помощью можно настроить нумерацию страниц по своему усмотрению без кода – например, изменять текст и цвет пагинации, адаптировать ее под внешний вид сайта и пр.;
• Alphabetic Pagination. Плагин для алфавитной пагинации страниц.

На что обратить внимание при настройке пагинации?

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

1) Размер ссылок
От размера ссылок (иначе говоря, кнопок – «Показать еще», «Далее», «Назад», «1», «2», «3» и т.д.) зависит то, насколько пользователю будет комфортно перемещаться между страницами. Особенно, когда это касается мобильной версии сайта – если использование мыши не вызывает никаких трудностей для клика на кнопку, то для нажатия пальцем пользователь будет вынужден постоянно увеличивать размер страницы. Не стоит делать ссылки слишком маленькими.

2) Размер страниц
Страницы не должны быть чересчур короткими или длинными – в среднем используется 20-100 элементов на одной странице. Например, интернет-магазины обычно выводят по 50-70 товаров на одной странице. Если страницы будут слишком короткими, пользователь устанет постоянно переходить между ними, если слишком длинными – страница будет загружаться очень долго.

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

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

4) Удобство использования
Учитывайте интересы всех пользователей – и тех, кто посещает сайт с компьютера, и тех, кто заходит о смартфона. В первом случае вы можете предусмотреть возможность перелистывания страниц с помощью команд на клавиатуре – например, открытие следующей страницы при нажатии клавиши «Стрелка вправо» или возврат к предыдущей при нажатии клавиши «Стрелка влево». Во втором случае учитывайте размер кнопок – пользователю должно быть удобно перемещаться между страницами, нажимая на них пальцем. 

Пример адреса пагинации

URL: https://otzyvmarketing.ru/smmyt/?page=2

В этом примере, с помощью параметра ?page=2 отображается вторая страница в пагинации для страницы 

Какие проблемы могут возникать для SEO при внедрении пагинации

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

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

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

Обычно поисковые системы распознают дубликаты через содержание страницы, title и description. 

Решение проблемы с индексацией и дублированием

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

Итак, способы решить проблемы с пагинацией:

1. Закрыть страницы пагинации от индексации

Это можно сделать с помощью:

• Удаления страницы пагинации из индекса с помощью noindex

Для этого используйте специальный тег:

<meta name=“robots” content= “noindex” />

Подробнее об этом можно почитать в Справке Яндекса. 

Тег нужно добавить на все страницы каталога за исключением первой. Он прописывается в разделе <head> вручную. С его помощью вы сможете гарантированно удалить страницу пагинации из индекса Google и Яндекс.

• Добавления в файл robots.txt соответствующих инструкций для запрета пагинации

Пример: Если страницы пагинации имеют вид 
https://sait.ru/category/?page=2, 
где нумерация в атрибуте page – соответствующая страница пагинации, то чтобы закрыть от индексации все страницы, в robots.txt, к инструкции для поисковых ботов, нужно добавить строчку:
Disallow: /category/?page=*

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

2. Использовать атрибут rel=”canonical”

Атрибут canonical (или канонические ссылки) – это некий указатель, который дает понять поисковикам, какие страницы являются первоисточником, а какие дубликатами. 

Подробнее об этом можно почитать тут:

Canonical можно поставить со ссылкой:

• на первую страницу

Если контент на сайте практически одинаковый, как это обычно бывает в маркетплейсах – атрибут rel=”canonical” ставят, чтобы поисковики его отличали. 

Пример: если страница пагинации имеет вид
https://www.site.ru/catalog/?page=N – нужно проставить каноникал, где N - нумерация страницы:  

<link rel="canonical" href="https://www.site.ru/catalog/"/>

Его плюсы: акцентируем внимание на первой странице пагинации, которая чаще всего и продвигается оптимизаторами.

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

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

•  на самих себя

Этот метод мы используем сами и рекомендуем вам. Для большинства сайтов это самый подходящий метод.

Пример: для страницы https://www.site.ru/catalog/?page=3 – нужен каноникал <link rel="canonical" href="https://www.site.ru/catalog/?page=3"/>

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

ЧИТАЙТЕ ТАКЖЕ

Как быстро собрать мета-теги сайта с помощью Google Docs

15.05.2020

Что еще важно учесть для SEO при настройке пагинации 

1. Rel=”prev”/”next”

С помощью этого метода вы можете разместить ссылки на предыдущую и следующую публикации (этот способ по умолчанию используется в WordPress). Для этого в раздел HEAD нужно добавить ссылки типа <link rel=”next” href=”http://mysite.ru/page2.html”>, где:

link rel=”next” – ссылка, ведущая на следующую страницу;
link rel=”prev” – ссылка, ведущая на предыдущую страницу;
href=”http://mysite.ru/page2.html ” – ссылка для перехода (вместо «http://mysite.ru/page2.html» подставляете свою ссылку).

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

Этот способ хорош, если у вас небольшой сайт. Он достаточно прост в исполнении и не требует внесения серьезных изменений в HTML-код страницы. Также вам не понадобится страница «Смотреть все». 

2. AJAX и прокрутка Javascript

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

• Автоматическая прогрузка
• Кнопка «Показать еще»

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

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

3. Уникализация title и description 

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

Пример уникализации тайтл:

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

Пример уникализации дескрипшн:

4. Уникальный текст на первой странице 

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

Вот типичный пример: это страница одного из сервисов на сайте otzyvmarketing 

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

Вывод

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

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

Если вы хотите структурировать материал и упростить навигацию на сайте с книгами, рецептами и пр. – используйте алфавитную пагинацию. А интернет-магазины чаще всего размещают на страницах с карточками товаров кнопку «Показать еще».

Вам понравилась статья? 1 0