Appliquer l'affichage dynamique

Actuellement, il est difficile de traiter JavaScript, et tous les robots d'exploration des moteurs de recherche ne sont pas en mesure de le traiter correctement ou immédiatement. Nous espérons que ce problème pourra être résolu à l'avenir. En attendant, nous vous recommandons une solution de rechange : l'affichage dynamique, qui consiste à basculer entre un contenu affiché côté client et un contenu préaffiché pour des user-agents spécifiques.

Sites qui doivent utiliser l'affichage dynamique

L'affichage dynamique convient au contenu public indexable généré par JavaScript 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 ne doivent pas nécessairement utiliser l'affichage dynamique, et il convient de noter que l'affichage dynamique est une solution de rechange pour les robots d'exploration.

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.

  1. Installez et configurez un moteur de rendu dynamique pour transformer votre contenu en code HTML statique que les robots d'exploration pourront utiliser plus facilement. Parmi les moteurs de rendu dynamique courants figurent, entre autres, Puppeteer, Rendertron et prerender.io.
  2. Choisissez les user-agents qui, selon vous, doivent recevoir 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',
      'google-structured-data-testing-tool',
      'bingbot',
      'linkedinbot',
      'mediapartners-google',
    ];
  3. 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.
  4. 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) }
  5. 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 :

  1. 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.

  2. 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 Googlebot 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.

  3. Si vous utilisez des données structurées, vérifiez si elles s'affichent correctement à l'aide de l'outil de test des données structurées.

    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 indiqués ci-dessous. Si le problème persiste, ouvrez un nouveau sujet sur le forum pour les webmasters.

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

  1. 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.
  2. 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).
  3. 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

  1. Chargez les polyfills webcomponents.js pour les éléments personnalisés et les composants Shadow DOM.
  2. 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

  1. Utilisez l'outil de test des données structurées pour vous assurer que les données structurées sont présentes sur la page. Configurez ensuite le user-agent pour que l'outil de test des données structurées vérifie le contenu préaffiché.
  2. 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.