Comment implémenter le balisage sémantique avec Google Tag Manager

Les données structurées sont, à ce stade, une tactique de référencement de base.

Non seulement cela enlève une couche d’ambiguïté pour les moteurs de recherche (ils n’ont pas à déduire ce qu’est une donnée ; vous leur dites directement), mais c’est aussi le moteur qui génère des résultats riches, qu’ils acquièrent une quantité croissante de biens immobiliers dans les SERP.

L’avènement de la recherche vocale fait des données structurées une partie encore plus importante de la boîte à outils du spécialiste du marketing de recherche. De la même manière que les données structurées permettent aux moteurs de recherche d’extraire et de rejouer des données riches dans le SERP, cette extraction et cette relecture d’entités sont au cœur des résultats de la recherche vocale.

Malheureusement, la mise en œuvre de données structurées via un balisage sémantique peut prendre du temps et être frustrante. Jusqu’à relativement récemment, la seule façon d’implémenter le balisage sémantique était de le faire en ligne, en ajoutant des attributs HTML de Schema.org au code HTML existant d’une page.

Pour le faire à grande échelle, cela nécessitait historiquement d’apporter des modifications aux thèmes ou aux modèles de la page, ce qui pourrait être une grande question de développement en fonction des paramètres de votre site.

De plus, le balisage en ligne est par nature lié à la couche de présentation : il ne pouvait pas marquer les données qui n’étaient pas sur la page (à l’exception d’une utilisation judicieuse des balises meta), et si deux données n’étaient pas présentes sur la page. S’ils sont ensemble sur la page, il peut être difficile, voire impossible, de les lier dans une seule balise itemScope.

Heureusement, l’époque où nous luttions pour classer nos données dans des formulaires faciles à baliser est révolue : il est désormais possible d’ajouter des données structurées en quelques minutes à l’aide de JSON-LD. Ce balisage est désormais entièrement compatible avec Google et Bing ; en fait, Google recommande d’ajouter des données structurées via JSON-LD plutôt qu’en ligne pour les comptes Merchant Center.

Dans un souci d’illustration claire et efficace, nous utiliserons un cas d’utilisation assez simple dans cette première « section JSON-LD statique ». Nous irons plus loin une fois arrivés à « Dynamic JSON-LD ».

Sachez que même l’exemple le plus avancé n’est que la pointe de l’iceberg ; presque rien n’est interdit en ce qui concerne le niveau de complexité que les données structurées injectées par Google Tag Manager peuvent prendre en charge.

JSON-LD statique

JSON-LD statique peut être ajouté à

à partir de la page correspondante, ou intégré à un plugin, mais le moyen le plus simple (et le plus flexible) de le mettre en œuvre, à mon avis, est via Google Tag Manager (GTM).

Première étape : écrivez le JSON-LD

Si vous n’êtes pas familier avec JSON-LD, vous voudrez peut-être faire une petite lecture ou un tutoriel rapide pour vous familiariser avec les bases. L’introduction aux données structurées de Google est un bon point de départ. Selon le type de schéma que vous utilisez, schema.org peut également avoir des exemples de balisage JSON-LD pour ce type d’élément.

Exemple JSON-LD pour le type d’élément d’événement dans schema.org

Après la balise de script initiale, qui indique au navigateur « ceci est un script JSON-LD », vous pouvez voir la hiérarchie de notre script :

• “@Context” précise à quel vocabulaire sémantique (ceci en tant que dictionnaire partagé pour les machines) nous lions nos données, dans ce cas, au vocabulaire de schema.org.
• “@Type” est le schéma spécifique, ou le type d’entité, dans schema.org auquel nous nous référons. C’est l’équivalent de “itemtype” dans le balisage intégré.
• À partir de là, nous pouvons faire directement référence à des propriétés spécifiques dans le schéma par leur nom. C’est l’équivalent de “itemprop” dans le balisage en ligne.

Notez que lorsque nous nous référons aux sous-types comme Place, nous devons appeler ce @type séparément et mettre ce sous-type dans son propre ensemble de crochets pour indiquer quelles propriétés imbriquées appartiennent à ce sous-type.

N’oubliez pas de mettre une virgule après chaque propriété sauf la dernière avant un crochet de fin, ou votre code ne sera pas analysé correctement (et c’est ennuyeux de chercher dans votre code pour trouver la virgule manquante) !

Une fois que vous avez écrit votre code, testez-le dans l’outil de test de données structurées de Google pour vous assurer que tout semble correct et que vous ne manquez pas les propriétés requises.

Deuxième étape : créer un déclencheur

