Как правильно сделать пагинацию и не сломать при этом SEO

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

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

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

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

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

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

Оба варианта воспринимаются поисковыми системами, как одна страница.

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

Во-первых, Googlebot не может эмулировать поведение прокрутки. Ну и само собой он не может кликнуть на кнопку “Load more”. В результате поисковые системы не смогут эффективно оценить и проиндексировать все содержимое страницы.

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

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

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

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

Для справки. Информация от Google:

● Уникальный URL.
Используйте параметр, ?page=n, чтобы отобразить в URL номер текущей страницы;

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

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

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

● Старайтесь не дублировать текст. Если при пагинации у вас есть какой-то вводный текст в категории, лучше разместить его на первой странице.

● Не используйте идентификаторы фрагментов URL (текст, следующий за символом # в URL) для номеров страниц. Google не обращает внимания на идентификаторы фрагментов. А Googlebot может просто не перейти по ссылке, так как посчитает, что уже получил эту страницу, если обнаружит URL-адрес страницы, на которую ведет ссылка, отличающийся только текстом после #.

● Теги Rel=”next” и rel=”prev”. Официальное заявление Google - больше не обязательно использовать теги: <link rel="next" href="..."> and <link rel="prev" href="...">, появившиеся аж в 2011 году. Достаточно использовать микроразметку (структурированные данные).

Если вы хотите сделать переход на следующую страницу более быстрым для пользователя, используйте методы preload, preconnect, или prefetch. Данные теги повышают производительность вашего сайта. Теги кешируют стили, контент и шрифты заранее, поэтому пользователь, используя пагинацию не испытывает проблем с загрузкой следующих страниц.

Почитать подробнее — по этой ссылке.

Существует два визуальных вида пагинации "Next/Previous" и “Нумерация страниц” + Комбинированный тип (из первых двух).

● Если на вашем ресурсе не больший объем контента с несколькими страницами, то смело используйте "Next/Previous".

● А вот при большем объеме контента, например, новостной сайт, где контент постоянно добавляется, используйте “нумерацию страниц”, либо комбинируйте нумерацию с "Next/Previous".

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

Кстати вот так выглядит JS функция бесконечной прокрутки в виде кода:

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

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

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

Отлично: news.com/world&page=1

Отлично: news.com/world?lastid=123

Удовлетворительно: news.com/world#1

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

И последний момент – используйте replaceState и pushState. Можете использовать только что-то одно или сразу оба метода в зависимости от поведения пользователей вашего сайта, например:

● Когда поведение пользователя напоминает щелчек мышкой или активное перелистывание;

● Чтобы предоставить пользователю вернуться к ранее проскроленному контенту.

Полный список рекомендация от Google найдете по этой ссылке

● Убедитесь, что весь контент вашего сайта видно без использования AJAX, то есть весь контент есть в html коде. Проверить это можно в Google Search Console;
● Если у вас e-commerce обязательно используйте sitemap или фид Google Merchant Center, чтобы краулеры проиндексировали все товары на вашем сайте;
● Активируйте “ленивую” загрузку контента на странице, чтобы ускорить работу вашего сайта.

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

2. Не стоит делать пагинацию через статический URL. Используйте в URL динамические параметры, чтобы увеличить шансы и скорость индексации страницы.

3. Ошибка 404. Обязательно проверьте, что те страницы, которые не включены в текущую категорию, выдают 404 ошибку.

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

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

● Убедитесь, что оптимизирована только первая страница в последовательности, удалите из URL пагинации любое "SEO-содержимое", и вставьте номер страницы в теги заголовков;

● Помните, что поисковые боты Google не умеют листать и кликать, поэтому весь ваш контент должен быть доступен и без работы JavaScript. Проверить доступность контента можно с помощью

● Доступность URL страниц обязательно проверить через URL Inspection Tool в Google Search Console.

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