Utilisation de Google Tag Manager pour générer dynamiquement du code de schéma

[Estimated read time: 7 minutes]

L’un des principaux enseignements du SearchFest à Portland au début de cette année a été l’importance croissante de la recherche sémantique et des données structurées, en particulier Schema.org. Et tandis que la mise en œuvre de Schema nécessitait de nombreuses modifications du balisage de votre site, le format JSON-LD a créé une excellente alternative à l’ajout de microdonnées à une page avec un code minimal.

Découvrez le jeu de Mike Arnesen de son discours SearchFest, “Comprendre et faciliter la recherche sémantique”, pour un excellent aperçu de l’utilisation des données structurées.

Ce qui était encore plus excitant était l’idée que vous pouviez utiliser Google Tag Manager pour insérer JSON-LD dans une page, vous permettant d’ajouter un balisage Schema à votre site sans avoir à toucher directement le code du site (en d’autres termes, pas de va-et-vient avec le service informatique).

Le problème est que, alors qu’il semblait que Tag Manager vous permettrait d’insérer un extrait JSON-LD sur la page sans problème, il ne semblait pas possible d’utiliser d’autres fonctionnalités de Tag Manager pour générer dynamiquement cet extrait. Tag Manager vous permet de créer des variables en extrayant le contenu de la page à l’aide de sélecteurs CSS ou de JavaScript de base. Ces variables peuvent ensuite être utilisées dynamiquement dans vos balises (consultez le post de Mike sur l’analyse sémantique pour un bon exemple).

Donc, si nous voulions récupérer l’URL de cette page et la transmettre dynamiquement à l’extrait de code JSON-LD, nous aurions peut-être essayé quelque chose comme ceci :

Mais cela ne fonctionne pas. Dommage.

Cela signifie que si vous souhaitez utiliser GTM pour ajouter le type de schéma BlogPosting à chacun de vos articles de blog, vous devrez créer une balise et un déclencheur différents (basés sur l’URL) pour chaque article. Pas exactement évolutif.

Mais, avec un peu d’expérimentation, j’ai trouvé un peu de magie JavaScript qui permet d’extraire des données du contenu existant sur la page et de créer dynamiquement un extrait JSON-LD valide.

Génération dynamique de JSON-LD

La raison pour laquelle notre premier exemple ne fonctionne pas est que Tag Manager remplace chaque variable par un petit morceau de JavaScript qui appelle une fonction, renvoyant la valeur de la variable appelée.

Nous pouvons voir cette erreur dans l’outil de test des données structurées de Google :

L’erreur est le résultat de l’insertion de JavaScript dans Tag Manager dans ce qui devrait être une balise JSON — ceci n’est pas valide, et donc la balise échoue.

Cependant, nous pouvons utiliser Tag Manager pour insérer une balise JavaScript et faire en sorte que cette balise JavaScript insère notre balise JSON-LD.

Si vous n’êtes pas très familier avec JavaScript, cela peut sembler assez compliqué, mais cela fonctionne exactement de la même manière que de nombreuses autres balises que vous utilisez probablement déjà (comme Google Analytics ou Tag Manager lui-même).

Ici, nos données Schema sont contenues dans l’objet “data” JavaScript, que nous pouvons remplir dynamiquement avec des variables de Tag Manager. L’extrait de code crée ensuite une balise de script sur la page avec le bon type (application/ld+json) et remplit la balise avec nos données, que nous convertissons en JSON à l’aide de la fonction JSON.stringify.

Le but de cet exemple est simplement de montrer comment le script fonctionne (l’échange dynamique de l’URL pour le type de schéma d’organisation n’aurait en fait pas beaucoup de sens). Voyons donc comment il pourrait être utilisé dans le monde réel.

Génération dynamique de balises Schema.org pour les articles de blog

Commencez avec un modèle de schéma valide

Tout d’abord, créez un extrait de schéma JSON/LD complet pour un seul article basé sur la spécification schema.org/BlogPosting.

Identifier les variables dynamiques nécessaires

Il existe un certain nombre de variables qui seront les mêmes entre les articles ; par exemple, les informations sur l’éditeur. De même, l’image principale de chaque article a une taille spécifique générée par WordPress qui sera toujours la même entre les publications, nous pouvons donc garder constantes les variables de hauteur et de largeur.

Dans notre cas, nous avons identifié 7 variables qui changent entre les publications que nous voudrons remplir dynamiquement :

Créer les variables dans Google Tag Manager

• ID de l’entité principale : L’URL de la page.
• Gros titre: Nous allons garder cela simple et utiliser le titre de la page.
• Date de publication et Modifié: Notre blog est sur WordPress, nous avons donc déjà des balises méta pour “article:published_time” et “article:modified_time”. Le modified_time n’est pas toujours inclus (sauf si la publication est modifiée après la publication), mais la spécification Schema recommande de l’inclure, nous devons donc définir dateModified sur la date publiée s’il n’y a pas déjà de date modifiée. Dans certaines circonstances, nous devrons peut-être reformater la date – heureusement, dans ce cas, elle est déjà au format ISO 860, donc tout va bien.
• Nom de l’auteur : JeDans certains cas, nous devrons extraire le contenu de la page. Notre blog répertorie l’auteur et la date de publication dans la signature. Nous devrons extraire le nom, mais omettre l’horodatage, le tuyau de fin et les espaces.

• Image de l’article : Notre blog a installé Yoast, qui a spécifié des balises d’image pour Twitter et Open Graph. Noter: J’utilise la méta twitter:image au lieu de la valeur de la balise og:image en raison d’un petit bogue qui existait avec l’image graphique ouverte sur notre blog lorsque j’ai écrit ceci.
• Description d’article: Nous utiliserons la méta description.

Voici à nouveau notre script d’insertion que nous utiliserons dans notre balise, cette fois avec les propriétés échangées pour les variables que nous devrons créer :

Je laisse de côté dateModified pour le moment – nous couvrirons que dans une minute.

Extraction des méta-valeurs

Heureusement, Tag Manager facilite l’extraction des valeurs des éléments DOM, notamment parce que, comme c’est le cas avec les méta-propriétés, la valeur exacte dont nous avons besoin se trouvera dans l’un des attributs de l’élément. Pour extraire le titre de la page, on peut récupérer la valeur de la balise