De nombreux frameworks frontend utilisent JavaScript pour afficher des contenus. Cela implique que Google peut mettre un certain temps à indexer vos contenus ou à mettre à jour les contenus déjà indexés présentés sous cette forme.
L'une des solutions dont
nous avons parlé lors de la conférence Google I/O de cette année est
l'affichage dynamique. Il existe plusieurs façons de le mettre en œuvre. Nous allons voir dans cet article de blog un exemple d'affichage dynamique avec Rendertron, une solution Open Source basée sur headless Chromium.
Quels sont les sites qui devraient utiliser l'affichage dynamique ?
Tous les moteurs de recherche et les robots de réseaux sociaux qui explorent votre page ne sont pas capables d'exécuter JavaScript. Ainsi, Googlebot peut mettre un certain temps à exécuter vos fichiers JavaScript et présente
certaines limites.
L'affichage dynamique est utile pour les contenus fréquemment modifiés et dont l'affichage requiert JavaScript.
Vous pouvez améliorer l'expérience des utilisateurs sur votre site (en particulier le délai d'affichage du
first meaningful paint) avec un rendu hybride (
Angular Universal, par exemple).
Comment l'affichage dynamique fonctionne-t-il ?
L'affichage dynamique consiste à alterner le contenu affiché côté client et le contenu pré-affiché en fonction des user-agents spécifiques qui tentent d'accéder au contenu.
Vous aurez besoin d'un moteur de rendu pour exécuter le code JavaScript et générer un code HTML statique. Nous utiliserons ici Rendertron. C'est un projet Open Source qui utilise Chromium sans interface graphique (
headless Chromium) pour afficher les contenus. Les Single page Apps (applications à page unique) chargent souvent des données en arrière-plan ou reportent les tâches d'affichage du contenu. Rendertron est doté de mécanismes qui déterminent quand l'affichage du contenu d'un site Web est terminé. Il attend que l'ensemble des demandes réseau et des tâches soient terminées.
Dans cet article, nous allons :
- Observer un exemple d'application Web
- Configurer un petit serveur express.js qui diffusera l'application Web
- Installer et configurer Rendertron en tant que middleware pour l'affichage dynamique
* * *
Exemple d'application Web
Des images de chats mignons et un bouton pour en afficher d'autres, que demander de plus à cette application Web !
Voici son code JavaScript :
const apiUrl = 'https://api.thecatapi.com/v1/images/search?limit=50';
const tpl = document.querySelector('template').content;
const container = document.querySelector('ul');
function init () {
fetch(apiUrl)
.then(response => response.json())
.then(cats => {
container.innerHTML = '';
cats
.map(cat => {
const li = document.importNode(tpl, true);
li.querySelector('img').src = cat.url;
return li;
}).forEach(li => container.appendChild(li));
})
}
init();
document.querySelector('button').addEventListener('click', init);
Si l'on en croit le test d'optimisation mobile, la page est mobile-friendly, mais on ne voit pas les images de chats sur la capture d'écran. L'en-tête et le bouton s'affichent, mais pas les photos de chats.
Même si ce problème se résout facilement, c'est un bon exercice pour s'entraîner à configurer l'affichage dynamique. Grâce à celui-ci, Googlebot pourra voir les photos de chats sans que vous ayez à modifier le code de l'application Web.
Configurer le serveur
Pour diffuser l'application Web, vous devez utiliser la bibliothèque node.js
express afin de créer des serveurs Web.
const
express
= require('express');
const
app
= express();
const
DIST_FOLDER
= process.cwd()
+ '/docs';
const
PORT
= process.env.PORT
|| 8080;
//
Diffuser les éléments statiques (images, CSS, etc.)
app.get('*.*',
express.static(DIST_FOLDER));
//
Rediriger toutes les autres URL vers index.html pour notre
application ayant une seule page
app.get('*',
(req,
res)
=>
{
res.sendFile(DIST_FOLDER
+ '/index.html');
});
//
Démarrer le serveur Express
app.listen(PORT,
() =>
{
console.log(`Node
Express server listening on http://localhost:${PORT}
from ${DIST_FOLDER}`);
});
L'
exemple en ligne se trouve ici : si vous utilisez un navigateur récent, vous devriez y voir des images de chats. Pour exécuter le projet depuis votre ordinateur, vous aurez besoin de
node.js afin d'exécuter les commandes suivantes :
npm install express rendertron-middleware
node server.js
Saisissez ensuite
http://localhost:8080 dans votre navigateur. Vous êtes maintenant prêt à configurer l'affichage dynamique.
Déployer une instance Rendertron
Le formulaire pour créer un projet Google Cloud Platform.
- Créez un projet dans la Google Cloud Console. Notez l'ID de projet situé sous le champ de saisie.
- Installez le SDK Google Cloud comme décrit dans la documentation et connectez-vous.
- Clonez le dépôt Rendertron depuis GitHub avec :
git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
- Exécutez les commandes suivantes pour installer des dépendances et compiler Rendertron sur votre ordinateur :
npm install && npm run build
- Activez le cache de Rendertron en créant un fichier intitulé config.json dans le répertoire de Rendertron. Ajoutez-y le contenu suivant :
{ "datastoreCache": true }
- Exécutez la commande suivante depuis le répertoire de Rendertron. Remplacez VOTRE_ID_DE_PROJET par l'ID de projet obtenu à l'étape 1.
gcloud app deploy app.yaml --project VOTRE_ID_DE_PROJET
- Sélectionnez la région de votre choix et confirmez le déploiement. Attendez la fin du déploiement.
- Dans votre navigateur, saisissez l'URL VOTRE_ID_DE_PROJET.appspot.com (remplacez VOTRE_ID_DE_PROJET par l'ID de projet obtenu à l'étape 1). L'interface de Rendertron devrait s'afficher avec un champ de saisie et quelques boutons.
Interface utilisateur de Rendertron après le déploiement sur Google Cloud Platform
Lorsque l'interface Web de Rendertron s'affiche, cela signifie que vous avez déployé votre propre instance Rendertron. Notez l'URL de votre projet (VOTRE_ID_DE_PROJET.appspot.com), car vous en aurez besoin pour la suite du processus.
Ajouter Rendertron au serveur
Le serveur Web utilise express.js et Rendertron dispose d'un middleware express.js. Exécutez la commande suivante dans le répertoire du fichier server.js :
npm install --save rendertron-middleware
Cette commande installe le middleware rendertron-middleware depuis npm pour que nous puissions l'ajouter au serveur :
const express = require('express');
const app = express();
const rendertron = require('rendertron-middleware');
Configurer la liste de robots
Rendertron utilise l'en-tête HTTP "user-agent" pour déterminer si la requête provient d'un robot ou du navigateur d'un utilisateur. Il compare ces requêtes à
une liste complète d'user-agents de robots. Par défaut, cette liste n'inclut pas Googlebot, car il peut exécuter JavaScript. Pour que Rendertron affiche également les requêtes Googlebot, ajoutez Googlebot à liste des user-agents :
const BOTS = rendertron.botUserAgents.concat('googlebot');
const BOT_UA_PATTERN = new RegExp(BOTS.join('|'), 'i');
Rendertron comparera l'en-tête "user-agent" à cette expression régulière.
Ajouter le middleware
Pour diriger les requêtes des robots vers l'instance Rendertron, vous devez ajouter le middleware au serveur express.js. Le middleware vérifie l'user-agent à l'origine de la requête et envoie les requêtes des robots reconnus à l'instance Rendertron. Ajoutez le code suivant à server.js. N'oubliez pas de remplacer "VOTRE_ID_DE_PROJET" par votre ID de projet Google Cloud Platform :
app.use(rendertron.makeMiddleware({
proxyUrl: 'https://YOUR_PROJECT_ID.appspot.com/render',
userAgentPattern: BOT_UA_PATTERN
}));
Les robots qui demandent l'exemple de site Web reçoivent le code HTML de Rendertron et n'ont donc pas besoin d'exécuter le JavaScript pour afficher le contenu.
Tester la configuration
Cette fois-ci, les photos de chats sont visibles. Dans l'onglet "HTML", nous pouvons voir tout le HTML généré par le code JavaScript. On voit également que grâce à Rendertron, le contenu n'a plus besoin de JavaScript pour s'afficher.
Conclusion
Vous venez de configurer un affichage dynamique sans modifier l'application Web. Grâce à cela, vous pouvez proposer une version HTML statique de l'application Web aux robots d'exploration. Félicitations !
