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

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

Примеры и аргументы у всех свои, но суть, как правило, одна: больше страниц — лучше СЕО. Нет, не лучше. Почему я уже писал, но давайте рассмотрим подробнее постраничную навигацию на сайте . Какой должна быть порядковая нумерация страниц сайта, чтобы, как минимум, не навредить SEO. Почему не навредить? Потому что в задачи поисковой оптимизации сайта входит определение точного соответствия страницы ключевому запросу , а не создание бесконечного числа дублей одной и той же страницы с заголовком «Страница №911».

Польза пагинации для SEO

Давайте рассмотрим, какую невероятную пользу несет постраничная навигация для сайта в плане . Она обеспечивает доступ ко всем страницам сайта из списка страниц категории. Да, действительно. Особенно, когда у вас 50 страниц и чтобы добраться до, скажем, 21 страницы, поисковому роботу нужно углубиться на … сколько уровней? Найти на 21 странице товар или пост и углубиться еще на один уровень. Да, польза колоссальная, особенно если учесть, что поисковые боты не ходят глубже 3-4 уровней вложенности. Нет, ну конечно ходят, но ценность и сроки индексации с каждым уровнем падают в геометрической прогрессии.

Что еще полезного нам несет порядковая нумерация страниц сайта? Она ограничивает количество ссылок на странице, ибо негоже более 100 ссылкам на одном холсте собираться. Вот это действительно польза. Есть еще косвенная польза, в виде , так как постраничная навигация — один из самых популярных и привычных методов отображения больших списков информации на сайте. За то и держим. Вот вроде бы и все.

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

SEO постраничной навигации на сайте

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

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

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

Исключение пагинации из индексации

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

Исключение пагинации через Канонические ссылки

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

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

Исключение пагинации через Robots Disallow

Представим, что адрес номерной страницы выглядит так:

Http://site.ru/category/page/3

Всего-то надо попросить поисковых роботов не ходить куда не надо, а именно:

Disallow: /category/page

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

Исключение пагинации динамических страниц

Ежели пагинация на сайте организована средствами URL динамических:

Http://site.ru/category?page=3

Извольте воротиться в robots.txt прописать уже знакомые:

Disallow: ?page=

Clean-param: page /

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

Ставь лайк, делай репост, подписывайся на новые статьи, которые выходят каждый день.

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

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

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

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

1 Оптимальный размер страницы

Не делайте страницу слишком короткой. Сайт или приложение - это не печатная книга. Размер страницы печатной книги ограничен размером книги и листа, а размер страницы сайта ограничен лишь вычислительной мощностью устройства и терпением пользователя. Приемлемым вариантом является отображение 20-80 записей на страницу, но это лишь приблизительное число, а реальное число зависит от категории сайта. На некоторых сайтах это число равно 10, а где-то и 100, ведь главное в этом деле - обеспечить удобство использования.

2 Размер ссылок

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

3 Указание текущего положения

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

4 Ограничьте количество страниц и пространство вокруг элементов

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

5 Ссылки на предыдущую и следующую страницы

6 Ссылки на первую и последнюю страницы

Зачастую можно увидеть пагинацию, содержащую ссылки на первую и последнюю страницы. Они не такие популярные, но, тем не менее, они нужны пользователям, которые решили начать чтение с самых ранних записей (если новые размещены вверху на первой странице, как часто делают для новостей).

Эти ссылки визуально похожи на ссылки, ведущие на предыдущую и следующую страницы (например, двойная стрелка), что приводит к путанице - пользователи не уверены в том, какая ссылка за что отвечает. Добавление текста редко решает проблему.

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

7 Проверьте мобильную версию

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

8 Навигация с помощью клавиатуры

Дайте пользователям возможность использовать для навигации клавиатуру. Клавиша «Вправо» - следующая страница, клавиша «Влево» - предыдущая страница. Главное - предупредить пользователя о данной возможности. Для предупреждения хватит текста под пагинацией: «Используйте клавиши ← влево и вправо → для навигации по страницам».

Также хорошей практикой считается дать возможность пользователю переходить по ссылкам, используя клавишу «Tab». Когда ссылка выделена, нажатие на клавишу «Enter» должно инициировать переход на соответствующую страницу.

Номера страниц или «Далее/Назад»?

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

Вывод

Хорошая пагинация улучшает читабельность и уменьшает сложность.

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

И так, что же такое пагинация

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

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

