Пагинация и ее сео оптимизация. Что такое пагинация с точки зрения SEO и динамических страниц

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

Этому элементу интерфейса часто уделяют незаслуженно мало внимания. Он проходной, стандартный, делается за 10 минут, так же как «хлебные крошки».

В статье не пойдет речь о технической реализации средствами php, css, ajax и jquery, зато расскажу о том, какой должна быть правильная постраничная навигация, чтобы была не только красивой, но и помогала магазину продавать и не мешала поисковой оптимизации.

Каким может быть пагинатор

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

Например, вот так сделана постраничная навигация в новой версии магазина Wildberries.ru

Мелко, блекло, незаметно.

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

Цифры с номерами страниц. Самый привычный пагинатор, с цифровой нумерацией страниц и кнопками «вперед—назад». Появился такой пагинатор одновременно с интернетом и во многих реализациях, даже на современных сайтах так и не изменился. Посмотрите скриншот постраничной навигации в магазине lamoda.ru. Не иначе основная целевая аудитория такого инструмента — поисковые роботы.

Так выглядит пагинация в интернет-магазине lamoda.ru.

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

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

Пример из новостного сайта, но как иллюстрация вполне подойдет.

Похожим образом сделано в поиске по картинкам Яндекса.

Для интернет-магазина хорошо работает вариант, когда на странице списка товаров, вместо последнего товара выводится ссылка «Еще», а под ним традиционная пагинация.

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

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

Ошибки SEO в постраничной навигации

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

Дублирование содержимого тега Title

Одинаковый Title (заголовок в окне браузера) — частая ошибка, которая приводит к выпадению из выдачи поисковика части страниц пагинатора. Возникает из-за генерации по шаблону первой страницы каталога всех последующих страниц (2, 3 и т. д.).

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

Один description для всех страниц

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

Один текст описания раздела для всех страниц

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

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

Закрытие от индексации

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

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

В заключение несколько простых советов:

• Если у вас в разделах не слишком много товаров, например, не больше 100 шт. в каждом, то постраничная навигация вам вообще не нужна. Не выводите товары по 20 или сколько-то там штук на странице. Показывайте все сразу, это будет работать лучше, чем бессмысленная в этом случае (когда товаров в разделе немного) пагинация.
• Если товаров в разделах много, и без «постранички» не обойтись, сделайте чтобы на страницах было товаров не слишком мало. 80-100 — вполне нормально. не нужно мельчить и показывать на странице по 20-30 товаров.
• В дополнение к пагинатору, дайте возможность пользователю самому выбирать сколько товаров на странице за раз он хочет видеть.
• Подумайте над возможностью заменить пагинацию на «бесконечный скролл».

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

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

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

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

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

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

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

Недостатки:

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

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

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

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

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

Недостатки:

Прерывание состояния «потока» при поиске информации.

Новоизобретенная пагинация

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

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

1. Берем постраничную пагинацию и «клеим» ее к правому краю сайта;
2. Фиксируем. При прокрутке страниц пагинация остается, а страницы меняются. Как вариант, можно «клеить» внизу экрана.

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

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

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

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

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

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

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

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

Общее

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

Первоначальное определение

Итак, в данном случае считается, что пагинация - многозначный термин, который каким-то образом касается страниц.

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

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

Автоматическая

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

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

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

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

Раздельная

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

Вместе с этим термином появляется понятие "фолиация". Оно толкуется как нумерация, но не каждой страницы, а каждого листа. Отсюда и подобная терминология (в переводе с латинского folio это - «страница»).

Развитие

Далее наш термин появляется в основах веб-программирования. Пагинация используется дизайнерами, которые толкуют её по-другому. Для них этот термин означает показ определенного количества информации на одной веб-странице. К примеру, в результатах поиска показывают 10 страниц. На форуме может быть использовано 20-30 тредов и т. д.

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

Поисковая оптимизация

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

Итак, на русском эта аббревиатура звучит как «поисковая оптимизация». В английском она расшифровывается как search engine optimization. Если не вникать в специализированную терминологию, то перед нами - специализация, которая занимается внешней и внутренней оптимизацией сайта для того, чтобы он поднял свои позиции в поисковой выдаче.

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

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

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

Проблемы

Итак, теперь, когда вы знаете о SEO, разбираться с пагинация, будет проще. Как уже говорилось ранее, этот термин в веб-программировании обозначает практически то же самое, что и в издательстве. На сайтах тоже есть своя порядковая нумерация, которая может быть вверху или внизу. Часто мы её встречаем на страницах интернет-магазина с товарами, когда по фильтрации определенного продукта нам выдается целый список моделей.

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

• Ограниченная работа поискового робота.
• Дубликаты.

