Убедитесь, что Google видит контент с отложенной загрузкой

Отложенная загрузка несущественного или невидимого контента (lazy loading) позволяет улучшить впечатление посетителей от вашего сайта. Подробнее об этом рассказывается в руководстве по отложенной загрузке изображений и видео на сайте "Основы веб-дизайна". Если неправильно использовать эту функцию, доступ Google к вашему контенту может быть ограничен. Ниже описано, как убедиться в том, что контент с отложенной загрузкой доступен для сканирования и индексирования.

Загружайте контент, когда он находится в области просмотра

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

  • IntersectionObserver API и полифилами;
  • библиотекой JavaScript, которая поддерживает загрузку контента при появлении в области просмотра.

Обязательно проверьте результат своей работы.

Обеспечьте поддержку постраничной загрузки для бесконечной прокрутки

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

Предоставьте уникальные ссылки на каждый раздел, чтобы пользователи могли переходить по ним и делиться друг с другом. Рекомендуем использовать History API для обновления URL во время динамической загрузки контента.

Проверьте, как работает отложенная загрузка

При проверке используйте скрипт Puppeteer для локального тестирования. Библиотека Puppeteer для Node.js позволяет контролировать консольный браузер Chrome. Для работы скрипта необходима платформа Node.js. Выполните следующие команды для проверки скрипта и его запуска:

git checkout https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

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

Вы также можете узнать, загрузились ли все изображения, с помощью инструмента проверки URL в Search Console. Для этого сравните то, что будет показано на скриншоте, с обработанным кодом HTML.