[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
. Nous n’avons pas besoin de spécifier un nom d’attribut pour celui-ci :</p> <p><img decoding="async" src="https://moz-static.moz.com/youmoz_uploads/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags/576794184cca31.23853501.png" width="738" alt="configuration d'une balise google tag manager pour extraire la valeur du titre"> </p> <p>Pour les méta-propriétés, nous pouvons extraire la valeur de l’attribut content : </p> <p><img decoding="async" src="https://moz-static.moz.com/youmoz_uploads/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags/5767941901fcb8.76439638.png" width="738" alt="configuration d'une balise google tag manager pour extraire la valeur du titre"> </p> <p>Tag Manager contient également des variables intégrées utiles que nous pouvons exploiter : dans ce cas, l’URL de la page : </p> <p><img decoding="async" src="https://moz-static.moz.com/youmoz_uploads/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags/57679419854306.38513113.png" width="618" alt="Variable intégrée de l'URL de la page du gestionnaire de balises"> </p> <h3><span class="ez-toc-section" id="traitement-des-elements-de-la-page"></span>Traitement des éléments de la page<span class="ez-toc-section-end"></span></h3> <p>Pour extraire le nom de l’auteur, le balisage de notre site fait en sorte qu’un simple sélecteur direct ne fonctionnera pas, ce qui signifie que nous devrons utiliser du JavaScript personnalisé pour saisir uniquement le texte que nous voulons (le texte de l’élément span, pas l’élément de temps), et supprimez les 3 derniers caractères (” | “) pour obtenir uniquement le nom de l’auteur. </p> <p>En cas de problème avec ce sélecteur, j’ai également mis en place une solution de secours (juste le nom de notre société), pour m’assurer que si notre sélecteur échoue, une valeur est renvoyée. </p> <p><img decoding="async" src="https://moz-static.moz.com/youmoz_uploads/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags/5767941a0600f1.80330070.png" width="738" alt="variable de gestionnaire de balises Google JavaScript personnalisée pour extraire et traiter la copie"> </p> <h2><span class="ez-toc-section" id="essai"></span>Essai<span class="ez-toc-section-end"></span></h2> <p>Tag Manager dispose d’une fonctionnalité intéressante qui vous permet de préparer et de tester les balises avant de les déployer. </p> <p><img decoding="async" src="https://moz-static.moz.com/youmoz_uploads/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags/5767941b683f03.05409682.png" width="400" alt="mode de débogage du gestionnaire de balises google"> </p> <p>Une fois nos variables en place, nous pouvons passer en mode Aperçu et accéder à l’un de nos articles de blog : </p> <p><img decoding="async" src="https://moz-static.moz.com/youmoz_uploads/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags/5767941bd03e11.38700283.png" width="738" alt="test des variables de schéma du gestionnaire de balises"> </p> <p>Ici, nous pouvons vérifier les valeurs de toutes nos variables pour nous assurer que les valeurs correctes passent. </p> <p>Enfin, nous configurons notre balise et la configurons pour qu’elle se déclenche où nous voulons. Dans ce cas, nous allons simplement déclencher ces balises sur les articles de blog : </p> <p><img decoding="async" src="https://moz-static.moz.com/youmoz_uploads/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags/5767941c50bfd3.27970223.png" alt="configuration du déclencheur du gestionnaire de balises"> </p> <p>Et voici la version finale de notre tag. </p> <p>Pour notre paramètre dateModified, nous avons ajouté quelques lignes de code qui vérifient si notre variable modifiée est définie, et si ce n’est pas le cas, définit la variable JSON-LD “dateModified” à la date publiée. Vous pouvez trouver le code brut ici. </p> <p><img decoding="async" src="https://moz-static.moz.com/youmoz_uploads/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags/5767941cc21524.15034477.png" width="738" alt="balise json-ld de schéma dynamique"> </p> <p>Nous pouvons maintenant enregistrer la balise, déployer la version actuelle, puis utiliser l’outil de test des données structurées de Google pour valider notre travail : </p> <p><img decoding="async" src="https://moz-static.moz.com/youmoz_uploads/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags/5767941d8ff161.37948276.png" width="738" alt="l'outil de test de données structurées de google valide le JSON-LD généré dynamiquement"> </p> <p>Succès!! </p> <hr> <p>Ceci n’est qu’une première version de ce code, qui sert à tester l’idée que nous pouvons utiliser Google Tag Manager pour insérer dynamiquement des balises JSON-LD/Schema.org. Cependant, après seulement quelques jours, nous nous sommes enregistrés avec Google Search Console et cela a confirmé que le schéma BlogPosting avait été trouvé avec succès sur tous nos articles de blog sans erreur, donc je pense que c’est une méthode viable pour mettre en œuvre des données structurées. </p> <p><img decoding="async" src="https://moz-static.moz.com/youmoz_uploads/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags/5767941e2bb207.78142880.png" width="738" alt="données structurées valides trouvées dans Google Search Console"> </p> <p>Les données structurées deviennent une partie de plus en plus importante du travail d’un référencement, et avec des techniques comme celle-ci, nous pouvons considérablement améliorer notre capacité à mettre en œuvre des données structurées efficacement et avec un minimum de frais techniques. </p> <p>J’aimerais connaître l’expérience de la communauté concernant l’utilisation de Tag Manager avec JSON-LD, et j’aimerais savoir si les utilisateurs utilisent cette méthode avec succès ! </p> <p>Bon marquage ! </p> </p></div> <span class="sourcespan">(Article traduit de <span class="sourcelien ljoptimizer" data-loc="aHR0cHM6Ly9tb3ouY29tL2Jsb2cvdXNpbmctZ29vZ2xlLXRhZy1tYW5hZ2VyLXRvLWR5bmFtaWNhbGx5LWdlbmVyYXRlLXNjaGVtYS1vcmctanNvbi1sZC10YWdz" data-window="new">moz.com</span>)</span></p> </div><!-- .entry-content /--> <div id="post-extra-info"> <div class="theiaStickySidebar"> <div id="single-post-meta" class="post-meta clearfix"><span class="author-meta single-author with-avatars"><span class="meta-item meta-author-wrapper meta-author-1"> <span class="meta-author-avatar"> <a href="https://www.reklam.fr/author/admin/"><img alt='Photo de Simon' src='https://www.reklam.fr/wp-content/uploads/2022/11/cropped-avatar-Simon-140x140.jpg' srcset='https://www.reklam.fr/wp-content/uploads/2022/11/cropped-avatar-Simon-280x280.jpg 2x' class='avatar avatar-140 photo' height='140' width='140' decoding='async'/></a> </span> <span class="meta-author"><a href="https://www.reklam.fr/author/admin/" class="author-name tie-icon" title="Simon">Simon</a></span></span></span><span class="date meta-item tie-icon">août 15, 2021</span><div class="tie-alignright"><span class="meta-comment tie-icon meta-item fa-before">0</span><span class="meta-views meta-item"><span class="tie-icon-fire" aria-hidden="true"></span> 172 </span><span class="meta-reading-time meta-item"><span class="tie-icon-bookmark" aria-hidden="true"></span> 6 minutes de lecture</span> </div></div><!-- .post-meta --> </div> </div> <div class="clearfix"></div> <script id="tie-schema-json" type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"BlogPosting","dateCreated":"2021-08-15T06:54:39+02:00","datePublished":"2021-08-15T06:54:39+02:00","dateModified":"2021-08-15T06:54:39+02:00","headline":"Utilisation de Google Tag Manager pour g\u00e9n\u00e9rer dynamiquement du code de sch\u00e9ma","name":"Utilisation de Google Tag Manager pour g\u00e9n\u00e9rer dynamiquement du code de sch\u00e9ma","keywords":[],"url":"https:\/\/www.reklam.fr\/utilisation-de-google-tag-manager-pour-generer-dynamiquement-du-code-de-schema\/","description":"[Estimated read time: 7 minutes] L'un des principaux enseignements du SearchFest \u00e0 Portland au d\u00e9but de cette ann\u00e9e a \u00e9t\u00e9 l'importance croissante de la recherche s\u00e9mantique et des donn\u00e9es structur\u00e9es,","copyrightYear":"2021","articleSection":"R\u00e9f\u00e9rencement technique,SEO","articleBody":" \r\n\n [Estimated read time: 7 minutes]\r\n L'un des principaux enseignements du SearchFest \u00e0 Portland au d\u00e9but de cette ann\u00e9e a \u00e9t\u00e9 l'importance croissante de la recherche s\u00e9mantique et des donn\u00e9es structur\u00e9es, en particulier Schema.org. Et tandis que la mise en \u0153uvre de Schema n\u00e9cessitait de nombreuses modifications du balisage de votre site, le format JSON-LD a cr\u00e9\u00e9 une excellente alternative \u00e0 l'ajout de microdonn\u00e9es \u00e0 une page avec un code minimal.\r\n\r\nD\u00e9couvrez le jeu de Mike Arnesen de son discours SearchFest, \"Comprendre et faciliter la recherche s\u00e9mantique\", pour un excellent aper\u00e7u de l'utilisation des donn\u00e9es structur\u00e9es.\r\nCe qui \u00e9tait encore plus excitant \u00e9tait l'id\u00e9e que vous pouviez utiliser Google Tag Manager pour ins\u00e9rer JSON-LD dans une page, vous permettant d'ajouter un balisage Schema \u00e0 votre site sans avoir \u00e0 toucher directement le code du site (en d'autres termes, pas de va-et-vient avec le service informatique).\r\nLe probl\u00e8me est que, alors qu'il semblait que Tag Manager vous permettrait d'ins\u00e9rer un extrait JSON-LD sur la page sans probl\u00e8me, il ne semblait pas possible d'utiliser d'autres fonctionnalit\u00e9s de Tag Manager pour g\u00e9n\u00e9rer dynamiquement cet extrait. Tag Manager vous permet de cr\u00e9er des variables en extrayant le contenu de la page \u00e0 l'aide de s\u00e9lecteurs CSS ou de JavaScript de base. Ces variables peuvent ensuite \u00eatre utilis\u00e9es dynamiquement dans vos balises (consultez le post de Mike sur l'analyse s\u00e9mantique pour un bon exemple).\r\nDonc, si nous voulions r\u00e9cup\u00e9rer l'URL de cette page et la transmettre dynamiquement \u00e0 l'extrait de code JSON-LD, nous aurions peut-\u00eatre essay\u00e9 quelque chose comme ceci\u00a0:\r\n\r\nMais cela ne fonctionne pas. Dommage.\r\nCela signifie que si vous souhaitez utiliser GTM pour ajouter le type de sch\u00e9ma BlogPosting \u00e0 chacun de vos articles de blog, vous devrez cr\u00e9er une balise et un d\u00e9clencheur diff\u00e9rents (bas\u00e9s sur l'URL) pour chaque article. Pas exactement \u00e9volutif.\r\nMais, avec un peu d'exp\u00e9rimentation, j'ai trouv\u00e9 un peu de magie JavaScript qui permet d'extraire des donn\u00e9es du contenu existant sur la page et de cr\u00e9er dynamiquement un extrait JSON-LD valide.\r\nG\u00e9n\u00e9ration dynamique de JSON-LDLa 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\u00e9e.\r\nNous pouvons voir cette erreur dans l'outil de test des donn\u00e9es structur\u00e9es de Google\u00a0:\r\n\r\nL'erreur est le r\u00e9sultat de l'insertion de JavaScript dans Tag Manager dans ce qui devrait \u00eatre une balise JSON \u2014 ceci n'est pas valide, et donc la balise \u00e9choue.\r\nCependant, nous pouvons utiliser Tag Manager pour ins\u00e9rer une balise JavaScript et faire en sorte que cette balise JavaScript ins\u00e8re notre balise JSON-LD.\r\n\r\nSi vous n'\u00eates pas tr\u00e8s familier avec JavaScript, cela peut sembler assez compliqu\u00e9, mais cela fonctionne exactement de la m\u00eame mani\u00e8re que de nombreuses autres balises que vous utilisez probablement d\u00e9j\u00e0 (comme Google Analytics ou Tag Manager lui-m\u00eame).\r\nIci, nos donn\u00e9es Schema sont contenues dans l'objet \"data\" JavaScript, que nous pouvons remplir dynamiquement avec des variables de Tag Manager. L'extrait de code cr\u00e9e ensuite une balise de script sur la page avec le bon type (application\/ld+json) et remplit la balise avec nos donn\u00e9es, que nous convertissons en JSON \u00e0 l'aide de la fonction JSON.stringify.\r\nLe but de cet exemple est simplement de montrer comment le script fonctionne (l'\u00e9change dynamique de l'URL pour le type de sch\u00e9ma d'organisation n'aurait en fait pas beaucoup de sens). Voyons donc comment il pourrait \u00eatre utilis\u00e9 dans le monde r\u00e9el.\r\nG\u00e9n\u00e9ration dynamique de balises Schema.org pour les articles de blogCommencez avec un mod\u00e8le de sch\u00e9ma valideTout d'abord, cr\u00e9ez un extrait de sch\u00e9ma JSON\/LD complet pour un seul article bas\u00e9 sur la sp\u00e9cification schema.org\/BlogPosting.\r\n\r\nIdentifier les variables dynamiques n\u00e9cessairesIl existe un certain nombre de variables qui seront les m\u00eames entre les articles ; par exemple, les informations sur l'\u00e9diteur. De m\u00eame, l'image principale de chaque article a une taille sp\u00e9cifique g\u00e9n\u00e9r\u00e9e par WordPress qui sera toujours la m\u00eame entre les publications, nous pouvons donc garder constantes les variables de hauteur et de largeur.\r\nDans notre cas, nous avons identifi\u00e9 7 variables qui changent entre les publications que nous voudrons remplir dynamiquement\u00a0:\r\nCr\u00e9er les variables dans Google Tag Manager\r\n\tID de l'entit\u00e9 principale\u00a0: L'URL de la page.\r\n\tGros titre: Nous allons garder cela simple et utiliser le titre de la page.\r\n\tDate de publication et Modifi\u00e9: Notre blog est sur WordPress, nous avons donc d\u00e9j\u00e0 des balises m\u00e9ta pour \"article:published_time\" et \"article:modified_time\". Le modified_time n'est pas toujours inclus (sauf si la publication est modifi\u00e9e apr\u00e8s la publication), mais la sp\u00e9cification Schema recommande de l'inclure, nous devons donc d\u00e9finir dateModified sur la date publi\u00e9e s'il n'y a pas d\u00e9j\u00e0 de date modifi\u00e9e. Dans certaines circonstances, nous devrons peut-\u00eatre reformater la date - heureusement, dans ce cas, elle est d\u00e9j\u00e0 au format ISO 860, donc tout va bien.\r\n\tNom de l'auteur : JeDans certains cas, nous devrons extraire le contenu de la page. Notre blog r\u00e9pertorie 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.\r\n\r\n\tImage de l'article\u00a0: Notre blog a install\u00e9 Yoast, qui a sp\u00e9cifi\u00e9 des balises d'image pour Twitter et Open Graph. Noter: J'utilise la m\u00e9ta 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 \u00e9crit ceci.\r\n\tDescription d'article: Nous utiliserons la m\u00e9ta description.\r\nVoici \u00e0 nouveau notre script d'insertion que nous utiliserons dans notre balise, cette fois avec les propri\u00e9t\u00e9s \u00e9chang\u00e9es pour les variables que nous devrons cr\u00e9er\u00a0:\r\n\r\nJe laisse de c\u00f4t\u00e9 dateModified pour le moment - nous couvrirons que dans une minute.\r\nExtraction des m\u00e9ta-valeursHeureusement, Tag Manager facilite l'extraction des valeurs des \u00e9l\u00e9ments DOM, notamment parce que, comme c'est le cas avec les m\u00e9ta-propri\u00e9t\u00e9s, la valeur exacte dont nous avons besoin se trouvera dans l'un des attributs de l'\u00e9l\u00e9ment. Pour extraire le titre de la page, on peut r\u00e9cup\u00e9rer la valeur de la balise . Nous n'avons pas besoin de sp\u00e9cifier un nom d'attribut pour celui-ci\u00a0:\r\nPour les m\u00e9ta-propri\u00e9t\u00e9s, nous pouvons extraire la valeur de l'attribut content\u00a0:\r\n\r\nTag\u00a0Manager contient \u00e9galement des variables int\u00e9gr\u00e9es utiles que nous pouvons exploiter\u00a0: dans ce cas, l'URL de la page\u00a0:\r\n\r\nTraitement des \u00e9l\u00e9ments de la pagePour extraire le nom de l'auteur, le balisage de notre site fait en sorte qu'un simple s\u00e9lecteur direct ne fonctionnera pas, ce qui signifie que nous devrons utiliser du JavaScript personnalis\u00e9 pour saisir uniquement le texte que nous voulons (le texte de l'\u00e9l\u00e9ment span, pas l'\u00e9l\u00e9ment de temps), et supprimez les 3 derniers caract\u00e8res (\" | \") pour obtenir uniquement le nom de l'auteur.\r\nEn cas de probl\u00e8me avec ce s\u00e9lecteur, j'ai \u00e9galement mis en place une solution de secours (juste le nom de notre soci\u00e9t\u00e9), pour m'assurer que si notre s\u00e9lecteur \u00e9choue, une valeur est renvoy\u00e9e.\r\n\r\nEssaiTag Manager dispose d'une fonctionnalit\u00e9 int\u00e9ressante qui vous permet de pr\u00e9parer et de tester les balises avant de les d\u00e9ployer.\r\n\r\nUne fois nos variables en place, nous pouvons passer en mode Aper\u00e7u et acc\u00e9der \u00e0 l'un de nos articles de blog\u00a0:\r\n\r\nIci, nous pouvons v\u00e9rifier les valeurs de toutes nos variables pour nous assurer que les valeurs correctes passent.\r\nEnfin, nous configurons notre balise et la configurons pour qu'elle se d\u00e9clenche o\u00f9 nous voulons. Dans ce cas, nous allons simplement d\u00e9clencher ces balises sur les articles de blog\u00a0:\r\n\r\nEt voici la version finale de notre tag.\r\nPour notre param\u00e8tre dateModified, nous avons ajout\u00e9 quelques lignes de code qui v\u00e9rifient si notre variable modifi\u00e9e est d\u00e9finie, et si ce n'est pas le cas, d\u00e9finit la variable JSON-LD \"dateModified\" \u00e0 la date publi\u00e9e. Vous pouvez trouver le code brut ici.\r\n\r\nNous pouvons maintenant enregistrer la balise, d\u00e9ployer la version actuelle, puis utiliser l'outil de test des donn\u00e9es structur\u00e9es de Google pour valider notre travail\u00a0:\r\n\r\nSucc\u00e8s!!\r\nCeci n'est qu'une premi\u00e8re version de ce code, qui sert \u00e0 tester l'id\u00e9e que nous pouvons utiliser Google Tag Manager pour ins\u00e9rer dynamiquement des balises JSON-LD\/Schema.org. Cependant, apr\u00e8s seulement quelques jours, nous nous sommes enregistr\u00e9s avec Google Search Console et cela a confirm\u00e9 que le sch\u00e9ma BlogPosting avait \u00e9t\u00e9 trouv\u00e9 avec succ\u00e8s sur tous nos articles de blog sans erreur, donc je pense que c'est une m\u00e9thode viable pour mettre en \u0153uvre des donn\u00e9es structur\u00e9es.\r\n\r\nLes donn\u00e9es structur\u00e9es deviennent une partie de plus en plus importante du travail d'un r\u00e9f\u00e9rencement, et avec des techniques comme celle-ci, nous pouvons consid\u00e9rablement am\u00e9liorer notre capacit\u00e9 \u00e0 mettre en \u0153uvre des donn\u00e9es structur\u00e9es efficacement et avec un minimum de frais techniques.\r\nJ'aimerais conna\u00eetre l'exp\u00e9rience de la communaut\u00e9 concernant l'utilisation de Tag\u00a0Manager avec JSON-LD, et j'aimerais savoir si les utilisateurs utilisent cette m\u00e9thode avec succ\u00e8s\u00a0!\r\nBon marquage\u00a0!\r\n\n \r\n\r\n(Article traduit de moz.com)","publisher":{"@id":"#Publisher","@type":"Organization","name":"Reklam","logo":{"@type":"ImageObject","url":"https:\/\/www.reklam.fr\/wp-content\/uploads\/2022\/11\/default-monochrome-white.svg"}},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/www.reklam.fr\/utilisation-de-google-tag-manager-pour-generer-dynamiquement-du-code-de-schema\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"Simon","url":"https:\/\/www.reklam.fr\/author\/admin\/"},"image":{"@type":"ImageObject","url":"https:\/\/www.reklam.fr\/wp-content\/uploads\/2022\/12\/advanced-seo-74da3a3_2021-03-31-001127.png","width":1200,"height":630}}</script> <div id="share-buttons-bottom" class="share-buttons share-buttons-bottom"> <div class="share-links"> <a href="https://www.facebook.com/sharer.php?u=https://www.reklam.fr/utilisation-de-google-tag-manager-pour-generer-dynamiquement-du-code-de-schema/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn large-share-button" data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="social-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Utilisation%20de%20Google%20Tag%20Manager%20pour%20g%C3%A9n%C3%A9rer%20dynamiquement%20du%20code%20de%20sch%C3%A9ma&url=https://www.reklam.fr/utilisation-de-google-tag-manager-pour-generer-dynamiquement-du-code-de-schema/" rel="external noopener nofollow" title="Twitter" target="_blank" class="twitter-share-btn large-share-button" data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="social-text">Twitter</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.reklam.fr/utilisation-de-google-tag-manager-pour-generer-dynamiquement-du-code-de-schema/&title=Utilisation%20de%20Google%20Tag%20Manager%20pour%20g%C3%A9n%C3%A9rer%20dynamiquement%20du%20code%20de%20sch%C3%A9ma" rel="external noopener nofollow" title="Linkedin" target="_blank" class="linkedin-share-btn" data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">Linkedin</span> </a> <a href="mailto:?subject=Utilisation%20de%20Google%20Tag%20Manager%20pour%20g%C3%A9n%C3%A9rer%20dynamiquement%20du%20code%20de%20sch%C3%A9ma&body=https://www.reklam.fr/utilisation-de-google-tag-manager-pour-generer-dynamiquement-du-code-de-schema/" rel="external noopener nofollow" title="Partager par email" target="_blank" class="email-share-btn" data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">Partager par email</span> </a> <a href="#" rel="external noopener nofollow" title="Imprimer" target="_blank" class="print-share-btn" data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">Imprimer</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </article><!-- #the-post /--> <div class="post-components"> <div class="about-author container-wrapper about-author-1"> <div class="author-avatar"> <a href="https://www.reklam.fr/author/admin/"> <img alt='Photo de Simon' src='https://www.reklam.fr/wp-content/uploads/2022/11/cropped-avatar-Simon-180x180.jpg' srcset='https://www.reklam.fr/wp-content/uploads/2022/11/cropped-avatar-Simon-360x360.jpg 2x' class='avatar avatar-180 photo' height='180' width='180' loading='lazy' decoding='async'/> </a> </div><!-- .author-avatar /--> <div class="author-info"> <h3 class="author-name"><a href="https://www.reklam.fr/author/admin/">Simon</a></h3> <div class="author-bio"> </div><!-- .author-bio /--> <ul class="social-icons"> <li class="social-icons-item"> <a href="https://www.reklam.fr" rel="external noopener nofollow" target="_blank" class="social-link url-social-icon"> <span class="tie-icon-home" aria-hidden="true"></span> <span class="screen-reader-text">Website</span> </a> </li> </ul> </div><!-- .author-info /--> <div class="clearfix"></div> </div><!-- .about-author /--> <div id="related-posts" class="container-wrapper has-extra-post"> <div class="mag-box-title the-global-title"> <h3>Articles similaires</h3> </div> <div class="related-posts-list"> <div class="related-item"> <a aria-label="Stations de panique ! Une étude de cas sur la façon de gérer une page importante qui disparaît de Google" href="https://www.reklam.fr/stations-de-panique-une-etude-de-cas-sur-la-facon-de-gerer-une-page-importante-qui-disparait-de-google/" class="post-thumb"><img width="390" height="220" src="https://www.reklam.fr/wp-content/uploads/2022/11/search-engines-5511dd3_2021-03-12-080918-390x220.png" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" loading="lazy" /></a> <h3 class="post-title"><a href="https://www.reklam.fr/stations-de-panique-une-etude-de-cas-sur-la-facon-de-gerer-une-page-importante-qui-disparait-de-google/">Stations de panique ! Une étude de cas sur la façon de gérer une page importante qui disparaît de Google</a></h3> <div class="post-meta clearfix"><span class="date meta-item tie-icon">mars 31, 2021</span></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item"> <a aria-label="Comment lancer un audit SEO pour votre startup" href="https://www.reklam.fr/comment-lancer-un-audit-seo-pour-votre-startup/" class="post-thumb"><img width="390" height="220" src="https://www.reklam.fr/wp-content/uploads/2022/11/advanced-seo-74da3a3_2021-03-30-234306-390x220.png" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" loading="lazy" /></a> <h3 class="post-title"><a href="https://www.reklam.fr/comment-lancer-un-audit-seo-pour-votre-startup/">Comment lancer un audit SEO pour votre startup</a></h3> <div class="post-meta clearfix"><span class="date meta-item tie-icon">juillet 29, 2021</span></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item"> <a aria-label="Comment créer une feuille de calcul Excel pour supprimer Link Spam Post Penguin" href="https://www.reklam.fr/comment-creer-une-feuille-de-calcul-excel-pour-supprimer-link-spam-post-penguin/" class="post-thumb"><img width="390" height="220" src="https://www.reklam.fr/wp-content/uploads/2022/12/advanced-seo-74da3a3_2021-03-30-215743-390x220.png" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" loading="lazy" /></a> <h3 class="post-title"><a href="https://www.reklam.fr/comment-creer-une-feuille-de-calcul-excel-pour-supprimer-link-spam-post-penguin/">Comment créer une feuille de calcul Excel pour supprimer Link Spam Post Penguin</a></h3> <div class="post-meta clearfix"><span class="date meta-item tie-icon">mars 30, 2021</span></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item"> <a aria-label="La révolution de l’apprentissage automatique : comment cela fonctionne et son impact sur le référencement" href="https://www.reklam.fr/la-revolution-de-lapprentissage-automatique-comment-cela-fonctionne-et-son-impact-sur-le-referencement/" class="post-thumb"><img width="390" height="220" src="https://www.reklam.fr/wp-content/uploads/2022/12/56b259341ae4d2.97142168_2021-03-31-003323-390x220.jpg" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" loading="lazy" /></a> <h3 class="post-title"><a href="https://www.reklam.fr/la-revolution-de-lapprentissage-automatique-comment-cela-fonctionne-et-son-impact-sur-le-referencement/">La révolution de l’apprentissage automatique : comment cela fonctionne et son impact sur le référencement</a></h3> <div class="post-meta clearfix"><span class="date meta-item tie-icon">mars 31, 2021</span></div><!-- .post-meta --> </div><!-- .related-item /--> </div><!-- .related-posts-list /--> </div><!-- #related-posts /--> <div id="comments" class="comments-area"> <div id="add-comment-block" class="container-wrapper"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title the-global-title has-block-head-4">Laisser un commentaire <small><a rel="nofollow" id="cancel-comment-reply-link" href="/utilisation-de-google-tag-manager-pour-generer-dynamiquement-du-code-de-schema/#respond" style="display:none;">Annuler la réponse</a></small></h3><form action="https://www.reklam.fr/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Votre adresse e-mail ne sera pas publiée.</span> <span class="required-field-message">Les champs obligatoires sont indiqués avec <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Commentaire <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Nom <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p> <p class="comment-form-email"><label for="email">E-mail <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p> <p class="comment-form-url"><label for="url">Site web</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Enregistrer mon nom, mon e-mail et mon site dans le navigateur pour mon prochain commentaire.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Laisser un commentaire" /> <input type='hidden' name='comment_post_ID' value='1081' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #add-comment-block /--> </div><!-- .comments-area --> </div><!-- .post-components /--> </div><!-- .main-content --> <div id="check-also-box" class="container-wrapper check-also-right"> <div class="widget-title the-global-title has-block-head-4"> <div class="the-subtitle">Voir Aussi</div> <a href="#" id="check-also-close" class="remove"> <span class="screen-reader-text">Fermer</span> </a> </div> <div class="widget posts-list-big-first has-first-big-post"> <ul class="posts-list-items"> <li class="widget-single-post-item widget-post-list"> <div class="post-widget-thumbnail"> <a aria-label="Défense contre les forces du mal : pourquoi le référencement négatif est important, même si les classements ne sont pas affectés" href="https://www.reklam.fr/defense-contre-les-forces-du-mal-pourquoi-le-referencement-negatif-est-important-meme-si-les-classements-ne-sont-pas-affectes/" class="post-thumb"><span class="post-cat-wrap"><span class="post-cat tie-cat-5">SEO</span></span><img width="390" height="220" src="https://www.reklam.fr/wp-content/uploads/2022/11/5e61a7136c6d71.70255396-390x220.png" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" loading="lazy" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body"> <a class="post-title the-subtitle" href="https://www.reklam.fr/defense-contre-les-forces-du-mal-pourquoi-le-referencement-negatif-est-important-meme-si-les-classements-ne-sont-pas-affectes/">Défense contre les forces du mal : pourquoi le référencement négatif est important, même si les classements ne sont pas affectés</a> <div class="post-meta"> <span class="date meta-item tie-icon">avril 16, 2021</span> </div> </div> </li> </ul><!-- .related-posts-list /--> </div> </div><!-- #related-posts /--> <aside class="sidebar tie-col-md-4 tie-col-xs-12 normal-side is-sticky" aria-label="Sidebar Principale"> <div class="theiaStickySidebar"> <div id="ezw_tco-2" class="container-wrapper widget ez-toc"><div id="ez-toc-widget-container" class="ez-toc-widget-container ez-toc-v2_0_39 ez-toc-widget counter-hierarchy ez-toc-widget-container ez-toc-widget-direction"> <nav> <ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#generation-dynamique-de-json-ld" title="Génération dynamique de JSON-LD">Génération dynamique de JSON-LD</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#generation-dynamique-de-balises-schemaorg-pour-les-articles-de-blog" title="Génération dynamique de balises Schema.org pour les articles de blog">Génération dynamique de balises Schema.org pour les articles de blog</a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-3" href="#commencez-avec-un-modele-de-schema-valide" title="Commencez avec un modèle de schéma valide">Commencez avec un modèle de schéma valide</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-4" href="#identifier-les-variables-dynamiques-necessaires" title="Identifier les variables dynamiques nécessaires">Identifier les variables dynamiques nécessaires</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-5" href="#creer-les-variables-dans-google-tag-manager" title="Créer les variables dans Google Tag Manager">Créer les variables dans Google Tag Manager</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-6" href="#extraction-des-meta-valeurs" title="Extraction des méta-valeurs">Extraction des méta-valeurs</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-7" href="#traitement-des-elements-de-la-page" title="Traitement des éléments de la page">Traitement des éléments de la page</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-8" href="#essai" title="Essai">Essai</a></li></ul></nav> </div> <div class="clearfix"></div></div><!-- .widget /--><div id="social-2" class="container-wrapper widget social-icons-widget"><div class="widget-title the-global-title has-block-head-4"><div class="the-subtitle">Social<span class="widget-title-icon tie-icon"></span></div></div><ul class="solid-social-icons"></ul> <div class="clearfix"></div><div class="clearfix"></div></div><!-- .widget /--> </div><!-- .theiaStickySidebar /--> </aside><!-- .sidebar /--> </div><!-- .main-content-row /--></div><!-- #content /--> <footer id="footer" class="site-footer dark-skin dark-widgetized-area"> <div id="footer-widgets-container"> <div class="container"> </div><!-- .container /--> </div><!-- #Footer-widgets-container /--> <div id="site-info" class="site-info site-info-layout-2"> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="copyright-text copyright-text-first">© Copyright 2024, Tous droits réservés | <span style="color:red;" class="tie-icon-heart"></span></div><ul class="social-icons"></ul> </div><!-- .tie-col /--> </div><!-- .tie-row /--> </div><!-- .container /--> </div><!-- #site-info /--> </footer><!-- #footer /--> <div id="share-buttons-mobile" class="share-buttons share-buttons-mobile"> <div class="share-links icons-only"> <a href="https://www.facebook.com/sharer.php?u=https://www.reklam.fr/utilisation-de-google-tag-manager-pour-generer-dynamiquement-du-code-de-schema/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn" data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Utilisation%20de%20Google%20Tag%20Manager%20pour%20g%C3%A9n%C3%A9rer%20dynamiquement%20du%20code%20de%20sch%C3%A9ma&url=https://www.reklam.fr/utilisation-de-google-tag-manager-pour-generer-dynamiquement-du-code-de-schema/" rel="external noopener nofollow" title="Twitter" target="_blank" class="twitter-share-btn" data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">Twitter</span> </a> <a href="https://api.whatsapp.com/send?text=Utilisation%20de%20Google%20Tag%20Manager%20pour%20g%C3%A9n%C3%A9rer%20dynamiquement%20du%20code%20de%20sch%C3%A9ma%20https://www.reklam.fr/utilisation-de-google-tag-manager-pour-generer-dynamiquement-du-code-de-schema/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn" data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="https://telegram.me/share/url?url=https://www.reklam.fr/utilisation-de-google-tag-manager-pour-generer-dynamiquement-du-code-de-schema/&text=Utilisation%20de%20Google%20Tag%20Manager%20pour%20g%C3%A9n%C3%A9rer%20dynamiquement%20du%20code%20de%20sch%C3%A9ma" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn" data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> <div class="mobile-share-buttons-spacer"></div> <a id="go-to-top" class="go-to-top-button" href="#go-to-tie-body"> <span class="tie-icon-angle-up"></span> <span class="screen-reader-text">Bouton retour en haut de la page</span> </a> </div><!-- #tie-wrapper /--> <aside class="side-aside normal-side dark-skin dark-widgetized-area is-fullwidth appear-from-left" aria-label="Sidebar Secondaire" style="visibility: hidden;"> <div data-height="100%" class="side-aside-wrapper has-custom-scroll"> <a href="#" class="close-side-aside remove big-btn light-btn"> <span class="screen-reader-text">Fermer</span> </a><!-- .close-side-aside /--> <div id="mobile-container"> <div id="mobile-search"> <form role="search" method="get" class="search-form" action="https://www.reklam.fr/"> <label> <span class="screen-reader-text">Rechercher :</span> <input type="search" class="search-field" placeholder="Rechercher…" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Rechercher" /> </form> </div><!-- #mobile-search /--> <div id="mobile-menu" class="hide-menu-icons"> </div><!-- #mobile-menu /--> <div id="mobile-social-icons" class="social-icons-widget solid-social-icons"> <ul></ul> </div><!-- #mobile-social-icons /--> </div><!-- #mobile-container /--> </div><!-- .side-aside-wrapper /--> </aside><!-- .side-aside /--> </div><!-- #tie-container /--> </div><!-- .background-overlay /--> <div id="reading-position-indicator"></div><div id="autocomplete-suggestions" class="autocomplete-suggestions"></div><div id="is-scroller-outer"><div id="is-scroller"></div></div><div id="fb-root"></div> <div id="tie-popup-search-mobile" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Fermer</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Rerchercher"> <form method="get" class="tie-popup-search-form" action="https://www.reklam.fr/"> <input class="tie-popup-search-input" inputmode="search" type="text" name="s" title="Rechercher" autocomplete="off" placeholder="Rechercher" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">Rechercher</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <div id="amp-mobile-version-switcher" hidden> <a rel="" href="https://www.reklam.fr/utilisation-de-google-tag-manager-pour-generer-dynamiquement-du-code-de-schema/?amp=1"> Go to mobile version </a> </div> <div class="ez-toc-sticky"> <div class="ez-toc-sticky-fixed hide"> <div class='ez-toc-sidebar'><div class="ez-toc-sticky-title-container"> <p class="ez-toc-sticky-title">Contenu de la page</p> <a class="ez-toc-close-icon" href="javascript:void(0)" onclick="ezTOC_hideBar(event)" aria-label="×"><span aria-hidden="true">×</span></a> </div> <div id="ez-toc-sticky-container" class="ez-toc-sticky-v2_0_39 counter-flat ez-toc-sticky-toggle-counter"> <nav class='ez-toc-sticky-toggle-direction'><ul class='ez-toc-sticky-list ez-toc-sticky-list-level-1' ><li class='ez-toc-sticky-page-1 ez-toc-sticky-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#generation-dynamique-de-json-ld" title="Génération dynamique de JSON-LD">Génération dynamique de JSON-LD</a></li><li class='ez-toc-sticky-page-1 ez-toc-sticky-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#generation-dynamique-de-balises-schemaorg-pour-les-articles-de-blog" title="Génération dynamique de balises Schema.org pour les articles de blog">Génération dynamique de balises Schema.org pour les articles de blog</a><ul class='ez-toc-sticky-list-level-3'><li class='ez-toc-sticky-heading-level-3'><a class="ez-toc-link ez-toc-heading-3" href="#commencez-avec-un-modele-de-schema-valide" title="Commencez avec un modèle de schéma valide">Commencez avec un modèle de schéma valide</a></li><li class='ez-toc-sticky-page-1 ez-toc-sticky-heading-level-3'><a class="ez-toc-link ez-toc-heading-4" href="#identifier-les-variables-dynamiques-necessaires" title="Identifier les variables dynamiques nécessaires">Identifier les variables dynamiques nécessaires</a></li><li class='ez-toc-sticky-page-1 ez-toc-sticky-heading-level-3'><a class="ez-toc-link ez-toc-heading-5" href="#creer-les-variables-dans-google-tag-manager" title="Créer les variables dans Google Tag Manager">Créer les variables dans Google Tag Manager</a></li><li class='ez-toc-sticky-page-1 ez-toc-sticky-heading-level-3'><a class="ez-toc-link ez-toc-heading-6" href="#extraction-des-meta-valeurs" title="Extraction des méta-valeurs">Extraction des méta-valeurs</a></li><li class='ez-toc-sticky-page-1 ez-toc-sticky-heading-level-3'><a class="ez-toc-link ez-toc-heading-7" href="#traitement-des-elements-de-la-page" title="Traitement des éléments de la page">Traitement des éléments de la page</a></li></ul></li><li class='ez-toc-sticky-page-1 ez-toc-sticky-heading-level-2'><a class="ez-toc-link ez-toc-heading-8" href="#essai" title="Essai">Essai</a></li></ul></nav></div> </div> </div> <a class='ez-toc-open-icon' href='javascript:void(0)' onclick='ezTOC_showBar(event)'> <span class="arrow">→</span> <span class="text">Index</span> </a> </div><script type="text/javascript" id="ez-toc-sticky-js-after">
/* <![CDATA[ */
function ezTOC_hideBar(e) { var sidebar = document.querySelector(".ez-toc-sticky-fixed"); if ( typeof(sidebar) !== "undefined" && sidebar !== null ) { sidebar.classList.remove("show"); sidebar.classList.add("hide"); setTimeout(function() { document.querySelector(".ez-toc-open-icon").style = "z-index: 9999999"; }, 200); } } function ezTOC_showBar(e) { document.querySelector(".ez-toc-open-icon").style = "z-index: -1;";setTimeout(function() { var sidebar = document.querySelector(".ez-toc-sticky-fixed"); sidebar.classList.remove("hide"); sidebar.classList.add("show"); }, 200); } (function() { let ez_toc_sticky_fixed_container = document.querySelector('div.ez-toc-sticky-fixed');if(ez_toc_sticky_fixed_container) { document.body.addEventListener("click", function (evt) { ezTOC_hideBar(evt); }); ez_toc_sticky_fixed_container.addEventListener('click', function(event) { event.stopPropagation(); }); document.querySelector('.ez-toc-open-icon').addEventListener('click', function(event) { event.stopPropagation(); }); } })();
/* ]]> */
</script> <script type="text/javascript" id="tie-scripts-js-extra">
/* <![CDATA[ */
var tie = {"is_rtl":"","ajaxurl":"https:\/\/www.reklam.fr\/wp-admin\/admin-ajax.php","is_taqyeem_active":"1","is_sticky_video":"1","mobile_menu_top":"","mobile_menu_active":"area_1","mobile_menu_parent":"","lightbox_all":"true","lightbox_gallery":"true","lightbox_skin":"dark","lightbox_thumb":"horizontal","lightbox_arrows":"true","is_singular":"1","autoload_posts":"","reading_indicator":"true","lazyload":"","select_share":"","select_share_twitter":"","select_share_facebook":"","select_share_linkedin":"","select_share_email":"","facebook_app_id":"5303202981","twitter_username":"","responsive_tables":"true","ad_blocker_detector":"","sticky_behavior":"default","sticky_desktop":"true","sticky_mobile":"true","sticky_mobile_behavior":"default","ajax_loader":"<div class=\"loader-overlay\"><div class=\"spinner-circle\"><\/div><\/div>","type_to_search":"","lang_no_results":"Aucun r\u00e9sultat","sticky_share_mobile":"true","sticky_share_post":""};
/* ]]> */
</script> <script type="text/javascript" src="https://www.reklam.fr/wp-content/themes/jannah/assets/js/scripts.min.js?ver=5.4.9" id="tie-scripts-js"></script> <script type="text/javascript" src="https://www.reklam.fr/wp-content/themes/jannah/assets/ilightbox/lightbox.js?ver=5.4.9" id="tie-js-ilightbox-js"></script> <script type="text/javascript" src="https://www.reklam.fr/wp-content/themes/jannah/assets/js/sliders.min.js?ver=5.4.9" id="tie-js-sliders-js"></script> <script type="text/javascript" src="https://www.reklam.fr/wp-content/themes/jannah/assets/js/shortcodes.js?ver=5.4.9" id="tie-js-shortcodes-js"></script> <script type="text/javascript" src="https://www.reklam.fr/wp-content/themes/jannah/assets/js/desktop.min.js?ver=5.4.9" id="tie-js-desktop-js"></script> <script type="text/javascript" src="https://www.reklam.fr/wp-content/themes/jannah/assets/js/live-search.js?ver=5.4.9" id="tie-js-livesearch-js"></script> <script type="text/javascript" src="https://www.reklam.fr/wp-content/themes/jannah/assets/js/single.min.js?ver=5.4.9" id="tie-js-single-js"></script> <script type="text/javascript" src="https://www.reklam.fr/wp-includes/js/comment-reply.min.js?ver=6.6.2" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://www.reklam.fr/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=2.2.0" id="ez-toc-jquery-smooth-scroll-js"></script> <script type="text/javascript" src="https://www.reklam.fr/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1" id="ez-toc-js-cookie-js"></script> <script type="text/javascript" src="https://www.reklam.fr/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2" id="ez-toc-jquery-sticky-kit-js"></script> <script type="text/javascript" id="ez-toc-js-js-extra">
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"100"};
/* ]]> */
</script> <script type="text/javascript" src="https://www.reklam.fr/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.39-1669851216" id="ez-toc-js-js"></script> <script>
WebFontConfig ={
google:{
families: [ 'Poppins:200,regular:latin&display=swap' ]
}
};
(function(){
var wf = document.createElement('script');
wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.defer = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script> <script type='text/javascript'>
!function(t){"use strict";t.loadCSS||(t.loadCSS=function(){});var e=loadCSS.relpreload={};if(e.support=function(){var e;try{e=t.document.createElement("link").relList.supports("preload")}catch(t){e=!1}return function(){return e}}(),e.bindMediaToggle=function(t){var e=t.media||"all";function a(){t.addEventListener?t.removeEventListener("load",a):t.attachEvent&&t.detachEvent("onload",a),t.setAttribute("onload",null),t.media=e}t.addEventListener?t.addEventListener("load",a):t.attachEvent&&t.attachEvent("onload",a),setTimeout(function(){t.rel="stylesheet",t.media="only x"}),setTimeout(a,3e3)},e.poly=function(){if(!e.support())for(var a=t.document.getElementsByTagName("link"),n=0;n<a.length;n++){var o=a[n];"preload"!==o.rel||"style"!==o.getAttribute("as")||o.getAttribute("data-loadcss")||(o.setAttribute("data-loadcss",!0),e.bindMediaToggle(o))}},!e.support()){e.poly();var a=t.setInterval(e.poly,500);t.addEventListener?t.addEventListener("load",function(){e.poly(),t.clearInterval(a)}):t.attachEvent&&t.attachEvent("onload",function(){e.poly(),t.clearInterval(a)})}"undefined"!=typeof exports?exports.loadCSS=loadCSS:t.loadCSS=loadCSS}("undefined"!=typeof global?global:this);
</script> <script type='text/javascript'>
var c = document.body.className;
c = c.replace(/tie-no-js/, 'tie-js');
document.body.className = c;
</script>
</body>
</html>
