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

Пагинация страниц сайта — что это и как ее сделать

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

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

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

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

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

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

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

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

Примеры разных видов пагинаций Примеры разных видов пагинаций

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

Можно даже запомнить «ага, я нашел то, что мне лучше всего подошло, на пятой странице Google». Яндекс работает полностью аналогично, у него тоже есть пагинация результатов.

Для чего нужна пагинация

Самый очевидный ответ: для удобства посетителей, чтобы им не пришлось пролистывать «бесконечную ленту» и ориентироваться в слишком большом веб-ресурсе, когда нужно отыскать что-то конкретное. Однако есть и другие функции:

  1. Пагинация улучшает юзабилити, а следовательно, конверсию сайта — даже на лендингах и небольших страницах пользователь не хочет тратить много времени, желая перейти именно к тому, что ему необходимо. В большинстве A/B-тестах гораздо лучшие результаты показывали ресурсы, где была сделана пагинация.
  2. Улучшить скорость загрузки. Нет необходимости перекачивать на устройство посетителя больше, чем он сам того хочет. Конечно, для большинства владельцев компьютеров и стабильного «проводного» трафика вопрос неактуален, ведь трафик бесплатный, но вот уже на мобильных устройствах до сих пор все не так однозначно. «Безлимиты» есть далеко не у каждого, а значит, пользователь с большей охотой будет просматривать сайты, которые не перегружают трафик.
  3. Работа со слабыми машинами — это тоже встречается, начиная от простеньких ноутбуков типа «пишущая машинка» с 1-2 ГБ ОЗУ, заканчивая старыми мобильными телефонами. Такие устройство просто могут зависнуть, если на них сразу будет загружаться весь сайт, а не его часть. Логично, что пользователи со слабыми машинами, предпочтут те веб-ресурсы, которые не «вешают» им систему.
  4. SEO-адаптация. На самом деле, это одна из главных причин: все прочие подводят к этой. Роботы Google и Yandex оценивают все веб-ресурсы по ряду критериев, в том числе, по адаптивности и доступности для пользователей с ограниченным трафиком, со слабыми машинами и т.д.

Пагинация страниц в ЯндексеПагинация страниц в Яндексе

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

Какая бывает пагинация

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

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

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

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

Пример пагинации Пример пагинации с номерами страниц

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

Пагинация «Показать еще»

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

  1. Большой товарный сайт, на котором пользователь может провести много времени, потому что он точно не знает, что ему надо, а ищет по внешнему виду.
  2. Есть альтернативная пагинация — например, традиционные номера страниц.
  3. Можно вернуться наверх или в начало одним нажатием.

Пагинация Показать ещеПагинация «Показать еще»

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

Пагинация «бесконечный скролл»

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

  • информация подгружается постепенно, по мере прокрутки — регулировка нагрузки на трафик;
  • если пользователь открывает какую-то статью, ему показывают похожие, чтобы остался дольше;
  • для поисковых систем каждая статья находится отдельно и в отдельном «разделе».

Цель такой пагинации — имитация социальных сетей. Тот же Adme заставляет людей «зависнуть» на несколько часов, каждая новость создается специально, чтобы «зазывать» посетителей и не «отпускать». Это улучшает поведенческие факторы, но нужно понимать, что для чисто коммерческих проектов (интернет-магазинов) пагинация такого типа не подходит.

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

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

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

Смешанная пагинация

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

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

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

Поэтому желательно знать основные ошибки.

Одинаковые страницы (дубли)

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

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

Как исправить: существуют специальные сервисы — Netpeak Spider или менее известный Xenu, которые умеют проверять сайт на наличие повторяющихся страниц. Обе программы эффективно помогают справиться с ошибочными страницами.

Проверка дублей через сервис Netpeak SEO SpiderПроверка дублей через сервис Netpeak SEO Spider

Также можно воспользоваться сервисом Яндекс.Вебмастер, чтобы «выкинуть» из поиска те страницы, которым сервис ставит «неуд» и сообщает, что страница «недостаточно качественная». Потом можно будет их добавить, если информация обновится и будет соответствовать критериям качества.

Некачественные страницы в Яндекс. ВебмастереНедостаточно качественные страницы в Яндекс. Вебмастере

Слишком много позиций

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

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

Как исправить: в разделе Индексирования Яндекс.Вебмастера посмотреть, какие страницы находятся в поиске. Должно быть больше 90% в поиске, в противном случае необходимо редактировать пагинацию и вручную «указывать» поисковым системам на наличие товаров. Советуют сделать адрес страницы релевантным, например, не просто номер, а название: «iphon12max» или добавить специфические теги.

