Premiers pas avec 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.

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.

    done Test concluant : votre contenu pour mobile correspond à ce que vous souhaitiez que l'utilisateur voie.

    error 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).

    done Test concluant : le contenu pour ordinateur correspond à ce que vous souhaitiez que l'utilisateur voie.

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

    done Test concluant : les données structurées s'affichent comme prévu.

    error 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

error Quelle est la 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é.

done Résolvez le 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

error Quelle est la 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.

done Résolvez le 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 si les robots d'exploration trouvent bien 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.

Données structurées manquantes

error Quelle est la 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.

done Résolvez le 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.

Envoyer des commentaires concernant…