Ограничения

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

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

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

Дубликаты

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

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

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

Решение

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

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

Вручную

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

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

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

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

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

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

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

Google предлагает создать отдельную страницу, на которую бы выводились все товары определенного каталога. Такая страница называется «Смотреть все». На ней достаточно будет поставить: rel=“canonical” в блок.

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

Универсальный

Следующий метод борьбы с пагинацией - это использование Rel=“prev”/“next”. Считается, что это хотя и универсальный вариант для Google, все же очень непростой, а для новичков еще и опасный.

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

Оптимизация пагинации

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

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

Выводы

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

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

К примеру, могут использовать прямую нумерацию (1, 2, 3, 4…). Есть вариант прямой нумерации, но с указанием количества товаров в списке. К примеру, на каждой странице по 10 товаров, тогда пагинация будет выглядеть так: 1-10, 11-20, 21-30 и т.д. Есть в веб-программировании и использование обратной пагинации.

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

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

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

До конца февраля единоразовая скидка на продвижение сайта - 10%

Что такое пагинация и ее разновидности

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

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

• Прямая (универсальная) пагинация с порядковой нумерацией (1-2-3). Это перечень номеров страниц.Чаще всего также добавляют кнопки “далее/назад” с обеих сторон ссылок на страницы.
• Диапазон выбора с указанием позиции в листинге (1-10, 20-59).
• Обратного типа (“новое”, 100-21, 20-1).

Конечно, никто не запрещает применять более креативные идеи, например:

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

Типы пагинации

1. 1. Разбивка статей. Это, пожалуй, наиболее распространенный вид. Используется для разделения текстового материала на страницы. По обеим сторонам от каждой размещают ссылки «Предыдущая», «Следующая».

Обратите внимание: отдельно взятая страница в подобных случаях имеет собственный URL:

1. 1. • http://www.нашсайт.com/some_article-1.html;
      • http://www.нашсайт.com/some_article-2.html;
      • http://www.нашсайт.com/some_article-3.html.
   2. Пагинация галерей. У каждого изображения есть отдельная уникальная страница, что позволяет задавать имена картинок (входит в понятие оптимизации визуального контента). Подобная реализация удобна для библиотек, фотобанков.

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

1. 1. Листинг комментариев на блогах, тем, размещенных на форумах. При пагинации такого типа возникает одна сложность: контент, который сегодня находится на первой странице, завтра переместится на вторую, так как его место займут новые материалы. Чтобы не путаться, рекомендуется реализовать листинг по датам. Такие ссылки всегда будут вести на один и тот же контент, поскольку они будут содержать в своем адресе время публикации записи. В подобной ситуации можно использовать годы, месяцы, дни. При этом пагинация будет начинаться с главной, а далее – с максимальной цифры в URL-адресе:

1. Бесконечная прокрутка (infinite scroll). Данный тип пагинации является самым «продвинутым» среди современных способов разбиения на страницы. Реализовывается при помощи специального скрипта, который к текущей странице добавляет содержание следующей при прокрутке мышкой вниз.

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

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

Пагинация для SEO: миф или реальность?

Действительно ли навигация страниц сайта полезна для SEO-продвижения? Смоделируем стандартную ситуацию, встречающуюся на большинстве проектов. На веб-ресурсе есть 60 страниц. Чтобы поисковому роботу добраться хотя бы до середины (в этом случае – страницы под номером 30), ему необходимо углубиться на несколько уровней, отыскать товар либо пост, перейти на следующий уровень. Конечно, бот обойдет и эту, и другие страницы, однако сроки индексации будут падать с последующим уровнем.

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

Достойно реализовать и настроить листинг несложно, достаточно следовать некоторым рекомендациям.

Метод 1. Использование noindex для удаления пейджинга из индекса поисковых систем.

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

После проверьте на отсутствие дублей URL 1-й страницы. Помните: на главную, к примеру “мой сайт.com/catalog”, нужно настроить “redirect 301” cо страниц “мой сайт.com/catalog/page=1”.

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

Метод 2. «Показывать всё» и rel=“canonical” (основан на рекомендациях Google).

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

Метод 3. Применение Rel=“prev”/“next”.

Подразумевает создание цепочки страниц, начиная с самой первой и до последней.

Сложность! Атрибут – (возможно использование относительных, абсолютных URL) размещается единственным на 1-й странице.

На вторую нужно будет поместить предыдущую, следующую:

Следует помнить, что Yandex не учитывает подобные атрибуты, а Google считает их вспомогательными, но не директивами.

Метод 4. AJAX, Javascript.

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

Ajax-подгрузка контента во время прокрутки страниц: этапы реализации

