Краткий вывод
Что важно понять до чтения деталей
- Прокрутка не заменяет ссылки
- Каждой части нужен постоянный URL
- History API отражает видимую часть
- Fallback работает без JavaScript
01
Почему робот может увидеть только первый экран
Классическая реализация ждет, пока пользователь приблизится к нижней границе, затем отправляет JavaScript-запрос и добавляет карточки в DOM. Поисковый робот может отрендерить скрипты, но не воспроизводит все жесты и не гарантирует многократную прокрутку. В результате первая порция получает ссылки и контекст, а последующие товары существуют только внутри интерактивной сессии. Для большого каталога это означает слабое обнаружение и редкий обход глубоких карточек.
Проблема не решается увеличением первой порции до сотен объектов: страница становится тяжелой, LCP и INP ухудшаются, мобильный пользователь расходует трафик. Нужен прогрессивный подход: базовая структура работает как пагинация, а бесконечная прокрутка улучшает интерфейс. Тогда и робот, и человек получают подходящий способ навигации, не создавая две разные версии содержания.
02
Разбейте ленту на самостоятельные части
Каждый фрагмент должен иметь постоянный URL, который можно открыть напрямую и получить тот же набор объектов. Например, `?page=3` возвращает третью часть даже без истории предыдущих действий. Между частями существуют обычные ссылки вперед и назад. Они могут быть визуально заменены кнопкой «Показать еще» при работающем JavaScript, но остаются в HTML как надежный резерв и путь для обхода.
Границы частей должны быть стабильными. Если алгоритм случайно меняет сортировку, пользователь после возврата увидит другой набор, а робот обнаружит дубли и пропуски. Для новостной ленты полезна курсорная модель, однако курсор тоже должен давать воспроизводимый адрес и не содержать короткоживущий токен сессии. Для коммерческого каталога чаще понятнее номер страницы и фиксированная сортировка.
03
Как использовать History API без путаницы
Когда пользователь доходит до новой части, интерфейс может обновлять адрес через `history.pushState` или `replaceState`. URL в строке браузера должен соответствовать видимому фрагменту, чтобы его можно было сохранить и открыть повторно. Не создавайте запись истории на каждый пиксель прокрутки: кнопка «Назад» превратится в десятки шагов. Обычно адрес меняют при пересечении четкой границы страницы.
При загрузке URL `page=4` пользователь должен сразу попасть к началу четвертого набора, а не ждать автоматической прокрутки через три предыдущих. Состояние фильтров и сортировки сохраняют в адресе предсказуемо. После возврата из карточки желательно восстановить позицию. Это улучшает не только SEO, но и конверсию: покупатель не теряет место сравнения и продолжает выбор.
04
Кнопка «Показать еще» или автоматическая прокрутка
Кнопка дает пользователю контроль и обычно проще для доступности и производительности. Она ясно показывает, что список продолжится, и не сдвигает футер бесконечно. Автоматическая подгрузка подходит контентным лентам, но в каталоге может мешать добраться до контактов, фильтров и юридических ссылок. Выбор интерфейса не меняет технического требования: следующая часть доступна по ссылке и отдельному URL.
Хороший компромисс — несколько автоматических порций, затем явная кнопка, либо закрепленная навигация к футеру. Показывайте индикатор загрузки и обрабатывайте ошибку сети: карточки не должны исчезать молча. Если запрос не выполнился, пользователь видит повторную попытку, а базовая ссылка остается рабочей. Такой fallback особенно важен на мобильном интернете.
05
Canonical, метаданные и дубли
Части ленты, содержащие разные объекты, используют self-canonical. Не канонизируйте все на первый экран только потому, что пользователь визуально видит единую ленту. Серверная версия каждого URL должна иметь корректный title, доступный список и ссылки. При этом длинные SEO-тексты и оффер категории обычно остаются на первой части, чтобы не повторяться после каждого продолжения.
Следите за комбинациями фильтров и сортировок. Infinite scroll может незаметно генерировать адреса с разным порядком параметров, курсорами и временными ключами. Внутренние ссылки должны использовать одну каноническую форму, а служебные токены не попадать в индексируемый URL. Иначе удобная лента превращается в бесконечное пространство дублей.
06
Как протестировать реализацию
Откройте первую часть с отключенным JavaScript и убедитесь, что ссылка на следующую доступна. Затем напрямую загрузите средний URL и сравните набор карточек с тем, что появляется при прокрутке. Проверьте коды ответа, canonical, заголовки, сохранение фильтров, переход назад и поведение при ошибке API. Отдельно посмотрите отрендеренный HTML в инструментах поисковых систем.
Краулер должен находить конечные карточки без симуляции прокрутки. В аналитике отслеживайте глубину просмотра, клики по «Показать еще», переходы в карточки и покупки. Если пользователи листают много частей, но редко открывают товар, проблема уже не в индексации, а в сортировке, фильтрах или качестве карточек. SEO-настройка обеспечивает доступ; бизнес-метрики показывают, насколько этот доступ полезен.
Практика
Что проверить на своем сайте
- Разбить список на части
- Добавить HTML-ссылки
- Проверить прямую загрузку
- Настроить историю браузера
- Убрать временные токены
- Протестировать ошибки API
Применить к проекту
Что можно сделать после статьи
Если тема похожа на вашу ситуацию, следующий шаг простой: проверить сайт на спрос, структуру, технические ограничения и точки, где пользователь не доходит до заявки.
Источники
Какие источники использовали
Требования к ссылкам, URL страниц пагинации, canonical и последовательной загрузке каталога.
Google: отложенная загрузка контентаКак реализовать lazy loading так, чтобы контент был доступен поисковым роботам.
Google: основы JavaScript SEOОбход, рендеринг, ссылки, метаданные и ограничения JavaScript-сайтов.
