Настройка динамической отрисовки

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

Сайты, для которых рекомендуется динамическое отображение

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

Принцип работы динамического отображения

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

Схема работы динамического отображения. На схеме показано, как сервер отправляет исходный контент в формате HTML и JavaScript напрямую в браузер. Ниже показано, как контент в формате HTML и JavaScript передается в средство отображения, которое генерирует на его основе статический HTML-код. Этот код затем передается поисковому роботу.

Отличия динамического отображения от маскировки

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

Когда вы настраиваете динамическую отрисовку, на страницах вашего сайта могут появляться сообщения об ошибках. Googlebot обрабатывает такие страницы по стандартному сценарию и не воспринимает их как маскировку.

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

Настройка динамического отображения

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

  1. Установите и настройте средство динамического отображения. Оно преобразует ваш контент в статический HTML-код, который проще анализировать поисковым роботам. Примеры таких средств: Puppeteer, Rendertron и prerender.io.
  2. Укажите агенты пользователя, которым должен передаваться статический HTML-код. Вы можете добавить новые агенты или изменить параметры существующих в зависимости от своей конфигурации. Вот пример списка популярных агентов пользователя в промежуточном ПО Rendertron:
    export const botUserAgents = [
      'googlebot',
      'google-structured-data-testing-tool',
      'bingbot',
      'linkedinbot',
      'mediapartners-google',
    ];
  3. Если вы заметили, что предварительное отображение создает высокую нагрузку на сервер или количество запросов на предварительное отображение значительно выросло, создайте кеш статического контента и убедитесь, что вы обрабатываете запросы только от действительных роботов.
  4. Определите, какой тип контента запрашивают агенты пользователя ‒ для компьютера или для мобильных устройств. Используйте динамический показ, чтобы отображать корректные версии страниц. Вот пример конфигурации, в которой сервер определяет нужный тип контента:
    isPrerenderedUA = userAgent.matches(botUserAgents)
    isMobileUA = userAgent.matches(['mobile', 'android'])
    
    if (!isPrerenderedUA) { } else { servePreRendered(isMobileUA) }
  5. Настройте сервер таким образом, чтобы он передавал выбранным роботам статический HTML-код. Это можно сделать несколькими способами. Вот некоторые из них:
    • Передавайте запросы от роботов в средство динамического отображения через прокси-сервер.
    • Реализуйте механизмы предварительного отображения на этапе развертывания сервера, чтобы роботы могли сразу получать статический HTML-контент.
    • Добавьте динамическое отображение в код сервера.
    • Отправляйте роботам статический контент из сервиса предварительного отображения.
    • Используйте на сервере промежуточное ПО (например, Rendertron).

Проверка конфигурации

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

  1. Проверьте оптимизацию для мобильных устройств и убедитесь, что роботу Googlebot доступен нужный контент.

    done Всё в порядке. Контент демонстрируется пользователям мобильных устройств именно так, как вы планировали.

    error Ошибка. Если контент показывается некорректно, перейдите к разделу Устранение неполадок.

  2. С помощью инструмента проверки URL выясните, доступна ли роботу Googlebot версия контента для компьютеров.

    done Всё в порядке. Контент демонстрируется пользователям компьютеров именно так, как вы планировали.

    error Ошибка. Если контент показывается некорректно, перейдите к разделу Устранение неполадок.

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

    done Всё в порядке. Структурированные данные обрабатываются именно так, как вы планировали.

    error Ошибка. Если структурированные данные интерпретируются некорректно, перейдите к разделу Устранение неполадок.

Устранение неполадок

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

Видна только часть контента, или он выглядит по-другому

error Причина проблемы. Отрисовщик настроен неправильно, или веб-приложение несовместимо с ним. Иногда к некорректной отрисовке может приводить слишком долгое ожидание сетевого ответа.

done Решение. Найдите советы по устранению ошибок динамической отрисовки в документации вашего отрисовщика.

Долгое время отклика

error Причина проблемы. Зачастую приходится долго ждать отклика, если для отрисовки страницы по запросу используется консольный браузер. В результате поисковый робот может отменить запрос, и ваш контент не будет проиндексирован. Кроме того, роботы могут реже сканировать и индексировать сайты, которые медленно отвечают.

done Как устранить проблему

  1. Настройте кеширование предварительно генерируемых HTML-страниц или создавайте статическую HTML-версию контента на стадии разработки.
  2. Сделайте кеш доступным для роботов, например перенаправив их на него.
  3. Убедитесь, что роботы получают контент достаточно быстро. Вы можете использовать такие инструменты, как проверка оптимизации для мобильных устройств и WebPageTest. Во втором случае вам нужно будет указать строку агента пользователя из списка агентов пользователя роботов Google. Следите, чтобы время ожидания не истекало до получения ответа на запрос.

Отрисовка веб-компонентов выполняется некорректно

error Причина проблемы. Теневое дерево DOM (shadow DOM) изолировано от остальной части страницы. Средства отрисовки, такие как Rendertron, не считывают контент в элементах такого дерева. Подробные сведения об этом доступны в рекомендациях по веб-компонентам.

done Как устранить проблему

  1. Загрузите полифилы webcomponents.js для специальных элементов и Shadow DOM.
  2. Выполните проверку оптимизации для мобильных устройств или используйте инструмент проверки URL, чтобы убедиться, что контент появляется в обработанном HTML вашего средства отрисовки.

Отсутствуют структурированные данные

error Причина проблемы. Со структурированными данными могут возникнуть неполадки, если не указан агент пользователя или в конечном коде отсутствуют теги скрипта JSON-LD.

done Как устранить проблему

  1. С помощью инструмента проверки структурированных данных убедитесь, что на странице есть структурированные данные. Затем настройте агент пользователя для проверки структурированных данных, чтобы протестировать предварительно отрисованный контент.
  2. Убедитесь, что динамически сгенерированный HTML-код содержит теги скрипта JSON-LD. Дополнительную информацию можно найти в документации к вашему средству отрисовки.