Как оптимизировать страницу с бесконечным скроллингом под поисковые системы?

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

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

1. Что такое бесконечный скроллинг?
2. Какие проблемы могут быть для SEO?
3. Как оптимизировать такую навигацию?
4. Заключение

Как это работает?

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

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

Обычно этот эффект реализован при помощи Javascript, который асинхронно подгружает свежий контент, изначально скрытый от пользовательских глаз. Это позволяет существенно увеличить скорость загрузки страниц, так как фоновый контент подгружается лишь по мере необходимости. Теперь, когда вы точно знаете, о чем идет речь, давайте взглянем на некоторые примеры. С какими примерами вы знакомы? Давайте рассмотрим несколько самых популярных ресурсов с использованием бесконечного скроллинга. Если вы откроете Twitter, то тут же увидите подобный пример. Продолжайте листать, и страница будет подгружаться по мере необходимости. Конечно же, вы видели этот эффект во Вконтакте. И именно это заставляет посетителей проводить столько времени в соцсетях – бесконечный поток контента! Гугл, вопреки своему нежеланию использовать бесконечный скроллинг в результатах поиска, прекрасно интегрировал этот механизм на странице отображения поиска по картинкам. У такого формата навигации, есть очевидные преимущества, если говорить об удобстве использования и о привлечении внимания. Однако он несет в себе и проблемы. Главная проблема заключается в том, что делать с SEO.

Какие SEO-проблемы несет в себе бесконечный скроллинг?

Главная проблема SEO-оптимизации, возникающая из-за применения бесконечного скроллинга, это использование Javascript. Поисковики, особенно Яндекс, не дружат с Javascript:

Конечно, поисковые роботы Google в состоянии запускать некоторые javascript-коды, чтобы открыть новый контент, однако здесь есть определенные ограничения. Существует очень распространенная практика – помещать контент, который нужно заиндексировать в обычный HTML-код. К примеру, вы можете использовать jquery-вкладки, которые будут распределять контент на несколько отделов. Таким образом, у Google будет доступ к вашему контенту.

Однако Яндекс имеет свою точку зрения на это, и она определена в рекомендациях для веб-мастеров:

Навигация через скрипты. Наиболее распространенным способом размещения ссылки является HTML тег <A>. Но существуют и другие способы навигации между страницами. Например, можно использовать технологии JavaScript или Flash. Робот Яндекса не переходит по таким ссылкам, поэтому следует дублировать ссылки, реализованные при помощи скриптов, обычными текстовыми ссылками.

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

Сам процесс выглядит следующим образом:

Этап 1: определитесь с тем, как разделить ваш контент Возьмите полностью весь контент, который вы хотите представить в виде бесконечной прокрутки, и разделите его на логические части. Не столь важно, какой будет длина этих отрезков. Вам просто нужно убедиться в том, что люди смогут найти то, что ищут. Также нужно будет, чтобы страницы загружались довольно быстро, и при этом, чтобы на них не возникало дублирования контента. Этап 2: создайте URL-структуру, которая будет включать в себя контент Даже несмотря на то, что мы занимаемся разработкой бесконечного скроллинга, вам нужно будет задуматься о URL-структуре. Эта URL-структура должна выдерживать естественный поток контента, необходимый для страницы. Помните, что вы разделяете процесс бесконечной прокрутки на странички, поэтому каждый отрезок контента должен представлять собой отдельную страницу с отдельным URL. В данном случае в URL желательно использовать ЧПУ, так как это помогает и живым посетителям, и поисковым ботам. Стандартный и типичный URL прекрасно подходит для этого: “great-world.ru/raskrutka-i-prodvizhenie/” Если, для того, чтобы поместить на страницу определенные атрибуты, вы добавите пагинацию или ID, то это также подойдет. Google утверждает, что принимаются следующие паттерны:

• example.com/fun-items?lastid=567
• example.com/fun-items#1

При структуризации URL следует избегать следующих вещей:

1. Не используйте параметры URL, основанные на относительном временном значении. Использование временных значений добавляет хронологическую сложность, которая, в свою очередь, снижает SEO-потенциал. К примеру, Google рекомендует не использовать следующую структуру URL: “example.com/page.php?name=fun-items&days-ago=2″ из-за значения “days-ago=2” в URL.
2. Не используйте кодовый язык в URL. Запутанные коды в ссылке значительно снижают восприятие текста реальными людьми. Google рекомендует не использовать следующие URL: “great-world.ru/raskrutka-i-prodvizhenie/radius=65&lat=20.31&long=-47.50.” В данном примере, вам желательно отказаться от всего, что следует после слова prodvizhenie.

Для сайтов на вордпрессе можно использовать готовые плагины, например Infinite-Scroll, Ajax Load More и др. которые сделаны с учетом этих рекомендаций. Этап 3: каждая страница должна содержать rel=”next” и rel=”prev” в заголовочной части Использование кодов пагинации в заголовочной части страницы позволит вам рассказать Google о том, что он также может индексировать контент с других страниц. Атрибуты rel информируют о связи между этими URL, и, соответственно, повышает шансы того, что бот перейдет по этим ссылкам и проиндексирует контент. На практике, rel-атрибуты позволяют ботам переходить дальше по странице с бесконечным скроллингом. Предлагаю вам ознакомиться со статьей на тему контента с пагинацией, а также о том, как использовать атрибуты rel. Этап 4: используйте pushState PushState – это метод HTML5, который сопровождает процесс загрузки данных. PushState вырисовывается из объектов и URL, при помощи которых подгружается новый контент, определенный в последовательности пагинации. В целом, pushState сообщает браузеру, что нужно загружать и отображать. Взгляните, как бесконечный скроллинг реализован в Twitter. С другой стороны, вы можете использовать метод replaceState – он позволяет изменить последовательность истории загрузки и реагировать на поведение пользователя при прокрутке контента. ReplaceState реагирует на прокрутку или позволяет пользователю открутить страницу назад, и посмотреть страницы, которые уже были подгружены в историю пагинации. Этап 5: используйте лучшие приемы SEO Таким образом, страница с бесконечным скроллингом не будет отличаться от страниц другого типа для поисковиков. Как только вы закончите с ней, у вас будет время на то, чтобы использовать максимально привлекательный контент, оптимизированный под ваши нужды.

Заключение

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