Guide d'implémentation des données structurées JSON-LD

L'utilisation du balisage Schema sur votre site Web pour activer des extraits enrichis et augmenter votre présence dans les SERP n'est pas une nouvelle stratégie. Cependant, nous constatons généralement que nos nouveaux clients se sont peut-être déjà abstenus de le mettre en œuvre ou ont eu du mal à le faire par manque de temps ou de ressources.

Mais les maux de tête liés à la mise en œuvre de microdonnées en ligne appartiennent au passé. Google ne soutient pas seulement, mais vous conseille d'utiliser JSON-LD (JavaScript Object Notation for Linked Data) pour vos données structurées, ce qui est un grand pas en avant. Cela signifie qu'au lieu d'avoir à coder en dur les microdonnées en ligne, Google va désormais explorer JavaScript pour accéder à vos données structurées à la place.

C'est génial, car JSON-LD est plus facile à utiliser, et à lire et à écrire si vous le souhaitez. De plus, il existe maintenant plus de façons que jamais de mettre en œuvre vos données structurées.

« Mais, et si je ne sais pas écrire du JavaScript ? »

Les bonnes nouvelles ne s'arrêtent pas là. Cet article vous guidera à travers certaines des manières les plus simples d'implémenter vos données structurées, ainsi qu'une liste de ressources très utiles pour en savoir plus sur JSON-LD.

Outil de surligneur de données de Google

Tout d'abord, vous avez la possibilité d'utiliser l'outil Highlighter de Google Search Console, qui vous permet d'implémenter des données structurées sans avoir à regarder une seule ligne de code .

Vous pouvez ajouter un schéma pour une gamme de données, notamment des articles, des événements, des produits et des informations commerciales locales. L'outil vous donnera ensuite un aperçu de la page afin que vous puissiez directement mettre en évidence un contenu spécifique, en ajoutant le balisage pour vous comme vous le faites :

C'est le moyen le plus simple et le plus rapide d'ajouter des données structurées à votre site Web. Alors pourquoi s'embêter à le faire à la dure ?

Eh bien, le problème est que le surligneur de données de Google ne parle qu'à Google. Donc, même si c'est un bon endroit pour commencer, vous ne devriez pas vous arrêter là.

Nous assistons à des développements continus dans la façon dont Google utilise les données structurées. Plus récemment, il y a eu une annonce pour les cartes enrichies sur mobile :

Cela ne se limite pas non plus à Google : les géants des médias sociaux ont trouvé des moyens d'utiliser ces données. Pinterest, par exemple, permet à Rich Pins d'extraire des données sur les produits, les recettes, les lieux, etc.

Il y a beaucoup de choses intéressantes que vous pouvez faire avec le balisage Schema que vous ne pouvez pas faire non plus avec l'outil de surligneur de Google. Par exemple, pourquoi ne pas essayer d'ajouter vos profils de réseaux sociaux au panneau de connaissances comme ASOS ci-dessous :

