Rendu dynamique avec Rendertron

Jeudi 31 janvier 2019

De nombreux frameworks frontend s’appuient sur JavaScript pour afficher du contenu. Cela peut signifier que Google peut mettre un certain temps à indexer votre contenu ou à mettre à jour le contenu indexé.

Une solution de contournement dont nous avons discuté à Google I/O
cette année est
le rendu dynamique. Il existe de nombreuses façons de mettre cela en œuvre. Cet article de blog montre un exemple d’implémentation du rendu dynamique en utilisant
Rendertron, qui est une solution open source basée sur Chromium headless.

Quels sites devraient envisager le rendu dynamique ?

Tous les moteurs de recherche ou bots de réseaux sociaux visitant votre site web ne peuvent pas exécuter JavaScript. Googlebot
peut mettre du temps à exécuter votre JavaScript et présentecertaines limitations

, par exemple.
Le rendu dynamique est utile pour le contenu qui change souvent et nécessite JavaScript pour s’afficher. L’expérience utilisateur de votre site (en particulier le temps jusqu’aupremier affichage significatif
) peut bénéficier de la prise en compte du rendu hybride (par exemple,).

Angular Universal

).
Comment fonctionne le rendu dynamique ?

Le rendu dynamique
signifie basculer entre le contenu rendu côté client et le contenu pré-rendu pour des agents utilisateurs spécifiques. Vous aurez besoin d’un moteur de rendu pour exécuter le JavaScript et produire du HTML statique. Rendertron est un projet open source qui utilise Chromium headless

pour le rendu. Les applications monopages (SPA) chargent souvent des données en arrière-plan ou diffèrent le travail pour rendre leur contenu. Rendertron dispose de mécanismes pour déterminer quand un site web a terminé son rendu. Il attend que toutes les requêtes réseau soient terminées et qu’il n’y ait plus de travail en attente.

1. Cet article couvre :
2. Jetez un œil à un exemple d’application web Configurez un petit serveur express.js
3. pour servir l’application web

Installez et configurez Rendertron en tant que middleware pour le rendu dynamique

L’exemple d’application web
L’application web “kitten corner”

utilise JavaScript pour charger une variété d’images de chats à partir d’une API et les affiche dans une grille.

Voici le JavaScript :
L’application web utilise du JavaScript moderne (ES6), quin’est pas encore pris en charge par Googlebot
. Nous pouvons utiliser le test d’optimisation mobile

pour vérifier si Googlebot peut voir le contenu :

Bien que ce problème soit simple à résoudre, c’est un bon exercice pour apprendre à configurer le rendu dynamique. Le rendu dynamique permettra à Googlebot de voir les images de chats sans modifier le code de l’application web.

Configurez le serveur
Pour servir l'application web, utilisons la bibliothèque, a express
node.js

pour créer des serveurs web.
Le code du serveur ressemble à ceci (trouvez le
code source complet du projet

ici) :
Vous pouvez essayer l’exemple en direct
- vous devriez voir un tas d'images de chats si vous utilisez un navigateur moderne. Pour exécuter le projet depuis votre ordinateur, vous avez besoin de node.js

pour exécuter les commandes suivantes :
Ensuite, pointez votre navigateur vershttps://localhost:8080

. Il est maintenant temps de configurer le rendu dynamique.

Déployez une instance Rendertron
Rendertron exécute un serveur qui prend une URL et renvoie du HTML statique pour l’URL en utilisant Chromium headless. Nous suivrons
la recommandation du projet Rendertron
et utiliserons.

Google Cloud Platform
. Veuillez noter que vous pouvez commencer avecle niveau d’utilisation disponible sans paiement
; l’utilisation de cette configuration en production peut entraîner des coûts conformément aux.

1. tarifs de Google Cloud Platform
   .Créez un nouveau projet dans la
2. console Google Cloud . Notez l’”ID du projet” sous le champ de saisie.
   Installez le
3. Google Cloud SDK comme décrit dans la documentation
4. et connectez-vous.
5. Clonez le dépôt Rendertron depuis GitHub avec : Exécutez les commandes suivantes pour installer les dépendances et construire Rendertron sur votre ordinateur : Activez le cache de Rendertron en créant un nouveau fichier appelé
6. config.json
   dans le répertoire rendertron avec le contenu suivant : Exécutez la commande suivante depuis le répertoire rendertron. Remplacez
7. YOUR_PROJECT_ID
8. par votre ID de projet de l’étape 1. Sélectionnez une région de votre choix et confirmez le déploiement. Attendez qu’il se termine. Entrez l’URL YOUR_PROJECT_ID.appspot.com. Vous devriez voir l’interface de Rendertron avec un champ de saisie et quelques boutons.

Lorsque vous voyez l’interface web de Rendertron, vous avez déployé avec succès votre propre instance Rendertron. Notez l’URL de votre projet (YOUR_PROJECT_ID.appspot.com), car vous en aurez besoin dans la partie suivante du processus.

Ajouter Rendertron au serveur

Le serveur web utilise express.js et Rendertron dispose d’un express.js
middleware. Exécutez la commande suivante dans le répertoire du fichier server.js :

Cette commande installe le rendertron-middleware depuis npm afin que nous puissions l’ajouter au serveur :

Configurer la liste des bots

Rendertron utilise l’en-tête HTTP user-agent pour déterminer si une requête provient d’un bot ou du navigateur d’un utilisateur. Il dispose d’une
liste bien tenue d’agents utilisateurs de bots
à comparer. Par défaut, cette liste n’inclut pas Googlebot, car Googlebot peut exécuter JavaScript. Pour que Rendertron rende également les requêtes Googlebot, ajoutez Googlebot à la liste des agents utilisateurs :

Rendertron compare l’en-tête user-agent avec cette expression régulière plus tard.

Ajouter le middleware

Pour envoyer les requêtes des bots vers l’instance Rendertron, nous devons ajouter le middleware à notre serveur
express.js . Le middleware vérifie l’agent utilisateur demandeur et transfère les requêtes des bots connus vers l’instance Rendertron. Ajoutez le code suivant à server.js et n’oubliez pas de remplacer YOUR_PROJECT_ID par votre ID de projet Google Cloud Platform :

Les bots demandant le site web exemple reçoivent le HTML statique de Rendertron, donc les bots n’ont pas besoin d’exécuter JavaScript pour afficher le contenu.

Tester notre configuration

Pour tester si la configuration de Rendertron a réussi, exécutez à nouveau le test d’optimisation mobile.

Contrairement au premier test, les images de chats sont visibles. Dans l’onglet HTML, nous pouvons voir tout le HTML généré par le code JavaScript et que Rendertron a supprimé le besoin de JavaScript pour afficher le contenu.

Conclusion

Vous avez créé une configuration de rendu dynamique sans apporter de modifications à l’application web. Avec ces changements, vous pouvez servir une version HTML statique de l’application web aux crawlers.

Publié par Martin Splitt, Open Web Unicorn