SEO-дружественные стратегии пагинации для электронной коммерции
Пагинация может стать сложной SEO-проблемой, если сделать ее неправильно. Это особенно актуально для сайта электронной коммерции с большим количеством товаров, который, несомненно, будет сильно зависеть от пагинации, чтобы пользователи могли найти то, что ищут.
Вы можете применить концепции, объясненные в этой статье, к любым реализациям пагинации в любом месте, но поскольку проблемы с пагинацией, как правило, более распространены на сайтах электронной коммерции , и у меня большой опыт работы с ними, я сосредоточусь на этой области.
Мы начнем с:
Шаги, которые необходимо предпринять, чтобы пагинация электронной коммерции была дружественной к поиску
- 1. Будьте осторожны с JavaScript
- 2. Подумайте дважды о кнопках «Загрузить еще»
- 3. Используйте страницу «Показать все», чтобы выровнять структуру вашей электронной коммерции
- 4. Используйте самоссылающиеся канонические теги
- 5. Используйте noindex, только если это действительно необходимо
- 5. При необходимости деоптимизируйте пагинированные страницы
- 6. Обеспечьте четкую структуру URL
Что такое пагинация?
Пагинация в контексте веб-сайта — это последовательность архивных страниц, которые используются для перехода на другие страницы, находящиеся ниже в иерархии/структуре сайта. Наиболее распространенные примеры таких страниц встречаются на страницах категорий электронной коммерции или страницах архива блога.
Пагинация — это важнейшая концепция, которую необходимо понимать, когда речь идет об улучшении структуры и внутренней перелинковки вашего сайта, концепция, о которой я недавно писал в своем блоге.
Как выглядит пагинация на сайтах электронной коммерции?
Если вы не совсем уверены, как выглядит пагинация, вы определенно видели ее раньше!
Две наиболее распространенные реализации пагинации представлены в виде кнопок «Загрузить еще» и нумерованной последовательности в нижней части страницы.
Оба варианта работают, но использование кнопки «Загрузить еще» имеет некоторые дополнительные соображения, о которых я расскажу позже в этой статье.
Примеры кнопок пагинации «Загрузить еще»:
Superdry
Asos
Примеры пагинации с нумерованной последовательностью:
AO (Appliances Online)
Argos
Бесконечная прокрутка также является вариантом для навигации по архивам. Однако это становится все менее популярным, так как исследования показали, что это имеет некоторые негативные последствия для UX, такие как невозможность легко добраться до нижнего колонтитула страницы.
Почему мне стоит сосредоточиться на пагинации?
Неоптимальные реализации пагинации вызывают некоторые серьезные проблемы, особенно на веб-сайтах электронной коммерции. Я лично видел, как проблемы с пагинацией вызывают множество проблем, включая:
- Страницы товаров, которые остаются «сиротами» (на них нет внутренних ссылок).
- Излишне глубокие структуры сайта.
- Сокращение сканирования пагинированных последовательностей.
В этой статье я рассмотрю некоторые ключевые вещи, которые вам нужно понимать о пагинации, чтобы убедиться, что ваш сайт электронной коммерции реализует ее дружественным к поиску способом.
1. Будьте осторожны с JavaScript
Использование JavaScript для загрузки следующей страницы в вашей пагинированной последовательности на стороне клиента без полной перезагрузки страницы — отличный способ обеспечить приятный опыт для ваших пользователей электронной коммерции.
Я большой сторонник использования AJAX, и я рекомендую вам рассмотреть возможность его использования для пагинации на вашем сайте. Однако вы должны быть чрезвычайно осторожны с тем, как вы это реализуете.
Пагинация на основе AJAX очень распространена на сайтах электронной коммерции, и, к сожалению, также очень распространено, что она реализуется недружественным к SEO способом. Когда дело доходит до реализации пагинации через AJAX, главным критерием является обеспечение того, чтобы ссылки href на следующую страницу в последовательности все еще существовали.
Это означает, что в вашем архиве товаров ссылки на последующие страницы, такие как example.co.uk/shop/shoes/?page=2, должны по-прежнему быть видны в исходном HTML-коде страницы или, по крайней мере, внутри DOM , созданного браузером.
Как мне увидеть, что находится в DOM?
Лучший способ увидеть, что браузер построил в DOM, — это открыть инструменты разработчика (обычно нажатием F12), а затем перейти в раздел «Элементы» в Chrome.
То, что отображается здесь, будет отличаться от того, что вы видите при просмотре исходного кода, так как это показывает то, что браузер фактически отрендерил, включая любой выполненный JavaScript.
Ссылка есть в DOM, но не в исходном HTML-коде
Имейте в виду, что Google может не всегда видеть эти ссылки в зависимости от того, как быстро рендерится страница. Если вы хотите это проверить, я рекомендую ознакомиться с инструментом проверки URL.
в Google Search Console.
Если вы не можете увидеть эти ссылки ни там, ни там, это потому, что вы, скорее всего, загружаете вторую и последующие страницы архива с помощью JavaScript, не предоставляя альтернативу без JavaScript, т.е. классические ссылки href. Если ваша пагинация работает таким образом, Google не сможет увидеть следующую страницу в архиве
. Это происходит потому, что Googlebot и другие поисковые боты не будут нажимать на элементы, которые выполняют JavaScript так же, как это делает пользователь. Поэтому, хотя пользователи могут получить приятную навигацию на основе AJAX для вашей пагинации, Googlebot все равно должен иметь возможность переходить на 2-ю и последующие страницы, при этом каждая страница в последовательности .
содержит уникальный список товаров без дублирования . Примером сайта, который делает это правильно, является Argos. На их страницах категорий (как эта одна
), когда вы проверяете элементы их пагинации, вы можете увидеть ссылки href на каждую страницу в последовательности.
БУДЬТЕ ОСТОРОЖНЫ
Эти ссылки в идеале должны быть доступны в исходном HTML-коде, а не просто видны при проверке элемента. Если они видны только при проверке элемента, и вы не можете увидеть их в исходном HTML-коде, вы будете внедрять их с помощью JavaScript, что может снизить вероятность того, что Google увидит ссылки. На сайте Argos вы можете увидеть, что при нажатии на кнопку, ведущую на 2-ю страницу, новая загрузка страницы не инициируется; вместо этого вас возвращают в начало страницы, и все товары на 2-й странице загружаются. Это поведение, которое увидят пользователи, в то время как Google перейдет по ссылке и будет перенаправлен на .
эту страницу . Вы можете понять, что это сделано через AJAX, либо используя плагин, который отслеживает запросы заголовков HTTP документа, как этот
, либо просто открыв вкладку сети в инструментах разработчика Chrome и проверив запросы «документ» при переходе на другую страницу с использованием пагинации. Это отличный пример правильной реализации пагинации на основе AJAX.
Они даже используют HTML5 history API , чтобы обновлять URL, поэтому кажется, что произошла полная перезагрузка страницы.
Хотя это не является строгим требованием, я бы также рекомендовал реализовать это с помощью системы пагинации на основе AJAX. Вы можете увидеть пример использования API истории на практике, созданный Джоном Мюллером с комбинированной последовательностью бесконечной прокрутки / нумерованной пагинации здесь.
Если это кажется слишком сложным, существуют библиотеки, которые облегчат этот процесс, например, эта.
2. Подумайте дважды о кнопках “Загрузить еще”
Если вместо нумерованной пагинации или бесконечной прокрутки вы собираетесь использовать подход с кнопкой “Загрузить еще”, вам также необходимо учесть некоторые дополнительные моменты.
Следуя предыдущему совету, даже если вы добавили ссылку href на кнопку “Загрузить еще”, вы все равно делаете свой сайт излишне глубоким.
Это связано с тем, что в отличие от нумерованной пагинации, которая позволяет добавлять глубокие ссылки со страницы 1 до 6 (например), вы будете ссылаться только со страницы 1 на страницу 2, затем со страницы 2 на страницу 3 и так далее.
Это приведет к тому, что у вас будет глубокая структура сайта , так как глубина клика для достижения страниц продуктов, расположенных глубже на сайте, увеличивается.
Это окажет негативное влияние на то, как ссылочный вес распределяется по страницам продуктов, находящимся глубже в иерархии сайта. Это, в свою очередь, негативно повлияет на то, насколько хорошо ваши страницы продуктов могут ранжироваться по низкочастотным поисковым запросам.
Чтобы обойти это, вы можете реализовать как кнопку “Загрузить еще”, так и нумерованную пагинацию. Тогда вы получите преимущества UX от кнопки “Загрузить еще”, но также позволите пользователям переходить на конкретную страницу и позволите Google делать то же самое.
Пример комбинации кнопки “Загрузить еще” и нумерованной пагинации.
Эта опция предотвращает проблемы, вызванные кнопками “Загрузить еще” в отношении структуры сайта, и позволяет вам воспользоваться преимуществами нумерованной пагинации.
Нумерованная пагинация сокращает глубину клика до пагинированных страниц, расположенных глубже в вашем архиве.
Еще одна альтернатива — реализовать нумерованную пагинацию, но обернуть ее в тег <noscript>.
Это означает, что когда у пользователя отключен JavaScript, он увидит нумерованную пагинацию и сможет перемещаться по сайту с ее помощью. Недостатком этого варианта является то, что нет 100% уверенности в том, что Google действительно будет просматривать контент внутри тега noscript.
Согласно последним обновлениям, о которых мы слышали, Google склонен игнорировать контент внутри noscript, поэтому тестируйте это тщательно.
Если вы не хотите отображать одновременно кнопку “Загрузить еще” и нумерованную пагинацию, вы также можете реализовать нумерованную пагинацию на странице, как в макете выше, но добавить display:none, чтобы скрыть ее с помощью CSS.
Таким образом, ссылки находятся в HTML-коде, но скрыты во фронтенде, поэтому Google должен по-прежнему видеть ссылки и сканировать их как обычно. Однако мы узнали из патента Reasonable Surfer , что Google, по-видимому, любит распределять PageRank на основе вероятности клика по ссылке.
Система генерирует модель на основе данных о характеристиках, относящихся к различным особенностям ссылки из ссылающегося документа на связанный документ, и данных о поведении пользователя, относящихся к навигационным действиям, связанным со ссылкой. Система также присваивает ранг документу на основе модели.
Хотя в патенте прямо не говорится о скрытых ссылках, если вы собираетесь скрывать ссылки с помощью CSS, действуйте с осторожностью и подумайте о тестировании влияния как на сканирование, так и на ранжирование.
3. Используйте страницу “Показать все”, чтобы сделать структуру вашего интернет-магазина плоской
Один из способов обойти все сложности с пагинацией — просто сделать так, чтобы страницы категорий по умолчанию отображали все товары.
Если у вас уже есть существующие пагинированные URL-адреса, вы можете обновить канонические теги на них, чтобы они указывали на URL вашей новой страницы “Показать все”.
Это дает преимущество сделать структуру вашего сайта плоской , так как количество кликов для перехода к товарам сокращается. Хотя этот подход отлично подходит для UX и SEO, единственная сложность — это скорость сайта.
Если у вас большое количество товаров в этой категории, вы можете значительно увеличить:
- HTML, который браузер должен отрендерить.
- Количество изображений для загрузки.
- Размер вызова базы данных.
Хотя часть этого можно обойти с помощью ленивой загрузки изображений и кэширования страниц/статической доставки вашего сайта и загрузки динамических элементов с помощью JS. Вам все равно нужно провести некоторые тесты и внимательно следить за тем, чтобы производительность была хорошей.
Как я могу протестировать влияние на скорость?
- Если вы ищете советы по тестированию скорости сайта, ознакомьтесь с моей публикацией о некоторых из лучших инструментов для проверки скорости сайта.
- Если вы хотите измерить влияние этого изменения на пользователей, взгляните на мой шаблон data studio, который использует данные CrUX , чтобы показать реальные данные пользователей о скорости вашего сайта.
- Если вы ищете советы по улучшению скорости, ознакомьтесь с моим руководством на Semrush здесь или поищите советы высокого уровня в моем фильтруемом списке советов по скорости сайта.
Если вы обнаружите, что подход “показать все” не работает из-за проблем со скоростью, определите, сколько товаров вы включаете на страницу архива категории, прежде чем скорость станет проблемой.
Вы можете проверить это, постепенно увеличивая количество видимых товаров.
Этот метод — отличный способ для сайтов электронной коммерции улучшить внутреннюю перелинковку , потому что, когда вы увеличиваете количество товаров на одной странице архива с 12 до 24, вы эффективно сокращаете вдвое количество пагинированных страниц в последовательности.
Хотя это не делает структуру вашего сайта такой плоской, как страница “показать все”, вам все же удалось сократить глубину клика до страниц товаров.
Увеличьте скорость загрузки, трафик и конверсию вашего магазина с помощью коллекции “Increase Page Speed” в Ecommerce Booster, приложении, которое проводит аудит магазинов Shopify и предоставляет готовый к реализации план оптимизации страниц товаров.
4. Используйте самоссылающиеся канонические теги
Я не буду вдаваться в подробности здесь, но распространенная ошибка при настройке пагинации — это либо:
- Канонизировать все страницы в последовательности на первую страницу.
- Закрыть всю пагинацию от индексации (подробнее об этом позже).
Вместо того чтобы совершать эти ошибки, при стандартной настройке пагинации вам следует добавить самоссылающийся канонический тег на каждой странице, как показано ниже. Распространенная ошибка, которую я вижу при пагинации, заключается в том, что иногда CMS может также создавать страницу /dresses/1/, которая является дубликатом /dresses/. На крупных сайтах с большим количеством архивов это может вызвать масштабные проблемы с дублированием.
es
Если это так, вам следует канонизировать дублирующуюся URL /1/ на правильную первую страницу архива (в этом примере /dresses/).
5. Используйте Noindex только если это действительно необходимо
Частая проблема на пагинированных страницах заключается в том, что они содержат тег noindex без необходимости.
Хотя добавление тега noindex на страницы пагинации не всегда является ошибкой, это может снизить частоту сканирования.
По сути, мы будем пытаться сканировать еще несколько раз, чтобы увидеть, исчез ли noindex или страница восстановилась после ошибки 500 или чего-то еще, и если noindex все еще там, то мы медленно начнем перемещаться или не сканировать эту страницу так часто.
В идеале каждая страница должна быть ценной в рамках последовательности, и вы должны включать самоссылающиеся канонические теги на каждой из них в архиве в результате.
Однако существуют сценарии, когда тег noindex на пагинированных страницах имеет смысл. Мы недавно услышали эту мысль от John Mueller о добавлении тега noindex на пагинированные страницы:
… в конце концов, я думаю, все сводится к: «приносит ли эта страница в пагинированной серии радость?» и если нет, то просто поставьте noindex.
Некоторые сайты считают, что все страницы в пагинированной серии важны, поэтому они оставляют их проиндексированными (те продвинутые, которые используют rel-next/prev). Некоторые сайты ограничивают пагинированные серии определенным числом, возможно, позволяя индексироваться первой, а остальным нет.
Решение иногда также основывается на контенте пагинированной серии. Например, если это список связанных детальных страниц, то вы можете решить в зависимости от того, можете ли вы добраться до всех страниц, даже если у вас не проиндексирован весь пагинированный набор (если вы перекрестно ссылаетесь на связанные посты/продукты, то обычно это так).
Итак, подытожим:
- Старайтесь делать пагинированные страницы максимально ценными.
- Если вы считаете, что они не ценны для пользователей, поставьте noindex, но помните, что это может снизить частоту их сканирования.
- Если вы решите поставить noindex, подумайте, есть ли альтернативные пути сканирования, чтобы найти эти продукты, перечисленные на странице с noindex, например, через другие категории или фильтры.
- В большинстве случаев вы захотите использовать самоссылающиеся канонические теги, а не тег noindex.
Распространенная причина, по которой люди склонны ставить noindex на страницу 2 и далее в архиве, заключается в том, что они видели, как Google показывает пользователям неправильную страницу, например, страницу 4 вместо первой. Это подводит нас к совету 5.
5. Деоптимизируйте пагинированные страницы, если это необходимо
Если вы не хотите, чтобы Google показывал страницу 2 и далее ваших категорийных архивов, но хотите оставить их проиндексированными, вы можете попробовать деоптимизировать их для поисковых запросов.
Здесь есть несколько вещей, которые вы можете сделать.
Во-первых, вы можете попробовать деоптимизировать тег title, добавив номер страницы в его начало:
Еще одна вещь, которую вы можете сделать, — это удалить контент над/под сеткой продуктов, начиная со страницы 2. Сделав страницу 1 самой ценной страницей в последовательности, Google с большей вероятностью покажет ее в результатах поиска.
Наряду с изменениями тега title и контента, вы также можете деоптимизировать тег H1 на странице аналогично примеру с тегом title выше.
6. Обеспечьте четкую структуру URL
Вы можете увидеть это на практике в фрагменте SERP выше, example.com/furniture/scandi/page2, но одна вещь, которую вы можете сделать, чтобы Google было немного легче понять архив категорий на вашем сайте, — это использовать чистую и легко читаемую структуру URL в последовательности.
На практике это можно сделать, просто добавив /page/2/ в конец URL вашей категории. Вы также можете использовать параметры, такие как ?page=2, а затем указать, что параметр страницы пагинирует в Google Search Console инструмент параметров URL.
С тех пор как Google прекратил поддержку prev/next, стало определенно важнее сделать так, чтобы было легко понять, когда URL пагинирован.