1. 1. HTML-документ с двумя обязательными блоками:
      • статическая страница с фиксированной шириной, высотой и свойством overflow:auto (чтобы прокручивать контент);
      • блок-контейнер внутри основной страницы. Его ширина меньше, чем родительского объекта, а высота будет зависеть от самого содержания. Именно в этом блоке происходит загрузка данных из сервера.
   2. Реализация scroll-события и отправление Ajax-запроса на сервер.

Фрагменты кода для JavaScript-события:

//запуск функции при прокрутке

$(«.text»).on(«scroll», scrolling);
function scrolling(){

//считывание текущей высоты контейнера
var currentHeight = $(this).children(«.wrapper»).height();

//проверка достижения конца прокрутки
if($(this).scrollTop() >= (currentHeight — $(this).height()-100)){

/*отключение вызова функции прокрутки во избежание неоднократного вызова функции */
$(this).unbind(«scroll»);

//функция, реализующая следующие два этапа
loader();}}

//количество подгружаемых записей из БД
var count = 20;
//начиная с
var begin = 0;
function loader(){

// «теневой» запрос к серверу
$.ajax({
type:»POST»,
url:»./get.php»,
data:{

//передача параметров
count: count,
begin: begin*count
},
success:onAjaxSuccess
});
function onAjaxSuccess(data){

//добавление полученных данных
//в конец контейнера
$(«.wrapper»).append(data);

//возвращение вызова функции при прокрутке
$(«.text»).on(«scroll», scrolling);
}
//увеличение точки отсчета записей
begin++;
}

1. 1. Использование PHP, MySQL.

Посредством SQL и оператора LIMIT контент получают из БД, то есть выводят определенное число записей, хранящихся в разных блоках. Следующие действия – обращение в файле php к БД, демонстрация результата. В таком случае понадобится скрипт:

// указание параметров для подключения к MySQL
$host=’localhost’; // имя хоста
$database=’lazyloader’; // имя базы данных
$user=’root’; // имя пользователя
$pass=»; // пароль пользователя

// подключение к MySQL
$db = mysql_connect($host, $user, $pass)
or die(«Не могу соединиться с MySQL!»);
mysql_select_db($database)
or die(«Не могу подключиться к базе данных!»);

//получение количества и позиции
$begin = ($_POST[«begin»])?$_POST[«begin»]:0;
$count = ($_POST[«count»])?$_POST[«count»]:12;

//формирование запроса к БД
$query = «SELECT * FROM база данных WHERE type=’тип’ LIMIT «.$begin.»,».$count.»»;

//выполнение запроса и получение результата
$result = mysql_query($query);

//формирование вывода данных, полученных из базы
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
echo «Английское название: «.$row[«name_en»].»»;
echo «Русское название: «.$row[«name_ru»].»»;

После этого следует проверить работоспособность.

Заключение

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

1. Невозможность индексации либо снижение глубины сканирования по причине некорректно настроенных ссылок пагинации.
2. Возникновение дублированного контента. Подобная ситуация получается при использовании страницы «Смотреть все» и одновременном разделении на отдельные. При этом rel= »noffollow» для разбиения страниц не используется.

Чаще всего лучшим решением станет применение двух методов: атрибута rel=”next/prev” (понятен для Google) и мета-тега robots=”noindex,follow” (подходит для Google, Яндекс). Это – “золотая середина” в работе с оптимизацией пагинации.

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

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

• стоит ли их закрывать индексацию пагинации в robots.txt;
• может стоит закрыть их с помощью meta name="robots";
• или лучше использовать rel=canonical;
• а может вообще их оставить открытыми для индексации;
• ну и другие вопросы.

Итак, поехали!

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

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

• карточек товаров;
• информационных постов;
• обсуждения на форумах.

Индексация пагинации

Лучше страницы пагинации не запрещать от индексирования, чтобы роботы доходили до как можно большего количества товаров/постов (особенно важно, когда у вас очень много товаров). Но опять же, несмотря на то, что страницы открыты для индексирования, я бы рекомендовал сделать так, чтобы они не участвовали в основном поиске. Я противник низкокачественных страниц в индексе и считаю, что в поиске должны быть только нужные страницы, и важность подобных страниц будет выше, нежели будет полно низкосортного контента. Как же тогда быть?

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

Требования Яндекса

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

Требования Google

То есть Гугл не рекомендует, как это делает Яндекс, ставить каноникал на первую страницу, также он говорит, что это неправильно. Но по опыту замечено, что, если ставить rel=canonical на первую страницу, ничего критичного не происходит, сайты хорошо чувствуют себя в обоих поисковых системах.

И да, есть такой момент: Яндексу все равно на теги rel=prev и rel=next, он не понимает их и просто игнорирует.

