Исправление отложенно загружаемого контента

Отсрочка загрузки некритичного или невидимого контента, также широко известная как «отложенная загрузка» (lazy-loading), является общепринятой практикой для повышения производительности и улучшения UX. Для получения дополнительной информации см. ресурсы web.dev по отложенной загрузке изображений и видео.
Однако при неправильной реализации эта техника может непреднамеренно скрыть контент от Google. В этом документе объясняется, как убедиться, что Google может сканировать и индексировать отложенно загружаемый контент.

Загрузка контента при его появлении во вьюпорте

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

• Встроенная в браузер отложенная загрузка для изображений и ифреймов
• API IntersectionObserver и полифилл (polyfill)
• Библиотека JavaScript, поддерживающая загрузку данных при их попадании во вьюпорт

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

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

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

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

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

• Присвойте каждой части собственный постоянный уникальный URL.
• Убедитесь, что контент, отображаемый на каждом URL, остается неизменным при каждой загрузке в браузере. Один из способов сделать это — использовать абсолютные номера страниц в URL, например, используя
  ?page=12 в качестве параметра запроса.
• Избегайте использования относительных элементов, таких как ?date=yesterday в этих URL. Это позволяет поисковым системам и пользователям стабильно находить один и тот же контент по заданному URL, что облегчает поисковым системам правильную индексацию контента, а пользователям — обмен ссылками на эту часть вашего контента и возврат к ней.
• Связывайте отдельные URL последовательно, чтобы поисковые системы могли обнаруживать URL в постраничном наборе. Узнайте больше о
  лучших практиках реализации нумерации страниц.
• Когда новая часть страницы загружается в ответ на прокрутку пользователя и становится основным видимым для пользователя элементом, обновите отображаемый URL с помощью
  API History.
  Это позволяет пользователю обновлять текущий URL, отображаемый в браузере, делиться им и ссылаться на него.

Тестирование

После настройки убедитесь, что все работает правильно.
Вы можете использовать инструмент проверки URL в Search Console, чтобы проверить, весь ли контент был загружен.
Проверьте отрендеренный HTML, чтобы убедиться, что ваш контент присутствует в нем, найдя его с помощью инструмента проверки URL. Если URL ваших изображений или видео появляются в атрибуте src для элементов <img> или <video> в отрендеренном HTML, ваша настройка работает правильно.