Générer des données structurées avec JavaScript

Les sites Web modernes utilisent JavaScript pour afficher une grande partie du contenu dynamique. Lorsque vous utilisez JavaScript pour générer des données structurées sur vos sites Web, il est important de prendre en compte certains éléments. Ce guide présente les bonnes pratiques et les stratégies de mise en œuvre. En savoir plus sur le fonctionnement des données structurées

Bien qu'il existe différentes manières de générer des données structurées avec JavaScript, voici les plus courantes :

Utiliser Google Tag Manager pour générer des données JSON-LD de manière dynamique

Google Tag Manager est une plate-forme qui vous permet de gérer les balises de votre site Web sans modifier le code. Pour générer des données structurées avec Google Tag Manager, procédez comme suit :

  1. Configurez et installez Google Tag Manager sur votre site.
  2. Ajoutez une balise HTML personnalisée au conteneur.
  3. Collez le bloc de données structurées souhaité dans le contenu de la balise.
  4. Installez le conteneur comme indiqué dans la section Installer Google Tag Manager du menu d'administration de votre conteneur.
  5. Pour ajouter la balise à votre site Web, publiez le conteneur dans l'interface Google Tag Manager.
  6. Testez la mise en œuvre.

Utiliser des variables dans Google Tag Manager

Google Tag Manager (GTM) prend en charge les variables pour utiliser les informations de la page dans le cadre de vos données structurées. Utilisez des variables pour extraire les données structurées de la page au lieu de dupliquer les informations dans GTM. La duplication des informations dans GTM augmente le risque de décalage entre le contenu de la page et les données structurées insérées via GTM.

Par exemple, vous pouvez créer dynamiquement un bloc JSON-LD Recette qui utilise le titre de la page comme nom de la recette en créant la variable personnalisée suivante nommée recipe_name : 

function() { return document.title; }

Vous pouvez ensuite utiliser {{recipe_name}} dans votre balise HTML personnalisée.

Nous vous recommandons de créer des variables afin de recueillir toutes les informations nécessaires de la page.

Voici un exemple de contenu de balise HTML personnalisée :

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

Générer des données structurées avec du code JavaScript personnalisé

Une autre façon d'intégrer des données structurées consiste à utiliser JavaScript pour générer toutes vos données structurées ou ajouter des informations aux données structurées affichées côté serveur. Quelle que soit l'approche choisie, la recherche Google est en mesure de comprendre et traiter les données structurées disponibles dans le DOM lorsqu'il affiche la page. Pour en savoir plus sur la façon dont la recherche Google traite JavaScript, consultez le guide de base sur JavaScript.

Voici un exemple de données structurées générées par JavaScript :

  1. Identifiez le type de données structurées qui vous intéresse.
  2. Modifiez le code HTML de votre site Web pour inclure un extrait de code JavaScript comme dans l'exemple suivant. Pour ce faire, reportez-vous à la documentation de votre CMS ou de votre fournisseur d'hébergement, ou demandez à vos développeurs.
    fetch('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structuredDataText;
  document.head.appendChild(script);
});
  3. Testez votre mise en œuvre avec le test des résultats enrichis.

Utiliser l'affichage côté serveur

Si vous utilisez l'affichage côté serveur, vous pouvez également inclure les données structurées de votre choix dans la sortie affichée. Consultez la documentation de votre framework pour savoir comment générer le code JSON-LD pour le type de données structurées qui vous intéresse.

Tester la mise en œuvre

Pour vous assurer que la recherche Google peut explorer et indexer vos données structurées, testez votre mise en œuvre :

  1. Ouvrez l'outil de test des résultats enrichis.
  2. Saisissez l'URL que vous souhaitez tester.
  3. Cliquez sur Tester l'URL.

    Réussite : si tout est correct et que votre type de données structurées est compatible avec l'outil, le message "Cette page est éligible aux résultats enrichis" s'affiche.
    Si vous testez un type de données structurées non compatible avec le test des résultats enrichis, vérifiez le code HTML affiché. Si le code HTML généré contient les données structurées, la recherche Google pourra les traiter.

    Réessayez : si des erreurs ou des avertissements apparaissent, il s'agit probablement d'une erreur de syntaxe ou d'une propriété manquante. Lisez la documentation relative à votre type de données structurées et assurez-vous d'avoir ajouté toutes les propriétés. Si le problème persiste, consultez également le guide sur la résolution des problèmes JavaScript liés à la recherche.