Начало работы с динамическим отображением

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

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

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

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

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

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

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

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

  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. С помощью проверки оптимизации для мобильных устройств убедитесь, что Google доступна версия контента для мобильных устройств.

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

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

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

    done Все в порядке. Контент отображается правильно.

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

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

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

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

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

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

Контент неполон или выглядит по-другому

error Причина проблемы. Средство отображения настроено неправильно или веб-приложение несовместимо с ним. Иногда некорректное отображение бывает вызвано слишком долгим ожиданием.

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

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

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

done Решение

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

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

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

done Решение

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

Оставить отзыв о...

Текущей странице