Универсальные способы для улучшения пагинации

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

  1. Использовать главную страницу как «каноничную». Она обычно хорошо проработана, указаны все мета-теги и другие параметры, важные для поисковых роботов, поэтому на страницы пагинации можно добавить такой параметр: rel=»canonical», что будет «отсылать» роботов к заглавной. Ранжирование основных страниц не будет ухудшаться, а все дубли и некачественные страницы роботы просто проигнорируют.
  2. Добавить этот же параметр (rel=»canonical») на страницу со всеми товарами. Считается, что для роботов Google это наилучший способ показать, что интернет-магазин действительно полезен пользователям, а значит, его надо показывать повыше в поиске по ключевым словам. Можно создать отдельную страницу в пагинации page-all, чтобы туда вписать этот параметр. Метод не подходит для крупных интернет-магазинов с большим количеством товаров.

Как работает тег canonicalКак работает тег rel=»canonical» со страницами пагинации

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

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

Дополнительные правила пагинации

Есть еще несколько советов для уникализации контента и улучшения SEO-параметров пагинации:

  1. Создавать отдельный title для каждой страницы пагинации.
  2. Создавать такой же уникальный description, даже если это просто «Страница такая-то».
  3. Тексты не должны повторяться, в идеале 100% уникальность.
  4. Если для страницы пагинации нет товаров (например, они закончились), то лучше автоматически перенаправить на 404.
  5. Собственный URL для каждого адреса пагинации.
  6. Пользователь должен иметь возможность перейти к листингу из любого места, будь то новость, раздел или карточка товара.
  7. Если пользователь хочет вернуться на предыдущую страницу, у него должна быть возможность получить то, что задавал раньше. Например: искал телефоны не дороже 15 тысяч, зашел в просмотр одной из моделей, она ему не понравилась. Пользователь вернулся на предыдущую поисковую страницу, пагинация показывает ему все варианты.
  8. Сортировка должна сохраняться согласно выбору пользователя (по моделям, по цене, по цвету и т.д.).
  9. Все страницы пагинации должны поддерживать выборку по параметрам.

Все эти характеристики не просто улучшают функционал, они также валидны для повышения сайта с «точки зрения» Google и Yandex.

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

Автоматизация пагинации

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

  1. Использовать поиск Ajax. Эта система характерна для шаблонов WordPress, многие разработчики внедряют ее по умолчанию, особенно если это заготовка для будущего интернет-магазина. Обычно Ajax-поиск интегрирован в систему WooCommerce.
  2. Использовать приемы JavaScript. Есть достаточно много хороших скриптов, которые автоматизируют создание страниц. Вебмастер получит возможность задавать описания, которые будут подставляться автоматически — title, description подгружаются по мере необходимости на каждую страницу пагинации.
  3. Подключить jQuery-библиотеку, которая предлагается бесплатно на официальном сайте.
  4. Использовать плагины и настроить их с помощью CSS-управления, скрипты могут быть предоставлены в CMS заранее либо их придется искать самостоятельно.

Заключение

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

Пагинация — как сделать на сайте?

Пагинация — как сделать на сайте?

Сайты, как правило, содержат в себе несколько страниц. На них может располагаться как 3-5 страниц, например на landing-page, а может быть и больше, намного больше.

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

Ещё один момент, кроме обычного JavaScript, в примере используется Bootstrap 4. Его компонент bootstrap pagination сочетается с библиотекой JQuery, а именно специальным плагином Buzina Pagination. Он позволяет разбивать всю информацию на несколько страниц с созданием навигации между ними.

Подключение необходимых фреймворков

Чтобы работать с Bootstrap и JQuery, их нужно подключить. Это можно сделать в вашем HTML документе, с помощью тегов <script>. Создаем 3 парных тега <script>;. В них подключим Ajax.js, bootstrap 4 и сам плагин JQuery.

Чтобы правильно подключить bootstrap нужно также использовать тег <link>, в его атрибуте href мы указываем ссылку на наш фреймоворк. В нем будет указываться ссылка на стили, которые содержит плагин.

Итак, мы подключили всё необходимое для работы. Осталось только подключить плагин для создания пагинации — Buzina Pagination. Для его создания мы также создаем теги <script> и <link>. В атрибутах "href" и "src" вводим одну и ту же ссылку.

