Хотя внедрение Infinite Scroll может быть полезным, важно, чтобы при его реализации учитывались лучшие практики SEO и удобства использования.
Бесконечная прокрутка все чаще используется в веб-дизайне. Фактически, многие компании выбирают эту функцию для своих веб-сайтов либо для того, чтобы предоставить пользователям новый опыт, либо чтобы быть в курсе последних цифровых тенденций. Хотя внедрение Infinite Scroll может быть полезным, важно, чтобы при его реализации учитывались лучшие практики SEO и удобства использования.
Главная проблема: индексирование
С точки зрения SEO, одной из основных проблем, с которой вы можете столкнуться при попытке реализовать бесконечную прокрутку, является индексация. Проблема связана с тем, что Google не разрешает загрузку JavaScript отображать контент, найденный под веб-страницей, запрограммированной на бесконечную прокрутку. В результате, когда поисковая система попадает на вашу веб-страницу, она видит только тот контент, который впервые представлен пользователю; контент, который виден без необходимости прокрутки. Чтобы устранить этот недостаток, вы должны помочь Google обнаружить все содержимое вашего веб-сайта, чтобы эффективно индексировать ваш веб-сайт и повысить видимость между внутренними страницами. Вы можете сделать это, реализовав стратегию взаимосвязи.
Взаимосвязь: решение проблемы индексации
Стратегия перелинковки необходима для обеспечения эффективной индексации страниц вашего сайта. Разрешив Google эффективно сканировать внутренние страницы, вы можете гарантировать, что авторитет домена вашего сайта останется высоким.
Классическая нумерация страниц
Первый шаг к эффективной стратегии связывания ссылок (при реализации бесконечной прокрутки) - использование системы классической нумерации страниц. Пагинация не только обеспечивает лучшее сканирование страниц (как упоминалось выше), но также необходима пользователям, которые по какой-либо причине отключили отображение JavaScript в своем веб-браузере.
Применяя классическую систему навигации, мы помогаем Google получить доступ ко всему содержимому вашего веб-сайта. В результате в поисковых системах ваш веб-сайт выглядит совершенно нормально без каких-либо сторонних технологий, таких как бесконечная прокрутка. Вам больше не придется беспокоиться о том, что ваш контент будет обнаружен.
Ниже приведены практические советы о том, как реализовать классическую нумерацию страниц с помощью бесконечной прокрутки.
Как видно из изображения выше, ключом к успешной нумерации страниц является разделение контента на уникальные сегменты, при этом тщательно избегая возможности дублирования контента. Далее, необходимо иметь уникальный URL-адрес для каждой страницы (например, site.com/page/1, site.com/page/2 и т. д.) и уникальный заголовок для каждой страницы (например, веб-сайт - страница 1, веб-сайт - страница 2)., и т. д.). Необходимо предоставить поисковым системам и пользователям навигационные нумерованные ссылки на другие страницы. Должна быть хотя бы одна ссылка «Назад» и одна ссылка «Далее».
Кроме того, вы должны использовать метатеги REL и CANONICAL в системе нумерации страниц, чтобы правильно сегментировать процесс, гарантировать отсутствие проблем с просмотром и индексированием, а также избежать возможности дублирования страниц. Вы также должны убедиться, что все запрещенные страницы выдают ошибку 404. Почему?
“Слишком сложный или загадочный код JavaScript также может помешать полному и точному отображению страницы”. - Центральный блог Google для веб-мастеров, 23 мая 2014 г.
Слишком сложно или загадочно?
Без классической нумерации страниц бот Google не сможет получить доступ к вашему контенту. Бесконечная прокрутка требует взаимодействия с прокруткой, которое робот теоретически не может выполнить. Никакой прокрутки, никакого контента. Нет контента - нет результатов поиска.
Другие связующие элементы
Ниже приведен список других ключевых элементов, которые необходимо реализовать для обеспечения правильной индексации:
- Хорошо сегментированная категоризация: Сегментация вашего контента должна быть соответствующим образом структурирована с помощью категорий и тегов.
- Хорошо структурированные меню: Не бойтесь включать в свои меню все внутренние страницы, которые, по вашему мнению, уместны (категории, теги, статьи и т. д.)
- Модуль связывания: Эффективным и популярным методом реализации хорошей стратегии связывания является использование автоматического модуля. Например, вставка скрипта «похожая запись» или «случайные статьи» в конце статьи блога позволит широко распространить страницы с высоким авторитетом домена. Это обеспечивает оптимальную индексацию и дает новый импульс забытым старым статьям.
- Избегайте ссылок nofollow: Удивительно, но многие сайты используют атрибут nofollow в своих внутренних ссылках. По сути, такая практика указывает Google на то, что вы не доверяете внутренним страницам вашего сайта.
- Sitemap: Добавление карты сайта на ваш сайт поможет его индексированию.
Бесконечная прокрутка как прогрессивное улучшение
Бесконечная прокрутка должна быть реализована как «прогрессивное улучшение»; то есть он должен функционировать как дополнительная функция, доступная пользователям, которые его поддерживают, без наказания других или изменения технической структуры сайта.
Асинхронная загрузка
Для «постепенно улучшающейся» реализации бесконечная прокрутка должна загружать необходимые элементы JavaScript, необходимые для асинхронной работы. Вот обзор бесконечной прокрутки в асинхронном режиме:
- Пользователь запрашивает страницу (например: site.com/page/3) и получает содержимое этой страницы.
- Когда при прокрутке достигается предел содержимого, запускается функция JavaScript, требующая нового содержимого с сервера.
- Когда сервер отвечает новым содержимым, другая функция JavaScript интерпретирует данные и вставляет их в HTML-страницу.
- Когда необходимо загрузить больше контента, сервер отвечает сообщением об ошибке 404, которое не будет показано пользователю. Вместо этого мы опубликуем уведомление о том, что контент исчерпан. Эта функция работает как для прокрутки вверх, так и для прокрутки вниз.
Предварительная загрузка и кеширование
Асинхронная загрузка может привести к задержкам отображения контента в зависимости от времени ответа сервера. Поэтому мы должны использовать предварительную загрузку и кеширование. Цель предварительной загрузки - превентивная загрузка соседнего контента, чтобы минимизировать время загрузки нового контента. Целью кэширования является сохранение асинхронно загруженного контента в памяти.
Состояния просмотра
1. API истории (или «РАДИ БОГА, НЕ НАРУШАЙТЕ КНОПКУ НАЗАД»)
Бесконечная прокрутка - это определенно плюс для непрерывной навигации, но как насчет «сегментированной» навигации? Если пользователь прокручивает несколько разделов, находит интересную ссылку и нажимает на нее, а затем возвращается к бесконечной прокрутке, что происходит?
Если пользователь посещает ваш сайт, уходит, а затем возвращается через несколько дней и пытается найти определенный фрагмент контента, каков его опыт? Как они узнают, куда идти? Ответы на эти вопросы можно найти в History.pushState.
2. History.pushState
History.pushState позволяет динамически изменять URL-адрес в адресной строке. Когда пользователь прокручивает страницу и достигает нового раздела, адресная строка изменится. Затем pushState создает новое состояние в истории навигации браузера. Если пользователь нажмет кнопку «Назад», это будет соответствовать предыдущему URL-адресу, который мы заполнили через pushState.
history.pushState(stateObject, title, URL);
window.onpopstate=функция(событие) {
window.location=window.location; }
Такие сайты, как Facebook и 9gag, демонстрируют важность этой практики. Если вы прокрутите страницу сайта с помощью Infinite Scroll далеко вниз, а затем случайно нажмете кнопку «Назад» и сразу вернетесь на сайт, вы вернетесь в самый верх прокрутки, а не туда, где вы остановились.
Преимущества SEO?
Реализация бесконечной прокрутки, если она хорошо зарекомендовала себя, не повлияет на SEO-эффективность веб-сайта. Однако основное преимущество заключается в оптимизации конверсий (в зависимости, конечно, от целей рассматриваемого веб-сайта!).
Например, одним из наиболее задокументированных случаев является случай с журналом TIME, которому удалось снизить показатель отказов на 15 процентов просто за счет внедрения бесконечной прокрутки. Причина в том, что когда пользователи заходят на сайт Time.com, они просматривают несколько разных страниц с контентом, не осознавая, что меняли страницы несколько раз. Это увеличивает вероятность того, что во время посещения они просмотрят множество страниц с контентом на веб-сайте. Главный урок, извлеченный из всего этого, заключается в том, что пользователь чрезвычайно ленив, и вы должны сделать так, чтобы ему было как можно проще просматривать ваш контент!
Таким образом, реализация бесконечной прокрутки на вашем веб-сайте может позволить вам снизить показатель отказов и увеличить количество просматриваемого контента, а также количество просмотров страниц. Это может быть чрезвычайно интересно для сайтов, основной доход которых приносит реклама с CPM-объявлениями (если реклама перезагружается, когда пользователи меняют страницы с помощью Infinite Scroll).
Вывод
Подводя итог, можно сказать, что внедрение бесконечной прокрутки на вашем веб-сайте может улучшить взаимодействие с пользователем и увеличить конверсию, при условии, что вы следуете лучшим практикам веб-разработки. Следуя советам, изложенным в этой статье, вы можете легко не попасть в ловушку отказа от индексации. Вы также сможете придать больший вес своим внутренним страницам и гораздо легче достичь своих целей по конверсии. Бесконечная прокрутка поможет добиться конверсий, если ее настроить на основе лучших практик UX.
Фрэнсис Руссен, заслуженный консультант по СМИ, и Филипп Вашон-Ривар, фронтенд-разработчик iProspect, также внесли свой вклад в эту публикацию.