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

Здравствуйте, мои дорогие SEO-знатоки!

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

Что такое пагинация и почему она важна?

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

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

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

Так что же лучше, пагинация или бесконечная прокрутка?

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

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

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

Во-первых, Googlebot не может имитировать поведение прокрутки. И, конечно, он не может нажать на кнопку «Загрузить еще». В результате поисковые системы не могут эффективно оценить и проиндексировать весь контент на странице.

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

Рекомендации Google по использованию пагинации

На официальной странице Google, посвященной пагинации контента, даны следующие рекомендации:

Последовательность ссылок на страницы

Чтобы упростить жизнь поисковым системам, на каждой странице размещайте ссылку на следующую страницу с помощью тега <a href>. И не забудьте разместить ссылку на первую страницу в пагинации на каждой странице, чтобы робот отдал предпочтение вашему целевому результату при отображении в SERP.

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

Как создать правильный URL

• Уникальный URL: используйте параметр ?page=n, чтобы отобразить номер текущей страницы в URL.
• Не ссылайтесь на первую страницу как на каноническую: используйте канонические теги с отдельными ссылками для каждой страницы вместо канонических ссылок на первую страницу категории. Для страницы news.com/world?page=2 каноническая ссылка будет выглядеть следующим образом:
  <link rel="canonical" href="news.com/world?page=2" />
• Структура данных: используйте микроразметку, чтобы указать поисковой системе, что на вашем сайте используется пагинация.

Вот пример разметки пагинации schema.org:

<div itemscope itemtype="http://schema.org/Series">
  <span itemprop="name">Название серии статей</span>
  <link itemprop="url" href="https://example.com/article-series">
  <link itemprop="image" href="https://example.com/article-series-thumbnail.jpg">
  
  <div itemprop="hasPart" itemscope itemtype="http://schema.org/WebPage">
    <a itemprop="url" href="https://example.com/article-series/page/1">
      <span itemprop="name">Название серии статей - Страница 1</span>
    </a>
    <meta itemprop="position" content="1">
  </div>

  <div itemprop="hasPart" itemscope itemtype="http://schema.org/WebPage">
    <a itemprop="url" href="https://example.com/article-series/page/2">
      <span itemprop="name">Название серии статей - Страница 2</span>
    </a>
    <meta itemprop="position" content="2">
  </div>

  <meta itemprop="numberOfPages" content="5">
  <meta itemprop="pageStart" content="1">
  <meta itemprop="pageEnd" content="5">
  <meta itemprop="currentPage" content="1">
</div>

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

• Старайтесь не дублировать текст. Вводный текст лучше размещать только на первой странице.
• Не используйте идентификаторы фрагментов URL (после #) — Google их игнорирует.
• Не используйте устаревшие теги rel="next" и rel="prev" — они больше не учитываются Google, хотя все еще полезны для других систем.
• Используйте микроразметку и уникальные URL-адреса вместо канонических ссылок на первую страницу.
• Добавьте поддержку preload, preconnect и prefetch — это улучшит скорость переходов при пагинации.

Если вы хотите, чтобы все было сделано за вас — добро пожаловать к нам на аутсорсинг!

Визуальные типы пагинации

• «Следующая / Предыдущая»
• «Нумерация страниц»
• Комбинированный тип

Как выбрать тип пагинации

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

Реализация пагинации для Load more и Infinite scroll

Если вы решили использовать динамическую пагинацию (Load more или Infinite scroll), важно знать: такие методы часто реализуются с помощью технологии AJAX. Это значит, что поисковая система может не проиндексировать весь контент, поскольку он загружается только при взаимодействии пользователя.

Пример кода на JavaScript для бесконечной прокрутки:

window.onscroll = function(ev) {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    // вы находитесь в нижней части страницы, загрузите больше контента здесь.
  }
};
// из stackoverflow:
// stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom

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

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

Примеры URL:

• Отлично: news.com/world&page=1
• Отлично: news.com/world?lastid=123
• Удовлетворительно: news.com/world#1 (Google не использует фрагменты URL)

Используйте методы history.replaceState и history.pushState:

• Для отслеживания активных действий (клик, прокрутка)
• Для возврата пользователя к нужному месту на странице

Важно: убедитесь, что контент доступен без AJAX и присутствует в исходном HTML-коде. Проверить это можно через Google Search Console.

• Если у вас интернет-магазин — подключите sitemap или фид Google Merchant Center
• Активируйте ленивую загрузку изображений и блоков, чтобы улучшить производительность

Распространенные ошибки при внедрении пагинации

Дополнительные советы и заключение

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

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

Заключение

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

• Используйте для пагинации удобные href-ссылки, которые доступны краулерам.
• Обеспечьте внутреннюю перелинковку на страницы более глубокого уровня.
• Оптимизируйте только первую страницу в последовательности. Удалите SEO-контент из URL-адресов пагинации и включите номер страницы в заголовок.
• Контент должен быть доступен без JavaScript. Проверьте это через Google Search Console.
• Обязательно проверьте доступность URL-адресов ваших страниц в Google Search Console.

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