Плагины Buzina Pagination и Bootstrap, помимо скриптов, содержат также и необходимые стили. Их мы и подключаем через тег <link>;. Теперь запомните — даже если вы неплохо разбираетесь в CSS, не рекомендуем вам заходить и менять настройки плагинов. Ради интереса, вы можете открыть их в кодовом редакторе и просмотреть, но не забудьте предварительно сохранить исходную версию кода.

В вашем HTML документе должен располагаться следующий код:

Создание пагинации на сайте

Разметка страниц. HTML

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

В нашем примере мы создаем всего 5 страниц. Создайте для каждой из них отдельный блок div. Внутри можете написать какой-нибудь текст, для визуального отображения. Если хотите, можете создать 10, 20 и 30 страниц.

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

Сделать пагинацию на сайте

Функции JQuery

Вам нужно подключить несколько функций:

  1. Создание списка данных с нумерацией каждого элемента в главном блоке:
  2. Далее нам нужно указать количество записей, которые будут располагаться на странице: Создание пагинации на сайте
  3. Следующую функцию можно не указывать, по вашему желанию. Она отвечает за то, будут ли отображаться кнопки next и prew: Создать пагинацию на сайте

Заключение

Готовая пагинация для сайта

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

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

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

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

Пагинация для SEO: как сделать пагинацию

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

Постраничная навигация нужна, чтобы:

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

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

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

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

Номера страниц

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

Постраничная навигация с номерами используется чаще всего

Здесь важно не забывать о правильном и понятном интерфейсе:

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

Пагинация Показать еще

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

Подгружайте достаточное количество товаров – от 30 до 50

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

Можно отказаться от кнопки и автоматически подгружать элементы при достижении пользователем определенного положения на странице.

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

Пример бесконечной прокрутки в Pinterest

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

Буквенная навигация

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

Буквенная пагинация на сайте интернет-магазина

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

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

Показать еще и постраничная нумерация часто используются вместе

Ошибки пагинации

Оптимизация страниц пагинации для интернет-магазинов и других сайтов крайне важна. Почему? Потому что неправильно настроенные страницы приводят к вероятности появления сразу 2х тяжелых «сео-грехов».

Дубликаты страниц/некачественный контент

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

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

Как проверить:

1. Просканировать сайт с помощью Netpeak Spider или Xenu, чтобы обнаружить дубликаты title и description, и изучить список проблемных страниц.

Окно проекта в Netpeak Spider

2. Зайти в панель Яндекс.Вебмастер — Индексирование — Страницы в поиске — Исключенные страницы и проверить те, которым присвоен статус Недостаточно качественная. Если там есть страницы пагинации, то скорее всего дело в дублировании заголовков.

Яндекс.Вебмастер: Исключенные страницы

Проблема индексации товаров

Краулинговый бюджет каждого сайта ограничен, потому что даже поисковики не обладают настолько мощными ресурсами, чтобы сканировать весь интернет каждый день. Вот пример трастового сайта с 44000+ страниц в индексе — средний показатель визитов ботов Google держится на уровне 12500. Если сайт меньше или на него никто не ссылается, то и посещений робота будет меньше.

Скрин графика сканирования из Google Search Console

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

Не рекомендуем полностью закрывать пагинацию от роботов — это только ухудшит ситуацию с индексацией товаров.

Как проверить:

Зайти в панель Яндекс. Вебмастер — Индексирование — Страницы в поиске — Все страницы и скачать список всех страниц из базы поиска Яндекса.

Яндекс.Вебмастер: Страницы в поиске

Отфильтровать строки в таблице по названию URL и проверить сколько карточек товаров попали в индекс. Если их меньше 90% от реально числа, то с индексацией есть существенные проблемы.

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

Итак, без пагинации не обойтись, это действительно важные страницы сайта. Но как настроить SEO пагинацию правильно?

Адреса страниц пагинации

Адреса могут быть как статическими, так и динамическими.

Пример статического URL:
https://www.site-shop.ru/catalog/page-2/

Пример динамического URL:
https://www.site-shop.ru/catalog?page=2

Формат URLа не имеет решающего значения, его выбор, как правило, зависит от особенностей CMS.

Первая страница — это всегда начальная страница каталога, поэтому https://www.site-shop.ru/catalog/ и https://www.site-shop.ru/catalog/page-1/ будут по сути одной и той же страницей, дубликатами. Важно проследить, чтобы нигде в блоке навигации не формировалось ссылки на первую страницу с параметром. В любом случае обязательно проставьте 301 редирект с https://www.site-shop.ru/catalog/page-1/ на https://www.site-shop.ru/catalog/.

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

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

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

Ничего не делать

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

