Infinite scroll в SEO

Infinite scroll подгружает контент при прокрутке. Пользователю удобно, а робот не умеет скроллить. Он видит только тот HTML, который отдал сервер.

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

Первый способ - отдавать контент в HTML. Пусть первые блоки будут в коде сразу, а остальные подгружаются через JavaScript.

Второй способ - сделать отдельные страницы с пагинацией, которые доступны по ссылкам. Например, /blog?page=2. Эти страницы можно закрыть от индексации, но оставить для робота как источник контента.

Вот пример: в HTML есть контейнер, а ссылки на страницы пагинации скрыты для пользователя, но видны роботу:

<div id="feed">
	<div class="post">Post 1</div>
	<div class="post">Post 2</div>
</div>
<div class="hidden-pagination">
	<a href="/blog?page=2">2</a>
	<a href="/blog?page=3">3</a>
</div>

Ссылки можно скрыть через CSS, но не через display: none, потому что некоторые роботы игнорируют такой контент. Лучше вынести их за пределы видимой области или использовать position: absolute с отрицательным отступом.

Третий способ - prerender или серверный рендеринг. Тогда робот получает готовый HTML со всеми блоками.

Если у вас чистый infinite scroll без отдельных URL, робот увидит только первый экран. Это плохо. Нужно добавить ссылки на отдельные страницы или отдавать контент в HTML.

Простой прием: каждая подгружаемая порция имеет свой URL. Например, /feed?after=123. Эта страница отдает HTML с новыми блоками. Робот может ее обойти.

Если рядом есть и лента, и страницы пагинации, укажите канонический адрес, чтобы не было дублей:

<link rel="canonical" href="https://example.com/blog?page=2">

Практические задачи

Расскажите, почему робот не видит контент, который подгружается через infinite scroll.

Дана верстка:

<div id="feed">
	<div class="post">Post 1</div>
	<div class="post">Post 2</div>
</div>

Добавьте скрытую пагинацию, чтобы робот мог обойти все страницы. Используйте ссылки на /feed?page=2 и /feed?page=3.

Что делать, если у вас бесконечная лента без отдельных URL? Назовите два способа сделать контент доступным для робота.

Зачем при infinite scroll нужен canonical, если рядом есть страницы пагинации?