Почему важно правильно настроить пагинацию на сайте?

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

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

Устаревшие способы оптимизации страниц пагинации:

1 Способ. Закрыть страницы пагинации в robots.txt

Такой способ является быстро реализуемым, поскольку не требует вмешательств в код самого сайта.
Закрыть страницы пагинации в файле robots.txt можно по маске директивой типа

Disallow: *page=

Конкретная директива зависит от способа реализации страниц пагинации на Вашего сайта.

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

2 Способ. Пагинация с тегом rel=«canonical» на первую страницу категории

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

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

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

Google включил настройку канонических ссылок на первую страницу категории в список самых распространенных ошибок при настройке rel=canonical.

Оптимальные методы оптимизации страниц пагинации:

3 Способ. Пагинация с тегом rel=«canonical» на страницу «Смотреть Все»

Таким способом настройки пагинации рекомендует пользоваться поисковая система «Google» .

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

Такой тег выглядит следующим образом:

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

Минусы

Такую настройку сложно внедрить на большинстве стандартных CMS-системах.

4 Способ. AJAX-пагинация

AJAX-пагинация найболее оптимальная и выгодная для SEO функция, поскольку работает она следующим образом:

при переходе на вторую и последующие страницы каталога, страница сайта не перезагружается, но список выводимых товаров или статей изменяется при помощи AJAX, таким образом страниц с url-адресами вида http://site.com/page2 и т. д. просто не существует, они не могут быть проиндексированы поисковыми системами и никогда не попадут в индекс.

Минусы

Такую пагинацию не получится реализовать без привлечения программистов.

5 Способ. Пагинация с тегами rel="prev"/"next" и мета-тегом robots

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

разместив его в секцию .

Кроме этого на всех страницах пагинации размещаются теги "prev" и "next" , указывающие на предыдущую и следующую страницы соответственно. Это облегчает роботу понимание структуры нумерованных страниц и улучшает сканирование размещенных на них товаров или статей. Например,на сайте находится 4 страницы пагинации:

Тегами rel=prev/next необходимо создать цепочку из существующих страниц пагинации, началом которой будет первая страница, в которой нужно добавить:

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

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

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

Важно

Обратите внимание, что URL первой страницы http://site.com/page1.html не должен существовать в принципе, его дожна заменять основная страница http://site.com/page.html . То есть при клике пользователя на цифру 1 в списке страниц пагинации перех должен осуществляться именно на основную страницу вида http://site.com/page.html.
Также при размещении текста на странице категории, рекомендуется скрывать его на остальных страницах пагинации.

6 Способ. Пагинация с тегами rel="prev"/"next" и rel="canonical" сам на себя

Аналогично предыдущему способу на всех страницах пагинации размещаются теги rel="prev"/"next". Отличие от предыдущего подхода состоит в том, что вместо закрытия индексации нумерованных страниц с помощью мета-тега robots, на каждой странице пагинации размещается атрибут rel="canonical", указывающий каноническую ссылку на эту же страницу. То есть на странице пагинации http://site.com/page3.html в блоке будет размещена каноническая ссылка, ведущая на нее же:

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

Как узнать, что пагинация для SEO настроена неправильно?

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

Самый простой способ для их определения - посмотреть проиндексированные страницы в Google через оператор site: , например site:example.com покажет все страницы для домена example.com. Но, если Ваш сайт имеет большое количество страниц, удобнее будет воспользоваться специализированными сервисами типа Screaming Frog Seo Spider . Находим страницы-дубликаты по title и обращаем внимание на их URL для обнаружения страниц пагинации (адреса содержат параметр типа page= ).

Также Вы можете найти дубликаты title с помощью панели вебмастера Google:

Откройте вкладку Вид в поиске > Оптимизация HTML

Переходим в раздел "Повторяющиеся заголовки (теги title)" и анализируем адреса страниц на схожесть со страницами пагинации.

Заключение

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

Когда занимаешься проектированием, уже в режиме «автопилот» замечаешь не только интересные фишки, но и шероховатости во взаимодействии, вещи, которые хотелось бы исправить на некоторых сайтах. Одна из таких вещей - пагинация (назовем это так) или способы подачи и поиска контента на сайте.

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

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

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

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

Достоинства:

  • Эффективный способ потребления большого объема информации для поиска чего-то конкретного либо просто убить время;
  • Обновление контента производится непрерывно, не требуя дополнительных затрат. Не нужно отвлекаться каждый раз, чтобы кликнуть на следующий номер страницы;
  • Пользователям удобней скроллить, чем кликать.
