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

Для начала небольшая справка:

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

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

Детально про то, что такое пагинация описано в Википедии .

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

Ближе к делу!

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

Лимит посещение поисковыми роботами для вашего сайта

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

Проблема с дубликатами

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

На данный момент у SEO специалистов есть 4 способа для решения данной проблемы.

Вариант 1. Удаление постраничной пагинации из индекса с помощью noindex

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

Реализуется он следующим способом: такой мета-тег

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

Нюансы , которые следуют учесть:

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

site.com/catalog?page=2
site.com/catalog?page=3
…

site.com/catalog?page=N

то, если вы находитесь на не первой странице, ссылка на первую страницу должна быть

site.com/catalog

при этом с такой страницы

site.com/catalog?page=1

должен быть настроен 301 редирект на site.com/catalog.

Плюсы

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

Минусы

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

Вариант 2. «Смотреть всё» и rel=“canonical”

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

Реализация данного метода: после того как вы создали страницу «Смотреть всё» (например, это site.com/catalog/view-all.html), то на всех страницах пагинации необходимо в секцию разместить:

.

Таким образом мы показываем поисковым системам, что каждая страница пагинации, как бы является частью страницы «Смотреть всё».

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

Нюансы:

Страница «Смотреть всё» должна довольно быстро загружаться , желательно в пределах 1-3 секунды. Поэтому, такой способ идеально подходит для категории у которых кол-во страниц с пагинацией от 5 до 20 и не подходит для каталогов у которых сотни страниц пагинации.

Плюсы:

• приоритетный метод для Google
• все содержимое пагинации будет в индексе поисковой страницы через страницу «Смотреть всё»

Минусы:

• не подходит если много страниц или много качественных картинок для товаров/статей.
• довольно сложная реализация на большинстве стандартных CMS.

Вариант 3. Rel=“prev”/“next”

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

Например, вы имеете 4 странице в каталоге:

Используя rel=»prev»/»next» вы, по сути создаете цепочку между всеми страницами в данном каталоге. Данная цепочка начинается с первой страницы : для этого вы добавляете в секцию :

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

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

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

.

Используя данные атрибуты rel=»prev»/»next», Google объединяет данные страницы в единый элемент в индексе. Как правило для пользователей, это будет первая страница, так как обычно она является наиболее релевантная страница.

Нюансы:

