Блог

Необходимость бесконечного скроллинга или чудодейственное колесико

03.07.2014

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

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

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

  • Facebook. По мнению Пателя, скроллинг на этом сайте является секретом его популярности среди пользователей;

  • Pinterest.

  • Twitter. Во время прокрутки страница идет по нарастающей;

  • Google. Скроллинг здесь представлен для осуществления поиска картинок;

Нейл Патель говорит о неоценимости бесконечной прокрутки в новостных лентах. К примеру, на сайте Mashable:

Или на сайте магазина Axara:

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

Бесконечная прокрутка и SEO

Для реализации бесконечной прокрутки чаще всего используется JavaScript. Неприятность состоит в том, что сайты с его применением индексируются Google не идеально. Патель настаивает на размещении содержимого, которое анализируют поисковые роботы, в самом HTML коде (библиотека JQuery). Таким образом вы облегчите доступ роботов Google к контенту, подлежащему индексации в поисковой системе. Для предотвращения проблем с поисковыми индексаторами, Патель рассказывает о наилучшем методе для Google:

1. Этап: Разделение контента.

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

2. Этап: Структурирование URL для скроллинга

Существуют «неудачные» URL-адреса (example.com/fun-items#1) и «удачные» (example.com/category?name=fun-items&page=1, example.com/fun-items?lastid=567). Приведенные примеры наглядно демонстрируют обязательность изменения URL согласно прокручиваемым страницам. Для каждой страницы его нужно сделать уникальным и, непременно, полным. URL не предполагает установки хронологических параметров, так как в этом случае пользователь может не найти нужную информацию, которую он просматривал на сайте три недели назад.

Пример: example.com/category/page.php?name=fun-items&days-ago=3.

В этом случае доступ к ранее просмотренной странице будет невозможным. При создании URL – адреса необходимо воздерживаться от вставки лишних элементов, например: example.com/fun-places?radius=5&lat=40.71&long=-73.40. У каждой страницы URL полный. Не возбраняется добавлять к нему идентификаторы или нумерацию страниц.

1. Этап: Разбивки в заголовочных тегах

Разбивки rel=prev и rel=next непременно должны быть в тегах . При размещении их в контент вашего сайта не будет проиндексирован поисковиками. Подобные разбивки нужны для извещения системам о взаимосвязанности всех страниц сайта. 

2. Этап: использование PushState и ReplaceState

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

3. Этап: тестирование

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

Важными здесь являются следующие пункты:

  • влияние бесконечного скроллинга на полезность сайта;
  • при введении пользователем неправильного URL с несуществующей страницей должна выдаваться «ошибка 404».

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