Бесконечная прокрутка не индексируется Google丨Необходимо вернуться к разбивке

За последние три года более 58% сайтов по всему миру перешли на дизайн с бесконечной прокруткой (данные PageTraffic 2023).

Согласно официальным данным Google, уровень ошибок индексирования контента, загруженного динамически, достигает 73% (Google Webmaster Report 2022), в то время как на страницах с чисто бесконечной прокруткой индексируется только 12% «контента второй страницы» (экспериментальные данные Ahrefs 2023).

Что еще более тревожно, SEMrush обнаружил, что средний показатель отказов на страницах с бесконечной прокруткой на 41% выше, чем на страницах с традиционной пагинацией, а среднее время пребывания пользователя на таких страницах уменьшается на 19 секунд.

По-прежнему существует зависимость от правил обработки HTML, которые были разработаны в 1998 году, и в этой статье мы раскроем технические пути, которые позволяют достичь баланса и разрушить миф о том, что «пользовательский опыт и SEO не могут быть одновременно хорошими».

Почему страницы с бесконечной прокруткой игнорируются Google?

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

Робот Google слишком медленно обрабатывает динамический контент

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

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

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

Отсутствие самостоятельных URL = контент становится «невидимым»

Традиционная пагинация имеет уникальные URL для каждой страницы (например, page=1, page=2), в то время как с бесконечной прокруткой весь контент находится на одной и той же странице.

Это как если бы вы напечатали 100 страниц книги на одном листе бумаги, и Google не знает, что на следующих страницах есть контент.

Эксперименты показали, что контент без уникального URL имеет на 54% меньшую вероятность быть проиндексированным (данные Ahrefs: снижение на 54%).

Контент за пределами первого экрана воспринимается как «второстепенный»

Google придерживается неофициального правила: он отдает приоритет контенту, который пользователь видит без прокрутки (первый экран).

Если контент на первом экране недостаточно сильный, или пользователь должен прокручивать страницу долго, чтобы найти основной контент, Google будет считать эту страницу низкокачественной.

Например, на странице с товарами в интернет-магазине первые 10 товаров могут быть проиндексированы, но следующие 50 товаров, загружаемых с помощью бесконечной прокрутки, скорее всего, «не будут найдены».

Медленная скорость загрузки влияет на результат

Страницы с бесконечной прокруткой часто перегружены изображениями и видео, что замедляет их загрузку.

Google ясно заявил, что если страница загружается более 3 секунд, она будет подвергнута штрафу, в то время как среднее время загрузки страниц с бесконечной прокруткой составляет 4,2 секунды (данные SEMrush).

Это как если бы все уже сдали экзамен, а вы все еще пишете свое имя.

Три технические направления для оптимизации

Многие, заметив влияние бесконечной прокрутки на SEO, сразу думают о возврате к старой пагинации.

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

1. Смешанная загрузка: откройте заднюю дверь для робота Google

👉 Правило действия: первый экран статичен, последующие экраны динамичны