• rel=»prev» и rel=»next» являются для Google вспомогательными атрибутами, а не директивами.
• в качестве значений могут использоваться как относительные, так и абсолютные URL (в соответствии с допустимыми значениями тега
• если указать в документе ссылку , относительные пути будут определяться на основе базового URL
• если Google обнаружит ошибки в вашей разметке (например, если отсутствует ожидаемое значение атрибута rel=»prev» или rel=»next»), дальнейшее индексирование страниц и распознавание содержания будет выполняться на основе собственного эвристического алгоритма Google.
• следует проверить чтобы при не дублировался URL первой страницы

Плюсы:

• позволяет решить проблему пагинации без использования «Смотреть всё»
• реализация происходит лишь с незначительными изменениями в HTML

Минусы:

• данные атрибуты не учитываются Яндексом
• реализация может быть довольно сложной
• очень внимательно нужно проставлять связи в цепочке страниц

Вариант 4. AJAX и Javascript прокрутка

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

Правильное использование параметров

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

• сесионные переменные,
• сортировки,
• изменение кол-ва элементов на страницу.

В таком случае мы получаем дубли контента. Решением такой проблемы может быть использование сочетания rel=»prev»/»next» и rel=”canonical”.

Для этого, во-первых, вы должны убедиться, что все страницы пагинации с rel=»prev»/»next» используют тот же параметр. Во-вторых, для каждого URL с параметром необходимо прописать его каноническую страницу без этого параметра. Например, у нас есть те же самые 4 страницы пагинации и мы для отслеживания пользователей используем идентификатор сессии sessionid=55:

Правильное использование фильтров и rel=“prev”/“next”

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

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

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

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

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

1. Разбивка статей

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

Каждая страница имеет разный URL-адрес, например:

• http://www.somesite.com/some_article-1.html ;
• http://www.somesite.com/some_article-2.html ;
• http://www.somesite.com/some_article-3.html ;

Вы можете использовать разные имена для каждой части статьи (т.е. вместо some_article-2.html вы можете использовать part_name.html, где part_name — название раздела ), но это создает больше проблем для SEO , так что вам лучше придерживаться конвенции 1, 2, 3.

2. Пагинация галерей

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

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

3. Пагинация категорий

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

4. Разбиение на страницы тем форума или комментариев блога

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

5. Пагинация бесконечной прокрутки

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

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

Возможные проблемы

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

1. Глубина сканирования

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

2. Дублированный контент

Дублированный контент — это очень серьезная проблема SEO . Это может произойти при пагинации, когда вы используете общую страницу «Смотреть все » вместе с разбивкой на отдельные страницы. Я советую использовать rel=”nofollow” для разбивки страниц. Тогда вы сможете смело включить страницу «Смотреть все ».

3. Бедный контент

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

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

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

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

1. Когда использовать пагинацию

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

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

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

Некоторым пользователям больше подходит прокручивать страницу вниз, чем постоянно нажимать на кнопку «Следующая », «Следующая », «Следующая ». Так что придерживайтесь правила — от 10 до 20 сообщений / комментариев на страницу.

2. Всегда создавайте оглавления разбитых на страницы статей

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

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

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

Если вы используете WordPress , то вам уже мог полюбиться плагин WP Table of Paginated Contents . Он обрабатывает все, что связано с созданием оглавлений и предоставляет множество вариантов настройки.

С помощью этого плагина, ваши оглавления будут выглядеть следующим образом:

3. Не забывайте о странице «Смотреть все»

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

Одна страница «Смотреть все », на которой отображаются все разделы пагинации, не только хорошо воспринимается теми пользователями, которые не любят кликать по ссылке «Далее », она также предотвращает проблемы SEO .

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

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

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

4. Если необходимо, используйте rel=“prev” и rel=“next”

Если у вас есть веские причины, по которым вы не можете использовать страницу «Смотреть все », или если тип пагинации, который вы используете, просто не допускает такого, вы всегда должны использовать rel=“prev” и rel=“next” , чтобы Google индексировал все страницы этой серии.

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

Работа с постраничной навигацией входит в список обязательных действий, осуществляемых 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, Яндекс). Это – “золотая середина” в работе с оптимизацией пагинации.

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

Этому элементу интерфейса часто уделяют незаслуженно мало внимания. Он проходной, стандартный, делается за 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 товаров.
• В дополнение к пагинатору, дайте возможность пользователю самому выбирать сколько товаров на странице за раз он хочет видеть.
• Подумайте над возможностью заменить пагинацию на «бесконечный скролл».

Кристина Загорулько

Июн 30, 2015 | Время чтения: 6 мин

Все крупные интернет-магазины в обязательном порядке используют пагинацию – постраничную навигацию товаров. Делается это для удобства посетителей. Представьте себе, что какой-нибудь раздел содержит пару сотен единиц товара. Выводить их все на одну веб-страницу? В принципе, можно. В отличие от бумажной, интернет-страница безразмерна. Используй себе скроллинг и просматривай товар. Да, страница сайта безразмерна, но скорость-то соединения имеет конечную величину! И если каждая единица товара имеет изображения (а это сейчас делается практически всегда), то такая веб-страница может грузиться очень долго. Но если пагинация для юзабилити сайта – это всегда хорошо, то для SEO неправильная ее настройка сулит ухудшение позиций в поисковой выдаче и затрудняет индексацию:

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

Рассмотрим подробнее эти проблемы.

Лимит он и у поисковиков лимит

Робот поисковой системы на сайте находится отнюдь не столько времени, сколько необходимо, чтобы проиндексировать все его страницы. Это время лимитировано и определяется частотой обновления контента, трастом и массой других величин. А теперь представьте себе ситуацию: в интернет-магазине в каждом разделе по 20-30 страниц, отличающихся только названиями товаров. И каждую страницу робот будет индексировать, то есть считывать, ее содержимое. А до страницы конкретного товара он уже и не доберется, ведь она находится уровнем ниже. Но ведь владельцу интернет-магазина надо совершенно другое – индексация страниц с товаром!

Проблема дублированного контента

