L'affichage dynamique comme solution

Sur certains sites Web, JavaScript génère du contenu supplémentaire sur une page lorsqu'il est exécuté dans le navigateur. C'est ce qu'on appelle le rendu côté client. La recherche Google exécute JavaScript, cependant certaines fonctionnalités du langage y sont limitées. Certaines pages peuvent également rencontrer des problèmes avec un contenu qui n'apparaît pas dans le rendu HTML. D'autres moteurs de recherche peuvent choisir d'ignorer JavaScript et de masquer ainsi le contenu généré par le langage.

L'affichage dynamique est une solution de rechange pour les sites Web dont le contenu généré par JavaScript n'est pas disponible pour les moteurs de recherche. Un serveur d'affichage dynamique détecte les robots susceptibles de rencontrer des difficultés avec le contenu généré par JavaScript, et leur diffuse une version dont le rendu est généré côté serveur sans JavaScript. Les utilisateurs voient quant à eux la version dont le rendu est généré côté client.

L'affichage dynamique peut servir de solution de rechange, mais n'est pas recommandé, car il crée des complexités supplémentaires et exige davantage de ressources.

Sites qui doivent utiliser l'affichage dynamique

L'affichage dynamique convient au contenu public indexable généré par JavaScript et qui change rapidement, ou au contenu qui utilise des fonctionnalités JavaScript non compatibles avec les robots d'exploration qui vous intéressent. Tous les sites n'ont pas besoin d'utiliser l'affichage dynamique, et il existe de meilleures solutions, comme expliqué dans cet article sur l'affichage sur le Web.

Comprendre le fonctionnement de l'affichage dynamique

L'affichage dynamique nécessite que votre serveur Web détecte les robots d'exploration (par exemple, en vérifiant le user-agent). Les requêtes des robots d'exploration sont acheminées vers un moteur de rendu, et les requêtes des utilisateurs sont traitées normalement. Le cas échéant, le moteur de rendu dynamique diffuse une version du contenu qui convient au robot d'exploration (par exemple, il peut également diffuser une version HTML statique). Vous pouvez choisir d'activer ce moteur pour toutes les pages ou page par page.

Schéma qui montre comment fonctionne l'affichage dynamique. Le schéma montre le serveur en train de transmettre le contenu HTML et JavaScript initial directement au navigateur. Le schéma montre également le serveur en train de transmettre le contenu HTML et JavaScript initial à un moteur de rendu, qui convertit le contenu HTML et JavaScript initial en contenu HTML statique. Une fois le contenu converti, le moteur de rendu fournit le contenu HTML statique au robot d'exploration.

L'affichage dynamique n'est pas une technique de dissimulation

Googlebot ne considère pas l'affichage dynamique comme une technique de dissimulation (cloaking) tant que le contenu généré par ce biais est similaire.

Lorsque vous configurez l'affichage dynamique, votre site peut engendrer des pages d'erreur. Googlebot ne considère pas ces pages d'erreur comme une technique de dissimulation et les traite comme toute autre page d'erreur.

L'utilisation de l'affichage dynamique pour proposer un contenu complètement différent aux utilisateurs et aux robots d'exploration peut être considérée comme une technique de dissimulation (site Web qui diffuse une page sur les chats aux utilisateurs et une page sur les chiens aux robots d'exploration, par exemple).

Appliquer l'affichage dynamique

Pour configurer l'affichage dynamique de votre contenu, suivez nos consignes générales. Vous devrez vous reporter aux informations de votre configuration spécifique, car elles varient considérablement d'une mise en œuvre à une autre.

Installez et configurez un moteur de rendu dynamique (par exemple, Puppeteer, Rendertron ou prerender.io) pour transformer votre contenu en code HTML statique que les robots d'exploration pourront utiliser plus facilement.
Choisissez les user-agents qui recevront votre code HTML statique, puis reportez-vous aux informations de votre configuration spécifique pour découvrir comment mettre à jour ou ajouter des user-agents. Voici un exemple de liste de user-agents courants dans le middleware Rendertron :
```
export const botUserAgents = [
  'googlebot',
  'bingbot',
  'linkedinbot',
  'mediapartners-google',
];
```
Si le préaffichage ralentit votre serveur ou si vous observez un nombre élevé de requêtes de préaffichage, pensez à recourir à une mémoire cache pour le contenu préaffiché ou à vérifier que les requêtes proviennent de robots d'exploration légitimes.
Déterminez si les user-agents ont besoin d'un contenu pour ordinateur ou pour mobile. Utilisez la diffusion dynamique pour fournir la version appropriée selon ces deux types de contenus. Voici un exemple qui illustre comment une configuration peut déterminer si un user-agent nécessite un contenu pour ordinateur ou pour mobile :
```
isPrerenderedUA = userAgent.matches(botUserAgents)
isMobileUA = userAgent.matches(['mobile', 'android'])


if (!isPrerenderedUA) {
} else {
  servePreRendered(isMobileUA)
}
```
Dans cet exemple, utilisez if (!isPrerenderedUA) {...} pour diffuser un contenu normal affiché côté client. Si nécessaire, exécutez else { servePreRendered(isMobileUA)} pour diffuser la version pour mobile.
Configurez votre serveur pour fournir le code HTML statique aux robots d'exploration que vous avez sélectionnés. Vous pouvez procéder de plusieurs manières selon la technologie que vous employez. Voici quelques exemples :
- Dirigez les requêtes de proxy provenant de robots d'exploration vers le moteur de rendu dynamique.
- Effectuez un préaffichage dans le cadre du processus de déploiement et faites en sorte que votre serveur fournisse le code HTML statique aux robots d'exploration.
- Créez un affichage dynamique dans le code de votre serveur personnalisé.
- Fournissez le contenu statique d'un service de préaffichage aux robots d'exploration.
- Utilisez un middleware pour votre serveur (par exemple, le middleware Rendertron).