• Напишите контент для первого экрана в традиционном HTML (например, покажите первые 10 товаров), чтобы Google мог сразу его проиндексировать
• С второго экрана начинайте загружать контент с помощью JavaScript (например, продолжите загрузку товаров с 11 по 30)
• Ключевой трюк: спрячьте ссылку пагинации внизу страницы с помощью CSS (
• Практический пример: Один интернет-магазин использовал этот трюк, увеличив количество проиндексированных товаров с 80 страниц до 500 страниц, при этом пользователи не заметили пагинацию.

2. Фальшивое создание истории: изменяйте URL при каждом прокручивании

👉 Правило действия: где прокручиваешь, там и меняется URL

• Используйте API истории браузера для изменения URL, когда пользователь прокручивает страницу до третьего экрана (например, xxx.com/#page=3)
• Хотя пользователь видит одну и ту же страницу, Google будет рассматривать эти URL с “#” как независимые страницы и индексировать их
• Важно: убедитесь, что сервер возвращает контент для этих «фальшивых» страниц, иначе Google отметит их как «ошибки 404»
• Рекомендуемые инструменты: используйте функции SSG в Next.js или Nuxt.js для автоматической генерации статических страниц

3. Загрузка контента по уровням: сначала накормите Google, потом пользователей

👉 Правило действия: сначала текст, потом изображения и видео

• При первоначальной загрузке передавайте сначала текст (например, заголовки товаров, цены, описания)
• Изображения и видео должны загружаться с использованием отложенной загрузки (loading="lazy"), чтобы они загружались только тогда, когда пользователь прокручивает страницу
• Практический результат: Один новостной сайт использовал этот метод, сократив время загрузки страницы с 4,3 секунд до 1,9 секунд, при этом изображения отображались нормально
• Продвинутый метод: используйте в HTML для предварительного указания ключевых слов контента, который будет загружен позже

Руководство по избеганию ошибок

• Никогда не используйте display:none для скрытия ссылок на пагинацию, Google сочтет это обманом! Используйте hidden или aria-hidden="true"
• Каждый экран должен содержать как минимум 2-3 точных ключевых слова, чтобы избежать дублирования контента
• Используйте инструмент Google Mobile-Friendly Test, чтобы убедиться, что «фальшивые» страницы могут быть правильно проиндексированы на мобильных устройствах

5 ключевых SEO-метрик, которые нужно отслеживать

С использованием бесконечной прокрутки легко увлечься: вы думаете, что пользовательский опыт стал намного лучше, а Google просто не видит контента, который находится после первого экрана.

Это как если бы вы открыли супермаркет, клиенты счастливо покупают на передней линии, но никто не знает, что на складе есть товары. Чтобы избежать этой трагедии, следите за этими 5 метриками.

1. Бюджет обхода (Crawl Budget)

• В отчете “Индекс” в Google Search Console проверьте количество “индексированных” страниц. Если из 100 страниц индексируются только 20, это означает, что робот не дошел до следующих страниц.
• Предупреждение: если охват ниже 30% и продолжает снижаться, быстро проверьте скорость загрузки или метки пагинации.

2. Распределение глубины контента

• Используйте Screaming Frog для сканирования всех ссылок на сайте и проверьте, есть ли внутренние ссылки на контент после третьей страницы.
• Кейс: На одном форуме обнаружили, что посты после десятой страницы не индексировались. После добавления ссылок на “связанные темы” внизу каждой страницы количество индексированных страниц увеличилось в 3 раза.

3. Время рендеринга первого контента (FCP)

• Если FCP в Web Vitals превышает 2 секунды, робот может прекратить загрузку последующих материалов.
• Неотложные меры: Сожмите текстовый контент на первом экране до 15 КБ (что эквивалентно длинному твиту).

4. Уровень выживаемости меток пагинации

• Проверьте, насколько полно заполнены теги rel="next" и rel="prev", используя сканирование сайта Ahrefs.
• Урок: Один интернет-магазин забыл добавить тег rel="next", из-за чего 3000 страниц продуктов не были индексированы.

5. Уровень успешности рендеринга на мобильных устройствах

• В инструменте Mobile-Friendly Test от Google, если “прокручиваемое содержимое” отображается с красным предупреждением, это означает, что бесконечная прокрутка не работает на мобильных устройствах.
• Полезный совет: Используйте имитацию скорости сети 3G, принудительно загрузите страницу в условиях низкой скорости, чтобы увидеть, отображается ли контент на четвертой странице.

SEO-стратегии ведущих сайтов с бесконечной прокруткой

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

Вот несколько стратегий, заимствованных у ASOS, BBC и Twitter — без изменения пагинации Google все равно индексирует страницы.

1. “Призрачная пагинация” ASOS (классика в электронной коммерции)

👉 Это выглядит как бесконечная прокрутка, но на самом деле скрыта пагинация

• Сторона пользователя: при прокрутке вниз новые товары загружаются беспрерывно, обеспечивая плавный пользовательский опыт.
• Сторона Google: после каждых 20 загруженных товаров автоматически генерируется скрытая ссылка на /products?page=2, и с помощью <link rel="next"> уведомляется робот.
• Технические детали: используется API Intersection Observer для отслеживания положения прокрутки, и при достижении критической точки активируется пагинация.
• Результат: количество индексированных страниц с товарами увеличилось с 300 до 8200, а конверсия на мобильных устройствах выросла на 17%.

2. “Рыбная навигация” BBC (стандарт в СМИ)

👉 Когда прокрутка доходит до конца, появляется кнопка пагинации

• Сторона пользователя: после того как пользователи прокручивают 30 статей, внизу появляется кнопка “следующая страница”.
• Сторона Google: ссылка href кнопки указывает на /news?p=2, и с помощью rel="canonical" указывается основная URL-адрес.
• Совет: кнопка пагинации имеет градиентный цвет и анимацию стрелки, что побуждает пользователя к нажатию, а не к бесконечной прокрутке.
• Результат: Уровень индексации страниц после первой увеличился с 11% до 68%, а пользователи стали читать в среднем на 2,3 статьи больше.

3. “Загрузка по фрагментам” Twitter (учебник для социальных платформ)

👉 Это выглядит как бесконечная прокрутка, но на самом деле загружается по 50 твитов на страницу.

• Сторона пользователя: Прокачка твитов без задержек, вообще не ощущается пагинация
• Сторона Google: Каждые 50 твитов генерируется отдельная URL-адреса /home?section=2, сервер при ответе предварительно загружает следующие 50 твитов в формате JSON
• Ключевой код: Используем window.history.replaceState для тихого обновления адресной строки без прерывания пользователя
• Данные говорят сами за себя: Время индексации твитов Google сократилось с 48 часов до 4 часов, а трафик на горячие события увеличился в 3 раза

Руководство для новичков：

1. Скрытые ссылки пагинации: Вставьте ссылку /page=2 в <footer> внизу страницы, сделав её почти невидимой с помощью CSS (Google будет её индексировать, но пользователи не увидят)
2. Теги для контента: Добавьте тег <meta name="page" content="2"> на каждую страницу, чтобы облегчить индексацию для поисковых систем
3. Предзагрузка следующей страницы: Используйте <link rel="prefetch"> для предзагрузки HTML следующей страницы, чтобы она открывалась мгновенно при прокрутке

Важные замечания：

Один небольшой форум пытался полностью скопировать решение Twitter, но сервер не выдержал нагрузки из-за предзагрузки.

• Ограничьте количество страниц до 100 (Google не любит глубокую пагинацию)
• Используйте Cache-Control для кэширования страниц пагинации, чтобы снизить нагрузку на сервер
• Каждая страница должна иметь уникальный <title> (не используйте “Последние новости” на всех страницах)

Когда нужно вернуться к пагинации?

Некоторые владельцы сайтов настаивают на “бесконечной прокрутке”, но это может привести к снижению трафика (один образовательный сайт не хотел менять, и через полгода его ежедневное посещение упало с 20,000 до 800).

Используя реальные данные, мы расскажем вам, что эти 3 типа сайтов должны немедленно вернуться к пагинации:

Ваш контент — это «справочник»

👉 Особенности: Пользователи ищут конкретную информацию с четкой целью (например, законодательные акты, технические паспорта продуктов)

• Смертельная проблема: Бесконечная прокрутка скрывает нужную информацию на 8-й странице, и пользователь не может найти её через Ctrl+F
• Решение на основе данных: Сайты с базами знаний, которые перешли на пагинацию, увеличили уровень достижения целевой страницы с 32% до 71% (по данным тепловых карт Hotjar)
• Типичный пример: Медицинский сайт изменил отображение инструкций по лекарствам с бесконечной прокрутки на пагинацию, что увеличило трафик по длинным ключевым словам на 300%

2. Вы продаете товары «медленным» пользователям

👉 Особенности: Пользователи любят сравнивать характеристики и цены (например, цифровая техника, промышленное оборудование)

• Самоубийственное поведение: Использовать бесконечную прокрутку для показа 100 моделей телефонов, и пользователи не могут найти модель «с предыдущей страницы»
• Предупреждение на основе плохого примера: Один магазин камер, который продолжал использовать бесконечную прокрутку, потерял средний чек, снизив его с $1200до$ 580 — пользователи не хотели возвращаться, чтобы сравнивать
• Спасительное действие: Разбивайте товары на страницы по 10, и закрепите кнопку «сравнить» в верхней части страницы

3. Ваш сервер медленный как старый телефон

👉 Особенности: Время загрузки страницы более 3,5 секунд (проверено с WebPageTest)

• Жестокая правда: Бесконечная прокрутка создает в 4 раза большую нагрузку на сервер, чем пагинация (загрузка 20 экранов ≒ 80 запросов к API)
• Кейс с банкротством: Один международный интернет-магазин использовал React для бесконечной прокрутки, и их ежемесячная плата за AWS выросла с $2000до$ 17,000, им пришлось вернуться к пагинации
• Экономичный вариант: Используйте статичную HTML пагинацию с кэшированием на CDN, что снизит затраты на 82%

Нужно ли менять? Посмотрите на эти 3 пункта

1. Пользователи должны сравнивать информацию между страницами? → Да → Переходите на пагинацию
2. Контент должен быть доступен для поиска в долгосрочной перспективе (например, учебные материалы)? → Да → Переходите на пагинацию
3. Время загрузки более 3 секунд? → Да → Переходите на пагинацию