К одинаковому контенту даже в рамках одного сайта поисковики относятся плохо. Логика проста. На веб-странице сайта должен быть контент максимально релевантный запросу. А если на разных страницах он практически идентичный, то есть имеется список единиц товара (для разных страниц он разный, но очень похожий, так как товар однотипный) плюс ОДИНАКОВОЕ описание всей группы товаров, в котором и находятся ключевые слова. Как тогда определить из всех таких интернет-страниц наиболее релевантную? По сути, с точки зрения SEO, вес страниц распыляется. Главная страница раздела (каталога) теряется среди десятка ей подобных. А значит, в выдаче она неминуемо будет проседать, точнее, все веб-страницы будут проседать.

Варианты сео оптимизации страниц пагинации

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

Вариант №1. Запрет индексации страниц пагинации

А. При помощи мета-тега noindex

Этот вариант сео оптимизации подразумевает, что в секцию КАЖДОЙ веб-страницы пагинации кроме первой добавляется строчка:

Другими словами, вы запрещаете роботу поисковика индексировать эту веб-страницу, но разрешаете следовать по ссылкам из нее.

Несколько нюансов сео оптимизации:

• Исключите дублирования URL первой страницы при динамическом создании веб-страниц. Другими словами, если на сайте реализованы фильтры – контент страницы зависит от заданных условий: сортировка по цене – с большей, меньшей, по популярности, по брендам и т. д. Для этого ссылка на первую страницу каталога должна иметь вид: название домена/catalog. А со страницы: название домена/catalog?page=1 необходимо сделать 301 редирект на страницу: название домена/catalog.
• Обязательно создать XML карту сайта.

Плюсы:

• Этот вариант отлично понимает Яндекс.

Минусы:

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

Б. При помощи файла robots.txt

Пусть у нас страницы пагинации имеют вид http://название домена/category/page/n, где n – номер страницы. В этом случае в файле robots.txt прописываем директиву: Disallow: /category/page.

В случае с динамическими веб-страницами, вида http://названиедомена/category?page/n директива будет иметь вид: Disallow: ?page=

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

Вариант №2. Использование тега canonical и страницы «Смотреть все»

Суть этого варианта сео оптимизации состоит в том, что создается веб-страница, на которой показывается весь товар каталога, и с помощью тега canonical (о нем мы писали в статье « ») вы указываете поисковым системам на нее как на каноническую веб-страницу. К примеру, у вас в интернет-магазине есть раздел «Абажуры». Тогда необходимо создать интернет-страницу со всеми абажурами, например, с таким URL: название домена/abajyru/?&show_all=yes. А на всех веб-страницах пагинации в секции прописать строку:

.

Нюансы сео оптимизации:

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

Плюсы:

• Тег canonical понимает и Гугл и Яндекс. При этом для Гугл такой способ исключения страниц из индексации является приоритетным.
• Весь контент страниц пагинации будет индексирован через веб-страницу «Смотреть все».

Минусы:

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

Вариант №3. AJAX-пагинация

Суть этого варианта сео оптимизации состоит в том, что при прокрутке станицы вниз в нее подгружается новый контент. Достигается это при помощи технологии AJAX (Asynchronous Javascript and XML), которая позволяет обмен данными между сервером и браузером пользователя в фоновом режиме. С данной технологией многие прекрасно знакомы, ведь она реализована во «ВКонтакте» и «Одноклассниках». AJAX позволяет все время подгружать список товара и вторых и последующих веб-страниц каталога просто не существует.

Плюсы:

• Для поисковых систем каталог будет выглядеть, как одна веб-страница, поэтому будет проиндексировано все и никакого дублирования контента.
• Нет опасности долгой загрузки веб-страницы (как в случае со страницей «Показать все»).

Минусы:

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

Вариант №4. Пагинация при помощи тегов rel=»prev»и rel=»next»

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

Пусть у нас есть четыре веб-страницы каталога. Тогда в секцию страницы №1 помещаем строку:

Для страницы №2 это будет выглядеть уже так:

Для страницы №3:

И, наконец, для страницы №4:

Плюсы:

• Позволяет проиндексировать весь контент, как будто он размещен на одной странице, но без использования громоздкой веб-страницы «Смотреть все».