Закрыть страницы пагинации

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

  1. размещением мета-тега <meta name=”robots” content=”noindex, follow” /> в секции страниц пагинации;
  2. добавлением соответствующей директивы в файл с инструкциями для роботов robots.txt.

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

Страницы с мета noindex не будут проиндексированы роботом

Здесь же стоит добавить и про второе значение атрибута content — follow/nofollow. Значение nofollow означает инструкцию для робота не выполнять переход по ссылкам на странице. Внутренние ссылки не стоит помечать nofollow в любом случае. Хорошо, если робот проигнорирует эти инструкции, но таким способом можно и прекратить сканирование, и нарушить передачу внутреннего веса другим страницам сайта.

Добавить на страницы пагинации rel=»canonical» со ссылкой на первую страницу

Несколько лет canonical-пагинация считалась оптимальной в Яндексе. Надо добавить тег с атрибутом rel=»canonical», указав первую страницу в качестве канонической. Например,

Яндекс утверждает, что его робот проходит по ссылкам на неканонических страницах

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

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

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

Добавить на страницы пагинации rel=»canonical» со ссылкой на страницу со всеми товарами

Алгоритмы Google считают single-page content (чем больше товаров на странице, тем лучше) оптимальным выбором. Соответственно, если уж мы делаем какую-то страницу канонической для пагинации, то это должна быть страница со всеми товарами.

Например, мы создаем страницу с параметром page-all и устанавливаем ссылку на нее типа Смотреть все на других страницах каталога. Также прописываем canonical для страниц пагинации, где канонический адрес это страница page-all.

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

Здесь есть сразу несколько подводных камней:

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

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

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

Добавить на страницы пагинации rel=»canonical» со ссылкой на самих себя

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

Этот подход распространен в англоязычном SEO

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

Использовать атрибуты next и prev

До марта 2019, когда ведущий аналитик и специалист по качеству поиска Google Джон Мюллер написал свой твит, эти теги также широко рекомендовались к использованию. Разметка prev-next указывает связь между страницами пагинации.

Для первой страницы мы указываем следующую за ней:

Для второй уже обозначаем и предыдущую страницу:

Для последней N-страницы указывается уже только предшествующая:

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

Но, как оказалось, Google уже несколько лет не использует эту разметку для сбора сигналов с группы страниц пагинации. И на поиске это никак не отразилось.

Так что если на вашем сайте есть эта разметка, то не надо ее удалять — она никак не влияет на ранжирование сайта и страниц пагинации. Кроме того, prev-next рекомендована W3C и используется другими поисковиками и браузерами.

SEO пагинация

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

Как настроить страницы пагинации, чтобы избежать данной проблемы:

Уникализируем title

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

Например, первая (основная) страница раздела:

Страница пагинации #2:

Короткий вариант более удобен и поместится на вкладке целиком.

Уникализируем description

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

Уникализировать содержимое мета-тега можно опять же с помощью переменной “Страница #”.

Например, первая (основная) страница раздела:

Страница пагинации #2:

Не допускаем повторов текста

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

Использование пагинации в продвижении

Еще одна возможность применить страницы пагинации в SEO — использовать их в качестве посадочных для запросов близких по смыслу, но «не садящихся» на одну страницу.

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

Пример пагинации: чек-лист

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

✔️ Каждая страница пагинации, начиная со второй, должна иметь собственный URL, динамический(/catalog/?page=2) или статический (/catalog/page2/). Выбор определяется оптимальностью технического решения.

✔️ Страницы пагинации, для которых не хватает товаров, например page=100000000, должны отдавать 404.

✔️ Первая страница в строке пагинации должна вести на основной урл, а не на page=1.

✔️ Страница пагинации #1 (/catalog/?page=1) должна возвращать код ответа сервера не 200, а 301 на основную страницу раздела (/catalog/).

✔️ Title каждой страницы пагинации отличается от title первой страницы и образуется по маске [Заголовок раздела — страница #], если не решено иное.

✔️ Description страниц пагинации формируется по маске с использованием переменных «Название раздела» и «Страница #».

✔️ Заголовок h1 на страницах пагинации не имеет критического значения. В зависимости от конкретной ситуации он может повторять заголовок на основной странице раздела или образовываться по маске «Страница # Название раздела».

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

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

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

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

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

Как сделать пагинацию на информационном сайте или в блоге с большим количеством статей.

Выберите готовый шаблон из более 1600+ бесплатных и премиум вариантов.

  • Основные
  • Мы в соц. сетях:
  • Продукты
  • Конструктор интернет магазинов
  • Поддержка
  • Тел.: +7 (965) 688-86-45

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *