Как отлаживать рендеринг JavaScript с помощью Search Console

Отладка рендеринга JavaScript в Google Search Console включает использование инструмента проверки URL для сравнения исходного HTML с окончательной отрисованной версией. Вы должны ввести URL, нажать «Проверить URL в реальном времени», а затем выбрать «Просмотреть отрисованную страницу», чтобы увидеть DOM. Это позволяет проверить, видит ли Googlebot ваш контент после выполнения скриптов, гарантируя правильную индексацию вашего текста, ссылок и структурированных данных.

Как Googlebot обрабатывает приложения JavaScript?

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

Как отлаживать рендеринг JavaScript с помощью Search Console

Служба веб-рендеринга (WRS) использует актуальную версию браузера Chromium для выполнения скриптов и построения окончательной структуры страницы. Только после завершения этого процесса система может увидеть полный текст и элементы навигации. Если ваши скрипты дают сбой или истекает время их ожидания во время этого этапа, индексатор может увидеть только пустой шаблон или значок загрузки.

Google обрабатывает веб-приложения JavaScript в три основных этапа: Сканирование Рендеринг Индексирование

Google Search Central

Можете ли вы точно увидеть, что рендерит Googlebot?

Инструмент проверки URL предоставляет прямое окно в механизм рендеринга. Используя функцию «Проверить URL в реальном времени», вы инициируете запрос в реальном времени от Googlebot. После завершения теста ссылка «Просмотреть отрисованную страницу» открывает боковую панель с тремя основными вкладками: HTML, Скриншот и Дополнительная информация.

Как отлаживать рендеринг JavaScript с помощью Search Console — 2

Вкладка HTML показывает объектную модель документа (DOM) после выполнения JavaScript. Вы должны скопировать этот текст и выполнить поиск конкретных названий продуктов или описаний, сгенерированных вашими скриптами. Если текст отсутствует на этой вкладке, но виден в вашем собственном браузере, скорее всего, возникает ошибка рендеринга.

  • Введите целевой URL в верхнюю строку поиска Search Console.
  • Нажмите кнопку «Проверить URL в реальном времени», чтобы получить актуальные данные.
  • Выберите «Просмотреть отрисованную страницу», чтобы изучить результаты.
  • Проверьте вкладку «Скриншот», чтобы убедиться, что макет выглядит правильно.
  • Просмотрите вкладку «Дополнительная информация» на наличие сообщений консоли и ошибок ресурсов.

Почему в отрисованном HTML отсутствует контент?

Контент часто не появляется, потому что Googlebot не может получить доступ к необходимым файлам скриптов. Если ваш файл robots.txt блокирует папки /static/ или /assets/, механизм рендеринга пропустит эти файлы. Это приводит к неполной странице. Вы можете найти эти заблокированные ресурсы на вкладке «Дополнительная информация» в разделе «Ресурсы страницы».

Другая распространенная проблема — тайм-аут выполнения. Googlebot не ждет бесконечно завершения скриптов. Если ваше приложение выполняет медленные вызовы API для получения данных, средство рендеринга может сдаться и проиндексировать страницу до того, как прибудет контент. Эффективность выполнения скриптов и быстрое время ответа сервера являются ключевыми факторами для успешной индексации.

Googlebot извлекает URL из очереди сканирования, выполняя HTTP-запрос, сначала он проверяет, разрешаете ли вы сканирование.

Google Search Central

Как Alien Road применяет аудиты рендеринга JavaScript

Наша команда в Alien Road использует систематический рабочий процесс для защиты наших клиентов от пробелов в индексации. Мы начинаем с сравнения результатов «Просмотреть исходный код страницы» с «Отрисованным HTML», найденным в Search Console. Мы ищем наличие основного контента, такого как сетки продуктов или текст статей, в отрисованной версии. Если мы находим несоответствие, мы используем журналы консоли в инструменте проверки URL, чтобы найти конкретную ошибку скрипта.

В типичном проекте для магазина Shopify мы обнаружили, что стороннее приложение отзывов не отображается для поисковых систем. Проверив раздел «Дополнительная информация», мы выяснили, что скрипт дает сбой из-за неподдерживаемой функции JavaScript. Мы порекомендовали подход на стороне сервера для этих отзывов. Эта корректировка обеспечила вклад отзывов в видимость сайта и позиции ключевых слов.

  • Проведите аудит файла robots.txt, чтобы убедиться, что все пути JS и CSS открыты.
  • Сравните соотношение текста и кода при первоначальном сканировании и живом тесте.
  • Выявите и исправить ошибки консоли, о которых сообщает WRS.
  • Убедитесь, что внутренние ссылки используют стандартные теги a-href вместо обработчиков кликов.
  • Задокументируйте все недостающие элементы для исправления командой разработчиков.

Является ли динамический рендеринг долгосрочным решением?

Динамический рендеринг когда-то был популярным способом предоставления ботам плоской HTML-версии страницы, в то время как пользователям предоставлялся полный интерфейс, насыщенный скриптами. Однако теперь Google считает это временным решением. Это усложняет настройку сервера и может привести к несоответствию контента, если обе версии не поддерживаются в синхронизированном состоянии.

Современная рекомендация заключается в использовании рендеринга на стороне сервера (SSR) или генерации статических сайтов (SSG). Эти методы гарантируют, что контент уже присутствует в HTML, когда Googlebot впервые запрашивает страницу. Это устраняет зависимость от очереди рендеринга и обеспечивает более быструю индексацию нового или обновленного контента.

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

Google Search Central

Каковы распространенные ошибки JavaScript в Search Console?

Вкладка «Дополнительная информация» часто перечислит исключения JavaScript, которые помешали правильной загрузке страницы. Распространенные ошибки включают проблемы с синтаксисом, которые версия Chromium не может проанализировать, или сбои при получении внешних API. Кроме того, если скрипт полагается на взаимодействие с пользователем, такое как клик или прокрутка для загрузки контента, Googlebot, скорее всего, пропустит этот контент, так как он не выполняет эти действия.

Вы также можете увидеть ошибки «Soft 404», вызванные скриптами. Если ваше приложение показывает сообщение «Продукт не найден» через JavaScript, возвращая при этом код состояния 200 OK, Google все равно может проиндексировать страницу как 404. Просмотр отрисованного скриншота помогает увидеть, попадает ли бот в эти состояния ошибки вместо фактического контента.

Практические шаги для вашего веб-сайта на этой неделе

Чтобы убедиться, что ваш сайт здоров, выберите пять самых важных целевых страниц и пропустите их через инструмент проверки URL. Посмотрите конкретно на вкладку HTML и найдите свои основные ключевые слова. Если их там нет, у вас есть проблема с рендерингом, требующая немедленного внимания со стороны вашей технической команды.

  • Убедитесь, что ваши основные навигационные ссылки видны в отрисованном HTML.
  • Убедитесь, что ваши изображения имеют теги alt, присутствующие в DOM после рендеринга.
  • Убедитесь, что мета-теги и структурированные данные правильно внедрены вашими скриптами.
  • Исправьте любые «красные» ошибки ресурсов на панели «Дополнительная информация».
  • Протестируйте свой сайт на разных устройствах с помощью инструмента проверки оптимизации для мобильных устройств, который использует тот же средство рендеринга.
Поделиться