Peut-être que vous souhaitez ajouter une barre de recherche de liens de site comme BuzzFeed ci-dessous, pour permettre aux gens de rechercher dans votre site Web à partir du SERP (c'est tellement méta) :

Pour toutes les raisons ci-dessus, nous vous conseillons vivement d'utiliser l'outil de surligneur de données de Google comme solution à court terme, tout en cherchant à vous assurer de coder votre balisage Schema sur vos pages Web comme une solution à l'épreuve du temps. Cela vous donnera la pleine propriété et la gestion de vos données structurées. Cela peut également vous être utile dans Bing et d'autres moteurs de recherche plus petits.

Méthodes simples pour ajouter un balisage de schéma

Si votre site Web est sur WordPress, vous pouvez utiliser un plugin tel que Schema Creator de Raven. Cet outil pratique vous guidera tout au long du processus et créera un shortcode pour chaque schéma que vous créez, vous permettant de le modifier par la suite :

Si vous n'utilisez pas WordPress et que vous souhaitez toujours coder manuellement vos données structurées JSON-LD, ou si vous souhaitez simplement en savoir plus sur le sujet, c'est ici qu'intervient Google Tag Manager !

Utiliser Google Tag Manager pour envoyer des données structurées

Ce qui est intéressant avec les moteurs de recherche prenant en charge JSON-LD, c'est qu'il sera récupéré n'importe où dans le code HTML, même s'il est inséré dynamiquement par un système de gestion de balises comme Google Tag Manager.

Se familiariser avec JSON-LD

Avant de commencer, vous devrez passer un peu de temps à vous familiariser avec JSON-LD. Heureusement, vous pouvez trouver de nombreuses ressources utiles en ligne, mais si vous ne vous sentez toujours pas en confiance, vous devrez consulter un développeur ou un professionnel du marketing expérimenté avec JSON-LD.

Voici quelques liens pour vous aider à démarrer :

• Documentation sur Schema.org, classée par type.
• JSON Playground, un endroit idéal pour jouer avec les informations que vous trouvez dans le lien ci-dessus, avec quelques exemples utiles pour vous aider à démarrer.
• Générateur JSON-LD du développeur James Flynn, très facile à utiliser et fait le travail dur pour vous.
• Guide de données structurées du monde réel de Search Engine News, avec des exemples d'extraits riches à l'état sauvage.

Guide étape par étape

Jetons maintenant un coup d'œil à un exemple facile à suivre d'utilisation de Tag Manager pour pousser les données structurées JSON-LS pour vous aider à démarrer. Remarque : Si vous n'utilisez pas déjà GTM pour déployer et gérer les balises marketing et analytiques, lisez ce guide de configuration et d'installation simple.

Première étape - Ajouter une balise

Tout d'abord, ajoutez une nouvelle balise :

Deuxième étape - Nommez votre tag

Donnez à votre tag un nom qui ait du sens. Dans cet exemple, je vais me concentrer sur l'ajout du balisage du schéma d'organisation :

Troisième étape - Sélectionnez une balise HTML personnalisée

Comme nous utilisons notre propre balisage JSON-LD, vous devez sélectionner l'option de balise HTML personnalisée et appuyer sur Continuer :

Quatrième étape - Entrez votre balisage JSON-LD

Vous devez maintenant entrer votre balisage dans la zone HTML. Dans cet exemple, j'ai utilisé le format JSON-LD pour l'organisation trouvé ici.

Cinquième étape - Choisissez quand la balise doit se déclencher

Pour cette configuration particulière, je souhaite sélectionner le feu sur toutes les pages, car il s'agit d'un balisage "Organisation" et donc à l'échelle du site. Pour ce faire, je peux simplement sélectionner « toutes les pages » avant d'enregistrer la balise. Mon implémentation est alors terminée :

Si vous souhaitez ajouter un schéma spécifique à une page ou à un groupe de pages particulier, vous pouvez utiliser l'option « certaines pages » pour spécifier une page spécifique :

Vous souhaiterez peut-être le faire si vous ajoutiez des informations sur les entreprises locales pour votre page de contact, ou si vous avez plusieurs emplacements commerciaux à baliser.

Astuce : Si vous souhaitez spécifier un groupe de pages, vous pouvez utiliser l'opération URL de la page « contient » ou l'opération RegEx (expression régulière).

Autre conseil : vous pouvez combiner vos données structurées (code) dans une seule balise HTML personnalisée ou des groupes logiques de balises pour réduire le nombre de balises que vous avez dans votre conteneur.

Sixième étape - Tests

Bien que vous puissiez utiliser le mode aperçu et débogage de Google Tag Manager pour tester si votre balise est déclenchée, vous devez également vous assurer qu'elle fonctionne en dehors de la plate-forme Tag Manager :

Google et Bing disposent tous deux d'outils pratiques pour tester vos données structurées et s'assurer que tout fonctionne comme il se doit. N'oubliez pas de publier d'abord la version de votre conteneur dans Tag Manager.

• Outil de test de données structurées de Google
• Validateur de balisage de Bing

Assurez-vous d'utiliser ces outils gratuits lorsque vous testez votre implémentation, que vous ayez utilisé un plug-in, Tag Manager ou codé en dur votre schéma. Google a récemment apporté quelques améliorations à son outil, en affinant des fonctionnalités telles que la mise en surbrillance, la recherche et le remplacement et la saisie semi-automatique.

Cette méthode vous permettra d'insérer un extrait JSON-LD sur une ou plusieurs pages sans problème. Mais si vous souhaitez devenir plus technique et utiliser Tag Manager pour générer dynamiquement votre extrait, par exemple en utilisant {{page URL}}, cela ne fonctionnera pas. Chris Goddard a récemment écrit un excellent article comprenant un travail de contournement sur le blog Moz.

Conclusion

Les développements récents au cours des dernières années ont rendu beaucoup plus facile la mise en œuvre du balisage Schema sur votre site Web. L'outil Data Highlighter de Google est un moyen simple d'ajouter rapidement un schéma au profit de Google, mais il est conseillé de prévoir de coder votre schéma, soit à l'aide de plug-ins, de Google Tag Manager, soit à la main.

L'implémentation de données structurées JSON-LD est désormais le moyen le plus largement accepté et recommandé de formater le balisage Schema. Bien que cela ne garantisse pas que vos résultats de recherche afficheront des extraits enrichis ou des cartes enrichies, cela ne devrait pas vous décourager de fournir aux moteurs de recherche les meilleures données possibles, à condition qu'elles soient correctement implémentées.

Si vous avez besoin d'aide pour mettre en œuvre des données structurées sur votre site Web, contactez-nous.

Si vous avez besoin d'aide avec votre n'hésitez pas à nous contacter.