Les donn\u00e9es structur\u00e9es sont, \u00e0 ce stade, une tactique de r\u00e9f\u00e9rencement de base.<\/strong> <\/p>\n Non seulement cela enl\u00e8ve une couche d’ambigu\u00eft\u00e9 pour les moteurs de recherche (ils n’ont pas \u00e0 d\u00e9duire ce qu’est une donn\u00e9e ; vous leur dites directement), mais c’est aussi le moteur qui g\u00e9n\u00e8re des r\u00e9sultats riches, qu’ils acqui\u00e8rent une quantit\u00e9 croissante de biens immobiliers dans les SERP.<\/p>\n L’av\u00e8nement de la recherche vocale fait des donn\u00e9es structur\u00e9es une partie encore plus importante de la bo\u00eete \u00e0 outils du sp\u00e9cialiste du marketing de recherche. De la m\u00eame mani\u00e8re que les donn\u00e9es structur\u00e9es permettent aux moteurs de recherche d’extraire et de rejouer des donn\u00e9es riches dans le SERP, cette extraction et cette relecture d’entit\u00e9s sont au c\u0153ur des r\u00e9sultats de la recherche vocale.<\/p>\n Malheureusement, la mise en \u0153uvre de donn\u00e9es structur\u00e9es via un balisage s\u00e9mantique peut prendre du temps et \u00eatre frustrante. Jusqu’\u00e0 relativement r\u00e9cemment, la seule fa\u00e7on d’impl\u00e9menter le balisage s\u00e9mantique \u00e9tait de le faire en ligne<\/i>, en ajoutant des attributs HTML de Schema.org au code HTML existant d’une page. <\/p>\n Pour le faire \u00e0 grande \u00e9chelle, cela n\u00e9cessitait historiquement d’apporter des modifications aux th\u00e8mes ou aux mod\u00e8les de la page, ce qui pourrait \u00eatre une grande question de d\u00e9veloppement en fonction des param\u00e8tres de votre site. <\/p>\n De plus, le balisage en ligne est par nature li\u00e9 \u00e0 la couche de pr\u00e9sentation : il ne pouvait pas marquer les donn\u00e9es qui n’\u00e9taient pas sur la page (\u00e0 l’exception d’une utilisation judicieuse des balises meta), et si deux donn\u00e9es n’\u00e9taient pas pr\u00e9sentes sur la page. S’ils sont ensemble sur la page, il peut \u00eatre difficile, voire impossible, de les lier dans une seule balise itemScope.<\/p>\n Heureusement, l’\u00e9poque o\u00f9 nous luttions pour classer nos donn\u00e9es dans des formulaires faciles \u00e0 baliser est r\u00e9volue : il est d\u00e9sormais possible d’ajouter des donn\u00e9es structur\u00e9es en quelques minutes \u00e0 l’aide de JSON-LD. Ce balisage est d\u00e9sormais enti\u00e8rement compatible avec Google et Bing ; en fait, Google recommande d’ajouter des donn\u00e9es structur\u00e9es via JSON-LD plut\u00f4t qu’en ligne pour les comptes Merchant Center.<\/p>\n Dans un souci d’illustration claire et efficace, nous utiliserons un cas d’utilisation assez simple dans cette premi\u00e8re \u00ab section JSON-LD statique \u00bb. Nous irons plus loin une fois arriv\u00e9s \u00e0 \u00ab\u00a0Dynamic JSON-LD\u00a0\u00bb. <\/p>\n Sachez que m\u00eame l’exemple le plus avanc\u00e9 n’est que la pointe de l’iceberg ; presque rien n’est interdit en ce qui concerne le niveau de complexit\u00e9 que les donn\u00e9es structur\u00e9es inject\u00e9es par Google Tag Manager peuvent prendre en charge.<\/p>\n JSON-LD statique peut \u00eatre ajout\u00e9 \u00e0 <\/p>\n \u00e0 partir de la page correspondante, ou int\u00e9gr\u00e9 \u00e0 un plugin, mais le moyen le plus simple (et le plus flexible) de le mettre en \u0153uvre, \u00e0 mon avis, est via Google Tag Manager (GTM).<\/p>\n Si vous n’\u00eates pas familier avec JSON-LD, vous voudrez peut-\u00eatre faire une petite lecture ou un tutoriel rapide pour vous familiariser avec les bases. L’introduction aux donn\u00e9es structur\u00e9es de Google est un bon point de d\u00e9part. Selon le type de sch\u00e9ma que vous utilisez, schema.org peut \u00e9galement avoir des exemples de balisage JSON-LD pour ce type d’\u00e9l\u00e9ment.<\/p>\n Exemple JSON-LD pour le type d’\u00e9l\u00e9ment d’\u00e9v\u00e9nement dans schema.org<\/p>\n Apr\u00e8s la balise de script initiale, qui indique au navigateur \u00ab\u00a0ceci est un script JSON-LD\u00a0\u00bb, vous pouvez voir la hi\u00e9rarchie de notre script\u00a0:<\/p>\n Notez que lorsque nous nous r\u00e9f\u00e9rons aux sous-types comme Place, nous devons appeler ce @type s\u00e9par\u00e9ment et mettre ce sous-type dans son propre ensemble de crochets pour indiquer quelles propri\u00e9t\u00e9s imbriqu\u00e9es appartiennent \u00e0 ce sous-type. <\/p>\n N’oubliez pas de mettre une virgule apr\u00e8s chaque propri\u00e9t\u00e9 sauf la derni\u00e8re avant un crochet de fin, ou votre code ne sera pas analys\u00e9 correctement (et c’est ennuyeux de chercher dans votre code pour trouver la virgule manquante)\u00a0!<\/p>\n Une fois que vous avez \u00e9crit votre code, testez-le dans l’outil de test de donn\u00e9es structur\u00e9es de Google pour vous assurer que tout semble correct et que vous ne manquez pas les propri\u00e9t\u00e9s requises.<\/p>\n Dans Google Tag Manager, nous souhaitons cr\u00e9er un d\u00e9clencheur pour que notre balise de balisage JSON-LD se d\u00e9clenche sur la page sur laquelle nous voulons qu’elle se d\u00e9clenche\u00a0; Dans l’exemple ci-dessus, ce serait sur la page de l’\u00e9v\u00e9nement Typhoon with Radiation City.<\/p>\n Cr\u00e9ez le d\u00e9clencheur\u00a0:<\/p>\n Voici \u00e0 quoi devraient ressembler les param\u00e8tres de d\u00e9clenchement<\/p>\n Il est maintenant temps de cr\u00e9er la balise qui se d\u00e9clenchera sur notre page de destination et d’injecter nos donn\u00e9es structur\u00e9es JSON-LD.<\/p>\n Cr\u00e9ez l’\u00e9tiquette\u00a0:<\/p>\n Voici \u00e0 quoi devraient ressembler les param\u00e8tres des balises<\/p>\n Apr\u00e8s avoir publi\u00e9 la balise, repositionnez l’URL de la page via l’outil de test des donn\u00e9es structur\u00e9es pour v\u00e9rifier que Google peut l’analyser et la comprendre.<\/p>\n Voila, vous avez termin\u00e9 !<\/p>\n Si vous n’ajoutez pas de nouvelles pages \u00e0 votre site tous les jours et que les pages qui s’y trouvent ne changent pas aussi souvent, des donn\u00e9es structur\u00e9es via JSON-LD statique peuvent suffire. <\/p>\n Pour les sites tels que les sites de commerce \u00e9lectronique, qui peuvent contenir des milliers de produits dont le prix et la disponibilit\u00e9 peuvent \u00eatre sujets \u00e0 changement, le JSON-LD statique n’est tout simplement pas \u00e9volutif. Nous devons avoir un peu de fantaisie.<\/p>\n Puisque nous voulons que ce script soit dynamique, nous devrons utiliser des variables GTM pour trouver les donn\u00e9es dont nous avons besoin et leur donner des noms que notre script peut comprendre.<\/p>\n Cr\u00e9ez une nouvelle variable (d\u00e9finie par l’utilisateur). Dans cet exemple, nous cr\u00e9ons une variable pour prendre le nom du produit :<\/p>\n R\u00e9p\u00e9tez cette \u00e9tape pour chaque propri\u00e9t\u00e9 que vous devez extraire pour valider vos donn\u00e9es structur\u00e9es.<\/p>\n Malheureusement, nous ne pouvons pas simplement mettre nos variables dans notre code JSON-LD et y mettre fin. Google Tag Manager ins\u00e8re JavaScript pour renvoyer ses variables et ce JavaScript remplacera notre code. <\/p>\n 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\u00e9rera une balise de script JSON-LD compl\u00e8te dans l’en-t\u00eate de la page. <\/p>\n Le script termin\u00e9 dans la balise HTML personnalis\u00e9e (dans GTM) devrait ressembler \u00e0 ceci\u00a0: <\/p>\n Certains ajustements et manipulations peuvent \u00eatre n\u00e9cessaires pour extraire vos donn\u00e9es exactement comme vous le souhaitez ; Heureusement, la fonctionnalit\u00e9 de pr\u00e9visualisation de GTM vous permettra de tester tout ce dont vous avez besoin avant le d\u00e9ploiement.<\/p>\n Malheureusement, vous ne pouvez pas utiliser GTM pour injecter des donn\u00e9es structur\u00e9es JSON-LD dans des pages AMP. Les conteneurs GTM pour AMP, comme la plupart des choses pour AMP, sont des versions r\u00e9duites d’eux-m\u00eames. Ils ne prennent pas en charge les balises HTML personnalis\u00e9es ou les variables JavaScript personnalis\u00e9es, car leur chargement peut prendre trop de temps. <\/p>\n Si votre site utilise AMP, vous voudrez peut-\u00eatre envisager le balisage en ligne apr\u00e8s tout.<\/p>\n Une fois que vous avez cette m\u00e9thodologie \u00e0 votre disposition, vous constaterez que la mise en \u0153uvre de donn\u00e9es structur\u00e9es est pass\u00e9e d’un travail fastidieux consistant \u00e0 ajouter un balisage en ligne et \u00e0 ennuyer vos d\u00e9veloppeurs \u00e0 quelque chose que vous pouvez cr\u00e9er et mettre en \u0153uvre en quelques minutes. <\/p>\n Mieux encore, le balisage JSON-LD est enti\u00e8rement valid\u00e9, vous obtenez des extraits enrichis et est d\u00e9sormais 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.<\/p>\n Ruth Burr Reedy est directrice de la strat\u00e9gie chez UpBuild.<\/p>\n <\/span>JSON-LD statique<\/b><\/span><\/h2>\n
<\/span>Premi\u00e8re \u00e9tape\u00a0: \u00e9crivez le JSON-LD<\/b><\/span><\/h3>\n
![\"\"](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1635162366_911_Como-implementar-el-marcado-semantico-con-Google-Tag-Manager.png\")
<\/p>\n\n
<\/span>Deuxi\u00e8me \u00e9tape\u00a0: cr\u00e9er un d\u00e9clencheur<\/b><\/span><\/h3>\n
\n
![\"\"](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1635162367_385_Como-implementar-el-marcado-semantico-con-Google-Tag-Manager.png\")
<\/p>\n<\/span>Troisi\u00e8me \u00e9tape\u00a0: cr\u00e9er l’\u00e9tiquette<\/b><\/span><\/h3>\n
\n
![\"\"](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1635162367_849_Como-implementar-el-marcado-semantico-con-Google-Tag-Manager.png\")
<\/p>\n<\/span>Quatri\u00e8me \u00e9tape\u00a0: publier et tester<\/b><\/span><\/h3>\n
<\/span>JSON-LD dynamique<\/b><\/span><\/h2>\n
<\/span>Premi\u00e8re \u00e9tape\u00a0: cr\u00e9er des variables \u00e0 l’aide du s\u00e9lecteur CSS<\/b><\/span><\/h3>\n
\n
![\"\"](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1635162369_434_Como-implementar-el-marcado-semantico-con-Google-Tag-Manager.png\")
<\/p>\n<\/span>Deuxi\u00e8me \u00e9tape\u00a0: rassembler dans une expression de fonction<\/b><\/span><\/h3>\n
![\"\"](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1635162369_472_Como-implementar-el-marcado-semantico-con-Google-Tag-Manager.png\")
<\/p>\n<\/span>Balisage JSON-LD et AMP<\/b><\/span><\/h2>\n