Vérifier votre configuration

Une fois que vous avez terminé d'appliquer l'affichage dynamique, effectuez les tests suivants pour vérifier si tout fonctionne comme prévu avec une URL :

Procédez à un test d'optimisation mobile pour vérifier si Google voit bien votre contenu pour mobile.
Test concluant : votre contenu pour mobile correspond à ce que vous souhaitiez que l'utilisateur voie.

Réessayez : si le contenu que vous voyez n'est pas celui que vous attendiez, consultez la section Dépannage.
Servez-vous de l'outil d'inspection d'URL afin de vérifier si votre contenu pour ordinateur est également visible sur la page affichée (celle-ci correspond à la façon dont Google voit votre page).
Test concluant : le contenu pour ordinateur correspond à ce que vous souhaitiez que l'utilisateur voie.

Réessayez : si le contenu que vous voyez n'est pas celui que vous attendiez, consultez la section Dépannage.
Si vous utilisez des données structurées, vérifiez si elles s'affichent correctement à l'aide de l'outil de test des résultats enrichis.
Test concluant : les données structurées s'affichent comme prévu.

Réessayez : si les données structurées ne s'affichent pas comme prévu, consultez la section Dépannage.

Dépannage

Si votre contenu présente des erreurs suite au test d'optimisation mobile ou s'il ne figure pas dans les résultats de recherche Google, essayez de résoudre les problèmes les plus courants. Si vous continuez à rencontrer des problèmes, ouvrez un nouveau sujet dans la communauté d'aide Google Search Central.

Contenu incomplet ou qui s'affiche différemment

Cause du problème : il est possible que votre moteur de rendu soit mal configuré ou que votre application Web soit incompatible avec votre solution d'affichage. De même, il peut arriver que le contenu ne s'affiche pas correctement en raison d'un temps de réponse dépassé.

Résolution du problème : consultez la documentation de votre solution d'affichage pour résoudre le problème de configuration d'affichage dynamique.

Long temps de réponse

Cause du problème : l'utilisation d'un navigateur sans interface graphique pour afficher des pages à la demande augmente souvent le temps de réponse, ce qui peut amener les robots d'exploration à annuler la requête et à ne pas indexer votre contenu. Un long temps de réponse peut également conduire les robots d'exploration à réduire leur vitesse d'exécution lors de l'exploration et de l'indexation de votre contenu.

Résolution du problème

Configurez une mémoire cache pour le contenu HTML préaffiché ou créez une version HTML statique de votre contenu dans le cadre de votre processus de création.
Vérifiez si la mémoire cache est bien activée dans votre configuration (par exemple, en orientant les robots d'exploration vers votre mémoire cache).
Vérifiez que les robots d'exploration trouvent votre contenu rapidement à l'aide d'outils de test comme le test d'optimisation mobile ou webpagetest(avec une chaîne user-agent personnalisée provenant de la liste des user-agents des robots d'exploration Google). Vos requêtes ne doivent pas expirer.

Les composants Web n'affichent pas le contenu comme prévu

Cause du problème : l'élément Shadow DOM est isolé du reste de la page. Les solutions de rendu telles que Rendertron ne peuvent pas accéder au contenu qui se trouve dans un Shadow DOM isolé. Pour plus d'informations, consultez les bonnes pratiques concernant les composants Web.

Résolution du problème

Chargez les polyfills webcomponents.js pour les éléments personnalisés et les composants Shadow DOM.
Utilisez l'outil de test d'optimisation mobile ou l'outil d'inspection d'URL pour vérifier si le contenu apparaît dans le code HTML de votre solution de rendu.

Données structurées manquantes

Cause du problème : l'absence du user-agent de données structurées ou de balises de script JSON-LD dans le résultat peut entraîner des erreurs de données structurées.

Résolution du problème

Utilisez l'outil de test des résultats enrichis pour vous assurer que les données structurées sont présentes sur la page. Configurez ensuite le user-agent pour tester le contenu préaffiché avec le robot Googlebot pour ordinateur ou mobile.
Assurez-vous que les balises de script JSON-LD sont incluses dans le code HTML de votre contenu affiché de manière dynamique. Pour en savoir plus, consultez la documentation de votre solution d'affichage.