Динамический рендеринг с Rendertron

Четверг, 31 января 2019 г.

Многие фронтенд-фреймворки полагаются на JavaScript для отображения контента. Это может означать, что Google может потребоваться некоторое время для индексации вашего контента или обновления проиндексированного контента.

Обходной путь, который мы обсуждали на Google I/O
в этом году, — это
динамический рендеринг. Существует множество способов реализовать это. В этом блоге показан пример реализации динамического рендеринга с использованием
Rendertron, который является решением с открытым исходным кодом на базе headless Chromium.

Какие сайты должны рассмотреть динамический рендеринг?

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

, например.
Динамический рендеринг полезен для контента, который часто меняется и требует JavaScript для отображения. Пользовательский опыт вашего сайта (особенно время допервой значимой отрисовки
) может выиграть от рассмотрения гибридного рендеринга (например,).

Angular Universal

).
Как работает динамический рендеринг?

Динамический рендеринг
означает переключение между контентом, отрендеренным на стороне клиента, и предварительно отрендеренным контентом для определенных пользовательских агентов. Вам понадобится рендерер для выполнения JavaScript и создания статического HTML. Rendertron — это проект с открытым исходным кодом, который использует headless Chromium

для рендеринга. Одностраничные приложения (SPA) часто загружают данные в фоновом режиме или откладывают работу по рендерингу своего контента. У Rendertron есть механизмы для определения того, когда веб-сайт завершил рендеринг. Он ждет, пока все сетевые запросы не будут завершены и не останется никакой незавершенной работы.

1. Этот пост охватывает:
2. Взгляните на пример веб-приложения Настройте небольшой сервер express.js
3. для обслуживания веб-приложения

Установите и настройте Rendertron в качестве промежуточного ПО для динамического рендеринга

Пример веб-приложения
Веб-приложение “kitten corner”

использует JavaScript для загрузки различных изображений кошек из API и отображает их в сетке.

Вот JavaScript:
Веб-приложение использует современный JavaScript (ES6), которыйеще не поддерживается в Googlebot
. Мы можем использовать тест на удобство для мобильных устройств

, чтобы проверить, может ли Googlebot видеть контент:

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

Настройте сервер
Чтобы обслуживать веб-приложение, давайте используем библиотеку, a express
node.js

для создания веб-серверов.
Код сервера выглядит так (найдите
полный исходный код проекта

здесь):
Вы можете попробовать живой пример
- вы должны увидеть кучу изображений кошек, если используете современный браузер. Чтобы запустить проект со своего компьютера, вам нужен node.js

для выполнения следующих команд:
Затем направьте свой браузер наhttps://localhost:8080

. Теперь пришло время настроить динамический рендеринг.

Разверните экземпляр Rendertron
Rendertron запускает сервер, который принимает URL и возвращает статический HTML для этого URL с использованием headless Chromium. Мы будем следовать
рекомендации проекта Rendertron
и использовать.

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

1. ценами Google Cloud Platform
   .Создайте новый проект в
2. консоли Google Cloud . Запишите “ID проекта” под полем ввода.
   Установите
3. Google Cloud SDK, как описано в документации
4. и войдите в систему.
5. Клонируйте репозиторий Rendertron с GitHub с помощью: Выполните следующие команды, чтобы установить зависимости и собрать Rendertron на своем компьютере: Включите кэш Rendertron, создав новый файл с именем
6. config.json
   в каталоге rendertron со следующим содержимым: Выполните следующую команду из каталога rendertron. Замените
7. YOUR_PROJECT_ID
8. на ваш ID проекта из шага 1. Выберите регион по вашему выбору и подтвердите развертывание. Дождитесь завершения. Введите URL YOUR_PROJECT_ID.appspot.com. Вы должны увидеть интерфейс Rendertron с полем ввода и несколькими кнопками.

Когда вы увидите веб-интерфейс Rendertron, значит, вы успешно развернули свой собственный экземпляр Rendertron. Запишите URL вашего проекта (YOUR_PROJECT_ID.appspot.com), так как он понадобится вам в следующей части процесса.

Добавьте Rendertron на сервер

Веб-сервер использует express.js , а у Rendertron есть express.js
middleware. Выполните следующую команду в каталоге файла server.js :

Эта команда устанавливает rendertron-middleware из npm, чтобы мы могли добавить его на сервер:

Настройте список ботов

Rendertron использует заголовок HTTP user-agent , чтобы определить, исходит ли запрос от бота или из браузера пользователя. У него есть
хорошо поддерживаемый список пользовательских агентов ботов
для сравнения. По умолчанию этот список не включает Googlebot, потому что Googlebot может выполнять JavaScript. Чтобы Rendertron также рендерил запросы Googlebot, добавьте Googlebot в список пользовательских агентов:

Rendertron позже сравнивает заголовок user-agent с этим регулярным выражением.

Добавьте middleware

Чтобы отправлять запросы ботов на экземпляр Rendertron, нам нужно добавить middleware на наш сервер
express.js . Middleware проверяет запрашивающий пользовательский агент и пересылает запросы от известных ботов на экземпляр Rendertron. Добавьте следующий код в server.js и не забудьте заменить YOUR_PROJECT_ID на ID вашего проекта в Google Cloud Platform:

Боты, запрашивающие пример веб-сайта, получают статический HTML от Rendertron, поэтому ботам не нужно выполнять JavaScript для отображения контента.

Тестирование нашей настройки

Чтобы проверить, была ли настройка Rendertron успешной, снова запустите тест на удобство для мобильных устройств.

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

Заключение

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

Опубликовано Martin Splitt, Open Web Unicorn