Бесконечная прокрутка и SEO: как реализовать SEO-дружественное решение

1. Почему функциональность JavaScript требует сначала прочной веб-сборки
2. Какова была наша цель?
3. Как включить и выключить JavaScript, чтобы определить, как сканеры «видят» ваш сайт
4. Шаг 1 - мы реализовали разбиение на страницы HTML
5. Шаг 2 - Реализация pushState
6. Решение

Время от времени клиент eCommerce приходит к Impression с более необычной технической проблемой, связанной с SEO, которая выходит за рамки стандартного аудита SEO.

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

Наш соучредитель Аарон Дикс сделал именно это в феврале 2016 года, когда мы с ним решили вопрос о создании пользовательских канонических тегов через Magento для нашего крупного интернет-магазина. Он завершил это подробным описанием нашей прошлый год ,

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

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

Однако проблема в этом случае была не в том, как пользователь воспринимал бесконечную прокрутку, а в том, как ее воспринимал робот Google.

Почему функциональность JavaScript требует сначала прочной веб-сборки

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

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

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

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

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

Какова была наша цель?

Проще говоря, для повышения эффективности сканирования и распределения ссылок.

Еще до обнаружения ошибок, связанных с бесконечной прокруткой, наш клиент был заядлым пользователем тегов «nofollow» в их внутренних структурах ссылок - если быть точным, 14K ссылок nofollow.

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

После того, как мы работали с их разработчиком над решением проблемы «nofollow», мы столкнулись с дальнейшими проблемами эффективности сканирования, когда OnPage.org сообщал о 4,5 тыс. Страницах без внутренних ссылок.

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

Как включить и выключить JavaScript, чтобы определить, как сканеры «видят» ваш сайт

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

Чтобы отключить JavaScript через Google Chrome, вам нужно получить доступ к панели элементов. Доступ к нему можно получить, щелкнув правой кнопкой мыши в любом месте страницы и выбрав « Осмотреть ».

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

После открытия представления « Настройки» необходимо найти « Отладчик» и установить флажок « Отключить JavaScript» . Это показано на скриншоте ниже:

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

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

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

Необработанные ссылки означают разбавленный капитал ссылок, что, в свою очередь, означает ослабленную эффективность сканирования - печальные времена для оптимизаторов SEO и наших клиентов! 😔

На этом этапе нам нужно было поработать над SEO-дружественным решением с бесконечной прокруткой. Вот как мы это сделали.

Шаг 1 - мы реализовали разбиение на страницы HTML

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

После того, как была разбита страница на страницы, мы связали все страницы компонентов, используя директивы Google rel = ”next” и rel = ”prev”, чтобы четко обозначить взаимосвязь между всем содержимым, разбитым на страницы. Дополнительную документацию по rel = ”next” и rel = ”prev” и общие рекомендации Google по разбивке на страницы можно найти Вот ,

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

Шаг 2 - Реализация pushState

Как только мы реализовали разбиение на страницы HTML, мы «спрятали» это с помощью JavaScript и снова включили бесконечную прокрутку.

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

На этом этапе продукты страницы 2 были задействованы при использовании HTML5 для перемещения новых разбитых на страницы URL-адресов в адресную строку браузера. Чтобы определить, правильно ли он установлен, вы сможете увидеть изменение URL-адресов в окне браузера, например, / category-page / page / 2, / category-page / page / 3.

Чтобы завершить реализацию, нам также нужно было отследить это поведение с помощью Google Analytics. Здесь мы использовали GA, передающий виртуальный просмотр страницы на разбитые на страницы URL-адреса, как показано ниже:

ga («отправить», «просмотр страницы», location.pathname + »/ page / 2 /»);

Решение

Джон Мюллер собрал полезный пример того, как все это сочетается здесь: http://scrollsample.appspot.com/items

(Прокрутите страницу вниз, чтобы увидеть, как изменился URL-адрес, и отключите JavaScript, чтобы увидеть, как работает HTML-нумерация страниц в фоновом режиме.)

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

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