А что же говорят SEOшники?

Мнений на эту тему очень много, приведу парочку.

Кто-то говорит, что каждую страницу пагинации нужно подтачивать под разные запросы. К примеру, первую страницу под "Купить ноутбук", вторую под "Купить ноутбук недорого", третью под "Купить ноутбук в интернет-магазине" и так далее. Не делайте так. Поисковики не настолько тупые, может быть это еще и работало лет 5-8 назад, но сейчас однозначно так не стоит делать.

А кто-то говорит запретить в robots.txt или использовать тег meta name="robots" content="noindex,follow". Я раньше тоже так делал, но это не совсем правильно, так как поведенческие факторы со страниц пагинации не будут передаваться. Да и Яндекс также говорит:

Я не продвигаю страницы категорий на блоге (а зря, я рассказывал про пользу правильной ), все руки не доходят, как-нибудь доберусь обязательно, уберу "noindex, follow". Тем, кто продвигает категории, рекомендую использовать инструкцию выше.

Дублирование в пагинации

Кстати, если Яндекс считает, что страницы пагинации - это дубли, то Google так не считает, ему главное указать rel=prev и rel=next. Если вы используете тег rel=canonical на основную страницу, то в индексе будет только она. Если же использовать только rel=prev и rel=next, страницы пагинации будут попадать в индекс поисковых систем.

Теги prev и next показывают роботу, что страницы связаны в логической последовательности, как бы это одна большая страница. Именно поэтому одновременно использовать rel prev/next и rel canonical на основную страницу - неправильно. То есть, если вы хотите указать и каноникал, и prev/next, тогда каноникал указываем только на саму страницу (саму на себя).

Как оформить страницы пагинации

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

Если у вас интернет-магазин, можно добавить ссылку на страницу "Все товары" данной категории. Это позволит просмотреть страницу сразу, без переходов на другие страницы. В этом случае rel=canonical поисковики рекомендуют ставить rel=canonical на эту страницу со всеми товарами без пагинации. Но здесь нужно быть аккуратным, потому что если выводить много товаров/постов, то страница подгружается дольше, а поисковики любят как можно более быстрые сайты.

И еще, если мы находимся на второй или любой другой странице, ссылка на первую страницу должна идти сразу на основную, а не на /page/1, вот пример:

Повторюсь, закрывать от индексации страницы пагинации не нужно. Опять же скриншот комментария "Платона" и ссылку на него уже приводил выше.

Кто-то делает бесконечный скроллинг (товары/посты подгружаются по мере пролистывания страницы вниз). Если вы делаете это, снова нужно быть аккуратным. Либо кто-то выводит кнопки "Показать еще":

Бесконечный скроллинг и прочие javascript/ajax использовать можно, но чтобы не было проблем, я бы рекомендовал сделать так, чтобы все элементы индексировались и отдавались роботу. И все же, я бы продублировал бесконечный скроллинг цифрами 1,2,3,4, так как некоторым пользователям так удобнее. Вот пример:

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

1, 2, 3 ... 10, 20, 30, 40, 50, 60, 70...79.

Вывод - как же в итоге поступить правильно?

На мой взгляд есть 3 варианта наиболее правильных развития событий:

1. Если вам важен Яндекс или интересны оба поисковика (практически для всех проектов под Россию), то делаем каноникал на первую страницу.
2. Если интересует только Гугл (например, ваш сайт находится в странах СНГ, где в некоторых из них трафика в Яндексе практически нет, или зарубежные проекты), то делаем rel canonical саму на себя и прописываем prev/next.
3. Если у вас есть страница, где выводятся все товары, можно указать рел каноникал на нее, использовать rel=prev и rel=next. Тогда будет правильно для обоих поисковых систем. Но в таком случае, напомню, минусы тоже есть: если у вас имеются категории, где выводятся больше количество товаров, то это замедлит скорость загрузки сайта, а это влияет на ранжирование.

Во всех случаях запрета на индексирование не требуется (ни в robots.txt, ни в meta name="robots"). Не забываем, что текст размещаем только на 1-ой странице, чтобы не было дублей с большим количеством совпадений. Вы можете проследить за изменения страниц в индексе в панели вебмастеров Яндекса и Google.

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

Ребята, кто успел попасть на предзапись моего SEO-марафона, я почти всем ответил на вопросы, осталось еще чуть-чуть, вопросов пришло очень много, разгребаю. 🙂 Если вдруг вы не успели записаться на предзапись марафона, ждите новостей на блоге (подпишитесь на рассылку по почте, чтобы не пропустить старт продаж), в феврале стартуем!

Ну и вопрос: а что вы делаете со страницами пагинации на своих проектах?