Dans Google Tag Manager, nous souhaitons créer un déclencheur pour que notre balise de balisage JSON-LD se déclenche sur la page sur laquelle nous voulons qu’elle se déclenche ; Dans l’exemple ci-dessus, ce serait sur la page de l’événement Typhoon with Radiation City.

Créez le déclencheur :

• Type : vue de page
• Activer : certaines pages vues
• Activez ce déclencheur lorsque : le chemin de la page correspond à l’URL de votre page de destination

Voici à quoi devraient ressembler les paramètres de déclenchement

Troisième étape : créer l’étiquette

Il est maintenant temps de créer la balise qui se déclenchera sur notre page de destination et d’injecter nos données structurées JSON-LD.

Créez l’étiquette :

• Type : HTML personnalisé
• HTML : collez le code JSON-LD en veillant à inclure les balises de script d’ouverture et de fermeture.
• Prise de vue : utilisez le déclencheur à partir de l’étape 2.

Voici à quoi devraient ressembler les paramètres des balises

Quatrième étape : publier et tester

Après avoir publié la balise, repositionnez l’URL de la page via l’outil de test des données structurées pour vérifier que Google peut l’analyser et la comprendre.

Voila, vous avez terminé !

JSON-LD dynamique

Si vous n’ajoutez pas de nouvelles pages à votre site tous les jours et que les pages qui s’y trouvent ne changent pas aussi souvent, des données structurées via JSON-LD statique peuvent suffire.

Pour les sites tels que les sites de commerce électronique, qui peuvent contenir des milliers de produits dont le prix et la disponibilité peuvent être sujets à changement, le JSON-LD statique n’est tout simplement pas évolutif. Nous devons avoir un peu de fantaisie.

Première étape : créer des variables à l’aide du sélecteur CSS

Puisque nous voulons que ce script soit dynamique, nous devrons utiliser des variables GTM pour trouver les données dont nous avons besoin et leur donner des noms que notre script peut comprendre.

Créez une nouvelle variable (définie par l’utilisateur). Dans cet exemple, nous créons une variable pour prendre le nom du produit :

• Donnez à la variable un nom distinctif, tel que « dataPoint – Product Name » ; vous vous y référerez plus tard avec ce nom.
• Type : élément DOM
• Méthode de sélection : sélecteur CSS
• Sélecteur d’élément – Le sélecteur CSS unique pour l’élément. Dans cet exemple, la classe de l’élément est product-name, donc le sélecteur est .product-name.

Répétez cette étape pour chaque propriété que vous devez extraire pour valider vos données structurées.

Deuxième étape : rassembler dans une expression de fonction

Malheureusement, nous ne pouvons pas simplement mettre nos variables dans notre code JSON-LD et y mettre fin. Google Tag Manager insère JavaScript pour renvoyer ses variables et ce JavaScript remplacera notre code.

Au lieu de cela, nous devons envelopper notre JSON-LD IN dans une expression de fonction qui extraira d’abord nos variables, puis les fusionnera dans un objet JavaScript et enfin insérera une balise de script JSON-LD complète dans l’en-tête de la page.

Le script terminé dans la balise HTML personnalisée (dans GTM) devrait ressembler à ceci :

Certains ajustements et manipulations peuvent être nécessaires pour extraire vos données exactement comme vous le souhaitez ; Heureusement, la fonctionnalité de prévisualisation de GTM vous permettra de tester tout ce dont vous avez besoin avant le déploiement.

Balisage JSON-LD et AMP

Malheureusement, vous ne pouvez pas utiliser GTM pour injecter des données structurées JSON-LD dans des pages AMP. Les conteneurs GTM pour AMP, comme la plupart des choses pour AMP, sont des versions réduites d’eux-mêmes. Ils ne prennent pas en charge les balises HTML personnalisées ou les variables JavaScript personnalisées, car leur chargement peut prendre trop de temps.

Si votre site utilise AMP, vous voudrez peut-être envisager le balisage en ligne après tout.

Une fois que vous avez cette méthodologie à votre disposition, vous constaterez que la mise en œuvre de données structurées est passée d’un travail fastidieux consistant à ajouter un balisage en ligne et à ennuyer vos développeurs à quelque chose que vous pouvez créer et mettre en œuvre en quelques minutes.

Mieux encore, le balisage JSON-LD est entièrement validé, vous obtenez des extraits enrichis et est désormais pris en charge par Bing et Google, donc si vous pensez que cela fonctionnera pour votre site, il n’y a aucune raison de ne pas essayer.

Ruth Burr Reedy est directrice de la stratégie chez UpBuild.