Недостатки:
  • Нет возможности добавить свое местоположение в закладки, если нужно вернуться позже;
  • После закрытия сайта, чтобы попасть в эту точку снова, приходится проделать весь путь с самого начала;
  • Невозможно определить свое положение и в результате испортится весь опыт взаимодействия с продуктом;
  • Не отражает реального объема доступных данных;
  • Тяжело (невозможно) добраться до футера.

Классическая пагинация

механизм, который делит контент на отдельные страницы.

Достоинства:

  • Хорошо работает, когда пользователь ищет в списке что-то определенное, а не просто просматривает поток данных;
  • Дает ощущение контроля. Видно общее количество результатов, соответственно проще оценить, сколько времени займут поиски нужного материала;
  • Возможность держать в голове местоположение элемента. Естественно, пользователи не обязательно будут помнить точный номер страницы, но они будут примерно ориентироваться в списке результатов, а пронумерованные страницы помогут быстрее туда добраться;
  • При прекращении поиска, всегда точно знаешь количество просмотренных результатов и можешь сделать вывод, где остановился и сколько результатов еще необходимо изучить.
Недостатки:
  • Прерывание состояния «потока» при поиске информации.
  • Новоизобретенная пагинация

    Проанализировав достоинства и недостатки двух топовых видов, изобрела третий, который включает достоинства и выключает недостатки первых двух.

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

    1. Берем постраничную пагинацию и «клеим» ее к правому краю сайта;
    2. Фиксируем. При прокрутке страниц пагинация остается, а страницы меняются. Как вариант, можно «клеить» внизу экрана.
    Стрелки вниз/вверх - начало/конец страницы;
    Высота, ширина, внешний вид - на свой вкус. Если страниц много - опять используем прием классической пагинации: 1 2 3 4 5… 10

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

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

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

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

    Если вы обнаружили серьезные недостатки, либо, по какой-то причине, такой элемент интерфейса вам кажется неудобным, буду рада услышать ваше мнение.

    P.s. при написании статьи был использован материал и картинки из

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

    Где истина?

    Разрешать индексацию этих страниц роботу Яндекса и запрещать роботу Google meta name googlebot noindex, follow? Так же Яндекс предлагает поставить рел каноникал на первую страницу, то есть саму на себя. Жду интересного и развернутого ответа. Спасибо.
    15.04.2014

    Пагинация

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

    Логика поисковых систем

    С точки зрения ранжирования для поисковых систем это есть и всегда будут две различные страницы с двумя различными URL-адресами. Скажем /catalog/ и /catalog/?page=2. Таким образом:

    • У них должны быть различные Title и meta-теги, иначе это были бы точь-в-точь одинаковые страницы (дубли), а это не так.
    • Не должно быть дублированного контента (в данном случае — текста, изображений).

    Логика человека

    С точки зрения обычного человека, всё примерно также:

    • Я не хочу видеть второй раз то, что уже выдел на предыдущей странице (текст и товары).
    • Это другая страница и она мне интересна, поэтому я её и посетил .

    Простые выводы

    1. Раз страница интересна посетителям, значит, она может быть интересна и пользователям поисковой системы, а, следовательно, её лучше не закрывать от индексации.
    2. Не надо дублировать текст, Title и meta-теги, это будет вредить и человеку и поисковому роботу.

    Оптимизация постраничной навигации (пагинации) на сайте

    1. Каждой странице постраничной навигации требуется задавать свой тег Title и meta-теги.
    2. На каждой странице требуется водить свой текст описания (или выводить уникальный текст описания на основной странице и скрывать его на второй и последующих).
    3. Страницы не требуется закрывать от индексации, так как они могут привлекать дополнительный целевой трафик.

    Полезные приёмы:

    • Каждую страницу пагинации можно оптимизировать под свои тематические НЧ и СЧ запросы, это подход дает свои плюсы.
    • Title и meta-данные должны быть релевантны контенту страницы, в частности имеет право на существование подход, при котором Title и meta-теги генерируются исходя из конкретных товаров которые выводятся на странице.
    • На каждой странице требуется выводить свой уникальный текст релевантный списку товаров или скрывать текст описания и выводить его только на основной (первой) странице.

    Как быть с тегом h1, он может дублироваться?

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