Как использовать нумерацию страниц и бесконечную прокрутку на страницах вашей категории

1. Должен ли я использовать стандартную нумерацию страниц на страницах категорий моего сайта или использовать...
2. Структура URL
3. Использование атрибутов пагинации rel = ”next” и rel = ”prev”
4. Реализация
5. Бесконечная прокрутка с помощью pushState к API истории HTML5
6. Что такое pushState?
7. Использование pushState для удобства пользователя с бесконечной прокруткой
8. Задача SEO
9. Полезные ресурсы и дальнейшее чтение

Должен ли я использовать стандартную нумерацию страниц на страницах категорий моего сайта или использовать бесконечную прокрутку?

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

Разбиение на страницы или нумерация страниц на страницах категорий является одним из таких соглашений. Они используются на всех крупных сайтах. Подумайте, страницы результатов поиска Google, страницы категорий покупок Amazon и так далее.

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

Они используются на всех крупных сайтах. Подумайте, страницы результатов поиска Google, страницы категорий покупок Amazon и так далее.

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

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

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

Некоторые веб-сайты пропускают нумерацию страниц, предпочитая бесконечный свиток на основе Javascript. Возьмите этот пример с Omega Watches и внимательно следите за адресной строкой для получения обновлений.

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

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

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

пагинация

Здесь у нас есть Встроенный невидимый клиент в торговом пространстве:

Вы можете видеть пронумерованную последовательность ссылок, всего 3 страницы.

Структура URL

URL-адреса увеличиваются в числовом порядке следующим образом:

Страница 1: / категория продукта / спортивная одежда / спортивные перчатки /
Страница 2: / Категория продукта / Спортивная одежда / Спортивные перчатки / Страница / 2 /
Страница 3: / Категория продукта / Спортивная одежда / Спортивные перчатки / Страница / 3 /

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

Использование атрибутов пагинации rel = ”next” и rel = ”prev”

Атрибуты ссылок rel = "next" и rel = "prev" являются относительно недавними разработками в SEO ( введено в 2011 году ). Они используются для указания взаимосвязи между URL-адресами компонентов в разбивке на страницы.

Атрибуты размещаются в разделе head вашей постраничной серии и выглядят так:

<link rel = "prev" href = "https://www.example.com/product-category/racewear/racing-gloves/" />
<link rel = "next" href = "https://www.example.com/product-category/racewear/racing-gloves/page/3/" />

В приведенном выше примере вы сейчас находитесь на / page / 2 /.

Реализация

Реализация очень проста. В разбивке по страницам всегда указывайте предыдущее / следующее отношение. Используйте rel = ”canonical”, чтобы объявить текущую страницу.

<link rel = "prev" href = "https://www.example.com/product-category/racewear/racing-gloves/" />
<link rel = "next" href = "https://www.example.com/product-category/racewear/racing-gloves/page/3/" />
<link rel = "canonical" href = "https://www.example.com/product-category/racewear/racing-gloves/page/2/" />

При реализации разбивки на страницы, используя rel = ”next” и rel = ”prev”, следуйте этим рекомендациям.

1. Всегда используйте самоссылающийся канонический тег на текущей странице
2. Не используйте noindex или блокировать страницы в последовательности с robots.txt
3. Не нарушайте последовательность, иначе ваши постраничные атрибуты могут быть проигнорированы.
4. Не используйте nofollow, избегать отслеживания параметров и перенаправляет в вашей последовательности URL.
5. Не используйте пустые атрибуты rel = ”prev” или rel = ”next” на первой и последней страницах серии.
6. Используйте абсолютные, а не относительные пути URL.

Бесконечная прокрутка с помощью pushState к API истории HTML5

Inifinite scroll - это скорее дополнение к нумерации страниц, а не альтернатива. Это связано с тем, что для SEO вам понадобятся постраничные ссылки, видимые в исходном коде HTML для браузеров, не поддерживающих JS.

Этого должно хватить поисковым системам для сканирования ваших страниц.

Что такое pushState?

PushState является частью HTML 5 History API - набор инструментов для управления состоянием в браузере. Таким образом, адресная строка обновляется в соответствии с указанным URL-адресом без повторной загрузки страницы. Есть много библиотек доступны, которые делают все это для вас.

Использование pushState для удобства пользователя с бесконечной прокруткой

Когда пользователь прокручивает страницу вниз, видимый URL-адрес изменяется, и новое содержимое загружается с использованием метода Ajax. Именно потому, что загружается новое содержимое (бесконечная прокрутка), идеальным способом обработки адресной строки является обновление видимого URL.

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

Задача SEO

Когда вы работаете с сайтами, которые тяжело JavaScript (с Javascript SEO для Angular / React и т. Д. это мой самый крайний пример) легко забыть, что поисковые системы все еще зависят от не-JS-версии вашего кода.

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

Конечно, ваше решение - помнить о не-JS опыте, которому вы служите.

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

К сожалению, наш пример с Omega Watches не совсем подходит для SEO. В отключенном режиме JS (я использую Отключить JavaScript расширение для Firefox), продукты и постраничные ссылки запутаны.

Ссылки в коде, однако, так что это очень просто исправить:

Хотя rel = ”next” и rel = ”prev” отсутствуют в их нумерации страниц. Простой запрос Google показывает, что здесь есть проблема с дублированным контентом. По крайней мере индексируемые страницы индексируются:

Здесь очень мало нужно сделать, чтобы улучшить SEO этих страниц. Воздействие, которое оказывают rel = ”next” и rel = ”prev”, действительно удивительно, правильные запросы Google предоставляют не больше, чем просто первая страница категории в проиндексированной серии, без использования чего-либо вроде noindex. Очень мощный действительно.

Полезные ресурсы и дальнейшее чтение

Нумерация страниц с rel = «next» и rel = «prev»

Бесконечная прокрутка, удобные для поиска рекомендации

Сложности бесконечного скроллера

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history - Управление историей браузера

https://blog.twitter.com/2012/implementing-pushstate-for-twittercom - Реализация pushState для twitter.com

http://tumbledry.org/2011/05/12/screw_hashbangs_building - Винт Hashbangs: создание окончательного бесконечного свитка

Похожие

Комментарии