Пагинация является важным элементом навигации любого сайта или приложения. Тем не менее, при разработке сайта пагинации уделяется мало внимания, вследствие чего большинство сайтов имеют не совсем пригодную пагинацию.
Пагинация - это метод разбиения содержимого на несколько страниц, предоставляющий ссылки для переходу с текущей части на другие. Зачастую ссылки для перехода на другие части располагаются ниже или выше содержимого, либо используются оба варианта. Зачастую ссылки на другие страницы представляют собой номера этих страниц, но также встречаются сайты, где используются только ссылки вида «Раньше»/«Позже».
Какой метод пагинации использовать и использовать ли вообще зависит от контекста, поэтому всегда нужно исходить из желания сделать сайт удобным для посетителей.
В создании качественной пагинации нет ничего сверхсложного, достаточно лишь следовать перечисленным ниже советам.
1 Оптимальный размер страницы
Не делайте страницу слишком короткой. Сайт или приложение - это не печатная книга. Размер страницы печатной книги ограничен размером книги и листа, а размер страницы сайта ограничен лишь вычислительной мощностью устройства и терпением пользователя. Приемлемым вариантом является отображение 20-80 записей на страницу, но это лишь приблизительное число, а реальное число зависит от категории сайта. На некоторых сайтах это число равно 10, а где-то и 100, ведь главное в этом деле - обеспечить удобство использования.
2 Размер ссылок
Кликабельные элементы пагинации (да и любого другого элемента навигации) должны быть крупными. Это необходимо в первую очередь для людей, использующих мобильные устройства, так как точность нажатия пальцем на сенсорный экран гораздо ниже, чем при использовании курсора на персональном компьютере или стилуса.
3 Указание текущего положения
У пользователя не должно возникнуть проблем с определением того, на каком номере страницы он находится в данный момент. Поэтому в пагинации необходимо визуально выделить номер страницы, на которой находится пользователь. Причём, желательно, чтобы это было сделано не только с помощью цвета, так как сайт могут просматривать на монохромном экране.
4 Ограничьте количество страниц и пространство вокруг элементов
Количество ссылок должно быть не более 10. Также нужно убедиться в том, что размера ссылок и пространства между ними достаточо, чтобы пользователь нажимал на ту ссылку, на которую он действительно хотел нажать.
5 Ссылки на предыдущую и следующую страницы
6 Ссылки на первую и последнюю страницы
Зачастую можно увидеть пагинацию, содержащую ссылки на первую и последнюю страницы. Они не такие популярные, но, тем не менее, они нужны пользователям, которые решили начать чтение с самых ранних записей (если новые размещены вверху на первой странице, как часто делают для новостей).
Эти ссылки визуально похожи на ссылки, ведущие на предыдущую и следующую страницы (например, двойная стрелка), что приводит к путанице - пользователи не уверены в том, какая ссылка за что отвечает. Добавление текста редко решает проблему.
Тем не менее, решение простое - обозначить первую и последнюю страницу цифрами, как и остальные ссылки.
7 Проверьте мобильную версию
Мобильные устройства имеют ограничения размера экрана, поэтому нужно разумно сократить количество элементов и увеличить их размер. Для мобильных устройств можно оставить номер текущей страницы и базовые элементы (первая страница, предыдущая страница, следующая страница, последняя страница).
8 Навигация с помощью клавиатуры
Дайте пользователям возможность использовать для навигации клавиатуру. Клавиша «Вправо» - следующая страница, клавиша «Влево» - предыдущая страница. Главное - предупредить пользователя о данной возможности. Для предупреждения хватит текста под пагинацией: «Используйте клавиши ← влево и вправо → для навигации по страницам».
Также хорошей практикой считается дать возможность пользователю переходить по ссылкам, используя клавишу «Tab». Когда ссылка выделена, нажатие на клавишу «Enter» должно инициировать переход на соответствующую страницу.
Номера страниц или «Далее/Назад»?
Если страниц мало, увеличивается шанс того, что посетитель пролистает их все. Если у посетителя нет возможности оценить количество записей, его терпение может закончиться раньше, чем он перейдёт на другую страницу.
Вывод
Хорошая пагинация улучшает читабельность и уменьшает сложность.
Один из самых частых вопросов в профильных блогах и на форумах от новичков связан с публикацией обширных материалов: как лучше размещать контент: на одной странице или на разных? Эта проблема может быть связана как с объемом материала (статьи с большим количеством символов), так и с числом карточек на сайте (например, если товаров много). Самый простой способ решения этого вопроса - пагинация. В сайтостроительстве этим термином называют порядковую нумерацию веб-страниц. И дальше мы поговорим о том, как ее настроить и как она может повлиять на индексацию сайта.
же этот термин используется, если отобразить весь контент на одной странице невозможно. В этом случае требуется порядковая нумерация страниц сайта, по которой пользователь может осуществлять переходы во время посещения ресурса.
Чаще всего с пагинацией сталкиваются владельцы интернет-магазинов, которые вынуждены нумеровать страницы в каждом разделе каталога. Информационные ресурсы используют пагинацию реже.
Казалось бы, все просто: настраиваем количество отображаемого на одной странице, выводим пагинацию в удобном месте и наслаждаемся результатами своих трудов. Однако все далеко не так легко, поскольку при организации пагинации можно столкнуться с рядом сложностей, влияющих на качество ресурса.
Среди проблем, которые нужно выделить, значатся следующие:
- возникновение дублей страниц;
- долгая индексация при большом количестве карточек;
- появление «бедного контента»;
- повтор заголовков;
- наполнение сайта малозначительными страницами;
- нежелание клиента посещать все страницы;
- включение пагинации в дизайн.
Об их решении мы сегодня и поговорим. Тем более, что способов устранения этих недочетов в работе сайта не так много, а потому приходится не выбирать, а пользоваться вполне конкретным списком инструментов и рекомендаций.
Итак, сначала договоримся о том, что для продвижения сайта в ТОП пагинация, в принципе, ни к чему: нам достаточно было бы и главной страницы (утрирую, но все же). А вот для получения заказов она очень даже важна - пока все товары не будут проиндексированы роботом, найти их пользователь вряд ли сможет. Большую роль играет она и в юзабилити - пользователю должно быть удобно при перемещении между категориями/каталогами/карточками.
Один из самых спорных способов избавления от негативных последствий использования пагинации - создание дополнительных каталогов. То есть, если ваш интернет-магазин испытывает проблемы с тем, что все модели чайников разместить на одной странице не удается, стоит создать новые вложенные каталоги, а не раскидать их по страницам.
Например, самый частый вариант организации каталога на продающих сайтах сегодня выглядит так: Главная > Чайники > Список моделей с пагинацией.
Можно представить это по другому: Главная > Чайники > Производители > Список моделей. Если и этого недостаточно, добавляем еще уровни каталогов: Главная > Чайники > По объему > Список моделей. Но это - не выход для магазинов, у которых таких каталогов придется создать массу, даже далее 2 и 3 уровня. Зато такой подход решает вопрос с динамическими страницами, поскольку фильтры создавать бессмысленно.
А вот самый простой способ состоит в использовании элемента
Также долго будут индексироваться страницы магазина или сайта, если воспользоваться возможностями файла rosots.txt: «Disallow: /catalog/pagе» оставит в индексе только первую страницу листинга. Соответственно, карточки на второй и далее страницах пауком будут изучены позже, т.к. ссылок на них получить роботу фактически неоткуда.
Некоторые оптимизаторы предпочитают использовать атрибут rel=»canonical». Для Google - это лучший вариант, а вот Яндекс, процитирую, «читает ссылку с атрибутом rel=»canonical» не строгой директивой, а предлагаемым вариантом, который учитывается, но может быть проигнорирован». То есть, если контент на страницах отличается, робот все равно проиндексирует их, не обращая внимания на атрибут (хотя Платон рекомендует использовать этот атрибут). Кроме того, потребуется создание страницы, на которой будет выводиться весь товар. Она-то и должна быть указана в качестве канонической. Ну и та же проблема, что с
Еще один вариант для Google - использование rel=»prev»и rel=»next». Яндекс с ними, к сожалению, не работает. Суть данного метода состоит в том, что робот ПС при индексации страниц объединяет те, на которых прописан код с использованием данных тегов. При этом создается «единая» страница со списком всех карточек, а контент из индекса не исключается.
Ну и напоследок вспомним об AJAX, методами которого можно обеспечить загрузку карточек при прокрутке страниц. Пожалуй, один из оптимальных методов, которым пользуются многие сайты (например, так организованы каталоги ДНС.ру).
Страницы пагинации SEO
Несмотря на то, что большинство методов, о которых я рассказал в предыдущем разделе, направлены на исключение контента из индекса, это не значит, что со страницами пагинации вообще не стоит работать. Тем более, что многие предпочитают все же эти страницы для робота открывать, чтобы ускорить индексацию товаров. Какие же рекомендации можно дать тем, кто решил, что сокращение количества страниц в поиске - не выход? Я вижу следующие варианты:
- на каждой странице увеличиваем количество отображаемых элементов (это позволит сократить общее число страниц - пусть у вас будет 15 карточек, а не 10 на одной странице);
- title для каждой страницы (кроме первой) должен содержать номер;
- description оставляем только для первой страницы, а keywords не используем на страницах пагинации вообще;
- продающий текст с ключами не должен дублироваться: или пишем отдельно для каждой страницы, или выводим только на первой;
- старайтесь не разбивать статьи, если это делается средствами сайта, а не вручную с учетом необходимости продвижения каждой страницы по ключу (canonical, конечно, подойдет, но только для Google);
- не забывать про ссылку на страницу «посмотреть все»;
- позвольте пользователю самому определять количество товаров, выводимых на странице.
Все описанное выше подходит, в основном, для . Пагинация на форумах, например, обладает своей спецификой - от нее никуда не деться и лучше не трогать. Правда, если есть возможность организовать общение и комментирование как на «Пикабу» или «Хабрахабр», это будет отлично. Ну и для разных типов отображения страниц (только текст, порядок и т.д.) не забываем про rel=»canonical».
Важным является корректная настройка пагинации, поскольку присутствие на сайте неканонических страниц может серьезно мешать как продвижению, так и привести к проблемам с индексацией ресурса в целом. Страницы пагинации могут быть расценены поисковыми системами как несущие сомнительную ценность, ведь в большинстве случаев - это полные или частичные дубли страниц категорий Вашего сайта.
В этой статье я предлагаю подробно рассмотреть основные проблемы и найти эффективные решения настройки пагинации на Вашем сайте.
И так, что же такое пагинация
Страницы пагинации – это страницы каталога (вторая, третья и т.д., страница «показать все») на которых выводится список товаров (или статей, если речь идет о блоге), не поместившихся на первой странице категории или раздела ресурса. В большинстве случаев находится внизу сайта, но может быть расположена и вверху (иногда дублируется вверху и внизу). Выглядит следующим образом:
Поскольку такой функционал присутствует на большинстве сайтов, проблема с его настройкой – актуальна для веб-мастеров и 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-специалистов не существует. Поэтому , подмечайте тактики, которые эффективно работают именно для Вашей ниши и внедряйте их в жизнь. Желаем успехов и роста позиций Ваших проектов!
Работа с постраничной навигацией входит в список обязательных действий, осуществляемых SEO-специалистом. Однако стоит помнить фундаментальное правило поисковой оптимизации: страница должна быть релевантна ключевому запросу. Не нужно создавать бесчисленное множество дублей с идентичными заголовками (тег title и meta description). Для решения подобных проблем на помощь оптимизаторам приходит постраничная пагинация. О том, какой она должна быть в идеале, ходит много споров; этот вопрос поднимается практически на любом SEO-форуме или конференции. Попробуем разобраться в ситуации и внести ясность в эту проблему.
Что такое пагинация и ее разновидности
Под таким термином подразумевается ссылочный блок, с помощью которого на странице выводится часть информации из большого массива однотипных данных. Другие его наименования – pagination, пейджинг, листинг. В современных условиях пагинация приобрела форму, которой удобно пользоваться.
Существует множество методов реализации постраничной навигации с различным функционалом. Наиболее распространенными из них считаются:
- Прямая (универсальная) пагинация с порядковой нумерацией (1-2-3). Это перечень номеров страниц.Чаще всего также добавляют кнопки “далее/назад” с обеих сторон ссылок на страницы.
- Диапазон выбора с указанием позиции в листинге (1-10, 20-59).
- Обратного типа (“новое”, 100-21, 20-1).
Конечно, никто не запрещает применять более креативные идеи, например:
Это не противоречит сути пагинации, но выглядит уж слишком громоздко. Имеет смысл оставить просто стрелки: это удобнее и не отвлекает внимание пользователя от контента. Пример реализации:
Типы пагинации
- Разбивка статей. Это, пожалуй, наиболее распространенный вид. Используется для разделения текстового материала на страницы. По обеим сторонам от каждой размещают ссылки «Предыдущая», «Следующая».
Обратите внимание: отдельно взятая страница в подобных случаях имеет собственный URL:
- http://www.нашсайт.com/some_article-1.html;
- http://www.нашсайт.com/some_article-2.html;
- http://www.нашсайт.com/some_article-3.html.
- Пагинация галерей. У каждого изображения есть отдельная уникальная страница, что позволяет задавать имена картинок (входит в понятие оптимизации визуального контента). Подобная реализация удобна для библиотек, фотобанков.
- Пагинация категорий. Когда на сайте множество категорий, подкатегорий, во время просмотра приходится неоднократно пролистывать страницу вниз. Решением проблемы стала их пагинация, представленная на примере ниже.
- Листинг комментариев на блогах, тем, размещенных на форумах. При пагинации такого типа возникает одна сложность: контент, который сегодня находится на первой странице, завтра переместится на вторую, так как его место займут новые материалы. Чтобы не путаться, рекомендуется реализовать листинг по датам. Такие ссылки всегда будут вести на один и тот же контент, поскольку они будут содержать в своем адресе время публикации записи. В подобной ситуации можно использовать годы, месяцы, дни. При этом пагинация будет начинаться с главной, а далее – с максимальной цифры в URL-адресе:
- Бесконечная прокрутка (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-подгрузка контента во время прокрутки страниц: этапы реализации
- HTML-документ с двумя обязательными блоками:
- статическая страница с фиксированной шириной, высотой и свойством overflow:auto (чтобы прокручивать контент);
- блок-контейнер внутри основной страницы. Его ширина меньше, чем родительского объекта, а высота будет зависеть от самого содержания. Именно в этом блоке происходит загрузка данных из сервера.
- Реализация scroll-события и отправление Ajax-запроса на сервер.
- HTML-документ с двумя обязательными блоками:
Фрагменты кода для 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++;
}
- Использование 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»].»»;
После этого следует проверить работоспособность.
Заключение
Неправильное использование пагинации ведет к возникновению ряда проблем для сайта. Некоторые из них:
- Невозможность индексации либо снижение глубины сканирования по причине некорректно настроенных ссылок пагинации.
- Возникновение дублированного контента. Подобная ситуация получается при использовании страницы «Смотреть все» и одновременном разделении на отдельные. При этом 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 товаров.
- В дополнение к пагинатору, дайте возможность пользователю самому выбирать сколько товаров на странице за раз он хочет видеть.
- Подумайте над возможностью заменить пагинацию на «бесконечный скролл».
