Исправление ошибок, связанных с отложенной загрузкой
Отложенная загрузка несущественного или невидимого контента (lazy loading) позволяет сделать ваш сайт более удобным и привлекательным для посетителей. Подробнее об этом рассказывается в руководстве по отложенной загрузке изображений и видео на сайте "Основы веб-дизайна". Если неправильно использовать эту функцию, доступ Google к вашему контенту может быть ограничен. Ниже описано, как убедиться в том, что контент с отложенной загрузкой доступен для сканирования и индексирования.
Загружайте контент, когда он находится в области просмотра
Убедитесь, что все материалы на вашей странице доступны нашим роботам. Для этого проверьте, загружается ли весь нужный контент по мере появления в области просмотра. Вы можете воспользоваться следующими средствами:
- встроенной в браузер функцией отложенной загрузки контента в окнах iframe и изображений;
- IntersectionObserver API и полифилами;
- библиотекой JavaScript, которая поддерживает загрузку контента при появлении в области просмотра.
Обязательно проверьте результат своей работы.
Обеспечьте поддержку постраничной загрузки для бесконечной прокрутки
Для реализации бесконечной прокрутки необходимо обеспечить постраничную загрузку контента. Такой способ загрузки дает пользователям возможность возвращаться к уже просмотренным материалам и делиться ими. Кроме того, он позволяет Google показывать ссылки на определенные элементы внутри контента, а не на стартовую страницу.
Предоставьте уникальные ссылки на каждый раздел, чтобы пользователи могли переходить по ним и делиться друг с другом. Рекомендуем использовать History API для обновления URL во время динамической загрузки контента.
Тест
При проверке используйте скрипт Puppeteer для локального тестирования. Библиотека Puppeteer для Node.js позволяет контролировать браузер Headless Chrome. Для работы скрипта необходим фреймворк Node.js. Выполните следующие команды для проверки скрипта и его запуска:
git clone https://github.com/GoogleChromeLabs/puppeteer-examples cd puppeteer-examples npm i node lazyimages_without_scroll_events.js -h
После запуска скрипта изучите созданные им скриншоты. Если на них представлен весь контент, который должен быть виден посетителям и индексироваться поисковыми роботами, значит всё в порядке.
Вы также можете узнать, все ли изображения загрузились, с помощью инструмента проверки URL в Search Console. Для этого сравните скриншот с обработанным HTML-кодом.