Guide SEO pour l’écriture de données structurées (JSON-LD)

Simon

il y a 6 ans

Le vocabulaire de Schema.org est la collaboration ultime.

Grâce à une poignée de main mutuelle entre Google, Microsoft, Yahoo et Yandex, nous disposons d’une bibliothèque de champs que nous pouvons utiliser pour mettre en évidence et mieux définir les informations sur les pages Web. En utilisant des données structurées, nous fournissons aux moteurs de recherche plus de confiance (c’est-à-dire une meilleure compréhension du contenu des pages), comme l’explique Alexis Sanders dans ce merveilleux podcast. Cela peut avoir un certain nombre d’effets positifs, notamment des affichages SERP accrocheurs et des classements améliorés.

Si vous êtes un référenceur, êtes-vous confiant dans l’audit ou la création d’un balisage de données structuré à l’aide du vocabulaire Schema.org ? Si vous venez de vous déplacer inconfortablement dans votre siège, ce guide est fait pour vous. Dans ce document, mon objectif est de démystifier une partie de la syntaxe de JSON-LD ainsi que de partager des conseils utiles sur la création de données structurées pour les pages Web.

Comprendre la syntaxe de JSON-LD

Bien qu’il existe plusieurs façons de baliser le contenu d’une page, ce guide se concentrera sur le format préféré de Google. JSON-LD. De plus, nous n’aborderons pas toutes ses complexités, mais plutôt les instances les plus couramment rencontrées et utiles aux référenceurs.

Accolades

La première chose que vous remarquerez après la balise d’ouverture , une accolade fermée.

Toutes nos données structurées vivront à l’intérieur de ces deux accolades. Au fur et à mesure que nous construisons notre balisage, nous verrons probablement des accolades supplémentaires, et c’est là que l’indentation aide vraiment à éviter que les choses ne deviennent trop confuses !

Guillemets

La prochaine chose que vous remarquerez est les guillemets. Chaque fois que nous appelons un type de schéma, ou une propriété, ou remplissons un champ, nous mettrons les informations entre guillemets.

Colons

Viennent ensuite les deux-points (pas de rire). Fondamentalement, chaque fois que nous appelons un type ou une propriété, nous devons ensuite utiliser deux-points pour continuer à saisir des informations. C’est un séparateur de champ.

Virgules

Les virgules sont utilisées pour définir l’attente qu’une autre valeur (c’est-à-dire plus d’informations) arrive.

Notez qu’une fois le champ d’information de la propriété “logo” rempli, il n’y a pas de virgule. C’est parce qu’il n’y a pas d’informations supplémentaires à fournir.

Supports

Lorsque nous avons appelé une propriété qui comprend deux entrées ou plus, nous pouvons utiliser une parenthèse ouverte et une parenthèse fermée comme enceinte.

Voyez comment nous avons inclus les profils Facebook et Twitter de Go Fish Digital dans la propriété “sameAs” ? Puisqu’il y a plus d’une entrée, nous mettons les deux entrées entre parenthèses (j’appelle cela un tableau). Si nous n’incluions que l’URL de Facebook, nous n’utiliserions pas de crochets. Nous mettrons simplement la valeur (URL) entre guillemets.

Bretelles intérieures

Chaque fois que nous avons appelé une propriété qui a un “type” attendu, nous utiliserons des accolades intérieures pour entourer l’information.

Dans l’image ci-dessus, la propriété “contactPoint” a été appelée. Cette propriété particulière a un type attendu de “ContactPoint”. N’est-ce pas agréable et déroutant? Nous y reviendrons plus en détail plus tard, mais pour l’instant, notez simplement qu’après l’appel de la propriété « contactPoint », une accolade intérieure a été ouverte. Sur la ligne suivante, vous verrez le type ContactPoint appelé. Les propriétés de ce type ont été indiquées (“téléphone” et “contactType”), puis les accolades internes ont été fermées.

Il y a autre chose dans ce cas d’utilisation qui, si vous pouvez comprendre maintenant, vous évitera beaucoup d’ennuis à l’avenir :

Regardez comme il n’y a pas de virgule après “service client”. C’est parce qu’il n’y a plus d’informations à partager dans cet ensemble. Mais il y a une virgule après l’accolade intérieure fermée, car il y a plus de données à venir (en particulier, la propriété “sameAs”).

Créer un balisage de données structuré avec un générateur en ligne

Maintenant que nous en savons un peu plus sur la syntaxe, commençons à créer un balisage de données structuré.

Les générateurs en ligne sont parfaits si vous êtes débutant ou comme moyen de créer un balisage de base sur lequel construire (et gagner du temps). Mon préféré est le générateur de balisage Schema de Merkle, et c’est celui que j’utiliserai pour cette partie du guide.

Ensuite, vous devrez choisir une page et un type de balisage. Pour cet exemple, j’ai choisi https://gofishdigital.com/ comme page et Organisation comme type de balisage.

Après avoir rempli certaines informations, notre outil a créé un balisage de base fantastique pour la page d’accueil :

Espérons qu’après notre leçon sur la syntaxe, vous pourrez lire la plupart (ou la totalité) de cet exemple sans problème !

Création d’un balisage de données structurées personnalisé avec un éditeur de texte

Le balisage de base fera très bien l’affaire, mais nous pouvons aller au-delà des préréglages du générateur en ligne, prendre le contrôle total et écrire de belles données structurées personnalisées pour notre page. Sur https://schema.org/Organization, vous verrez toutes les propriétés disponibles qui relèvent du type de balisage Organisation. C’est bien plus que l’offre d’outils en ligne, alors retroussons nos manches et créons des ennuis !

Télécharger un éditeur de texte

À ce stade, nous devons ranger les roues d’entraînement et laisser les outils en ligne derrière nous (déchirure unique). Nous avons besoin d’un endroit où nous pouvons modifier et créer un balisage personnalisé. Je ne vais pas être gentil à ce sujet – obtenez un éditeur de texte MAINTENANT. Cela en vaut la peine et vous servira bien au-delà du balisage de données structurées. J’utiliserai mon éditeur de texte préféré, Sublime Text 3.

Conseil de pro : Accédez à Affichage > Syntaxe > Javascript > JSON pour définir votre syntaxe de manière appropriée.

Je suis allé de l’avant et j’ai collé un balisage d’organisation de base du générateur dans Sublime Text. Voici à quoi ça ressemble :

Ajouter des propriétés : mode facile

La page https://schema.org/Organization contient tous les champs disponibles pour le type d’organisation. Notre balisage de base ne contient pas d’informations sur les e-mails. J’ai donc examiné la page Schema et j’ai trouvé ceci :

La première colonne indique qu’il existe une propriété pour le courrier électronique. Score! J’ajouterai une virgule après notre parenthèse fermante pour configurer l’attente pour plus d’informations, puis j’ajouterai la propriété “email”:

La deuxième colonne sur Schema.org est le “type attendu”. Cette fois, il est écrit “texte”, ce qui signifie que nous pouvons simplement saisir l’adresse e-mail. Gosh, j’aime quand c’est facile.

Continuons à pousser. Je veux m’assurer que notre numéro de téléphone fait partie de ce balisage, alors voyons s’il y a une propriété pour ça…

Bingo. Et le type attendu est simplement “texte”. Je vais ajouter une virgule après la propriété “email” et ajouter “téléphone”. Pas besoin de mettre en évidence quoi que ce soit dans cet exemple ; Je peux dire que vous prenez le coup.

Ajouter des propriétés : mode difficile

Ensuite, nous allons ajouter une propriété un peu plus compliquée : la propriété « address ». Tout comme “e-mail” et “téléphone”, suivons-le sur https://schema.org/Organization.

Donc, je vois “texte”, mais je vois aussi un type attendu de “PostalAddress”. Le nom du jeu avec le balisage des données est : si vous pouvez être plus précis, soyez plus précis. Cliquons sur “PostalAddress” et voyons ce qu’il y a.

Je vois un certain nombre de propriétés qui nécessitent des valeurs de texte simples. Choisissons quelques-unes de ces propriétés et ajoutons-y notre balisage “adresse” !

Voici les étapes que j’ai suivies pour ajouter ce balisage :

Placer une virgule après la propriété “téléphone”
Appelée la propriété “adresse”
Étant donné que la propriété “address” a un type attendu, j’ai ouvert des accolades internes
Appelé le type “PostalAddress”
Appelé les propriétés dans le type “PostalAddress”
Fermé les accolades intérieures

Pouvez-vous repérer tout cela sur l’image ci-dessus? Si c’est le cas, félicitations ! Vous avez terminé le mode difficile !

Création d’un tableau complexe

Dans notre discussion sur les parenthèses, j’ai mentionné un tableau. Les tableaux peuvent être utilisés lorsqu’une propriété (par exemple “sameAs”) a deux entrées ou plus.

C’est un excellent exemple de tableau simple. Mais il y aura des moments où nous devrons créer des tableaux complexes. Par exemple, Go Fish Digital a deux emplacements différents. Comment créerions-nous un tableau pour cela?

Ce n’est pas si complexe si on le décompose. Après les informations sur la Caroline du Nord, vous verrez une accolade intérieure fermée. Je viens d’entrer une virgule, puis j’ai ajouté le même type (PostalAddress) et les mêmes propriétés pour l’emplacement de Virginie. Puisque deux entrées ont été faites pour la propriété “address”, j’ai mis le tout entre parenthèses.

Création d’un tableau de nœuds à l’aide de @graph

Le 16 avril 2019, Joost de Valk de Yoast a annoncé l’arrivée de Yoast SEO 11.0, qui offrait de nouvelles capacités de balisage de données structurées. Vous pouvez obtenir un aperçu de la mise à jour dans cet article et à partir de cette vidéo. Cependant, j’aimerais approfondir une technique particulière que Yoast utilise pour offrir aux moteurs de recherche un balisage connecté incroyablement informatif : créer un tableau de nœuds à l’aide de @graph (*la foule halète).

Le code s’ouvre avec “@graph” puis un crochet ouvrant, qui appelle un tableau. Il s’agit de la même technique utilisée dans la section ci-dessus intitulée “Création d’un tableau complexe”. Avec le tableau maintenant ouvert, vous verrez une série de nœuds (ou types de schéma) :

Organisme
Site Internet
Page web
Fil d’ArianeListe
Article
La personne

J’ai séparé chacun (voir ci-dessous) afin que vous puissiez facilement voir comment le tableau est organisé. Il y a beaucoup de propriétés appelées dans chaque nœud, mais la vraie magie est avec “@id”.

Sous le WebPlacer node, ils appellent “@id” et indiquent l’URL suivante : https://yoast.com/#website. Plus tard, après avoir établi le WebPage node, ils disent que la page Web fait partie du site Web yoast.com avec la ligne suivante :

"isPartOf":{"@id":"https://yoast.com/#website"}

À quel point est-ce génial ? Ils ont établi des informations sur le site Web et une page Web spécifique, puis ont établi un lien entre les deux.

Yoast fait la même chose sous le nœud Article. Tout d’abord, sous WebPage, ils appellent à nouveau “@id” et indiquent l’URL comme https://yoast.com/wordpress-seo/#webpage. Ensuite, sous Article, ils indiquent aux moteurs de recherche que l’article (ou le billet de blog) fait partie de la page Web avec le code suivant :

"isPartOf":{"@id":"https://yoast.com/wordpress-seo/#webpage"}

En lisant le balisage ci-dessous, portez une attention particulière à ces deux éléments :

Les 6 nœuds listés ci-dessus, chacun séparé pour une meilleure visualisation
Les appels “@id” et “isPartOf”, qui définissent, établissent et connectent les éléments du tableau

Bravo Yoast !

Page source: https://yoast.com/wordpress-seo/

<script type="application/ld+json">
{"@context":"https://schema.org",
"@graph":[
{
"@type":"Organization",
"@id":"https://yoast.com/#organization",
"name":"Yoast",
"url":"https://yoast.com/",
"sameAs":
["https://www.facebook.com/yoast",
"https://www.instagram.com/yoast/",
"https://www.linkedin.com/company/1414157/",
"https://www.youtube.com/yoast",
"https://www.pinterest.com/yoast/",
"https://en.wikipedia.org/wiki/Yoast",
"https://twitter.com/yoast"],
"logo":{"@type":"ImageObject",
"@id":"https://yoast.com/#logo", 
"url":"https://yoast.com/app/uploads/2015/09/Yoast-Logo-Icon-120x120.png",
"caption":"Yoast"},
"image":{"@id":"https://yoast.com/#logo"}},
{
"@type":"WebSite",
"@id":"https://yoast.com/#website",
"url":"https://yoast.com/",
"name":"Yoast",
"publisher":{"@id":"https://yoast.com/#organization"},
"potentialAction":{"@type":"SearchAction",
"target":"https://yoast.com/?s={search_term_string}",
"query-input":"required name=search_term_string"}},
{
"@type":"WebPage",
"@id":"https://yoast.com/wordpress-seo/#webpage",
"url":"https://yoast.com/wordpress-seo/",
"inLanguage":"en-US",
"name":"WordPress SEO Tutorial \u2022 The Definitive Guide \u2022 Yoast",
"isPartOf":{"@id":"https://yoast.com/#website"},
"image":{"@type":"ImageObject",
"@id":"https://yoast.com/wordpress-seo/#primaryimage",
"url":"https://yoast.com/app/uploads/2008/04/WordPress_SEO_definitive_guide_FI.png",
"caption":""}, 
"primaryImageOfPage":{"@id":"https://yoast.com/wordpress-seo/#primaryimage"},
"datePublished":"2019-03-28T14:05:01+00:00",
"dateModified":"2019-04-11T12:24:14+00:00",
"description":"This is the ONLY tutorial you'll need to hugely increase your search engine traffic by improving your WordPress SEO. Want higher rankings? Read on!",
"breadcrumb":{"@id":"https://yoast.com/wordpress-seo/#breadcrumb"}},
{
"@type":"BreadcrumbList",
"@id":"https://yoast.com/wordpress-seo/#breadcrumb",
"itemListElement":[
{
"@type":"ListItem",
"position":1,
"item":
{"@type":"WebPage",
"@id":"https://yoast.com/",
"url":"https://yoast.com/",
"name":"Home"}},
{
"@type":"ListItem",
"position":2,
"item":{"@type":"WebPage",
"@id":"https://yoast.com/seo-blog/",
"url":"https://yoast.com/seo-blog/",
"name":"SEO blog"}},
{
"@type":"ListItem",
"position":3,
"item":{"@type":"WebPage",
"@id":"https://yoast.com/tag/wordpress/",
"url":"https://yoast.com/tag/wordpress/",
"name":"WordPress"}},
{
"@type":"ListItem",
"position":4,
"item":{"@type":"WebPage",
"@id":"https://yoast.com/wordpress-seo/",
"url":"https://yoast.com/wordpress-seo/",
"name":"WordPress SEO: the definitive guide"}}]},
{
"@type":"Article",
"@id":"https://yoast.com/wordpress-seo/#article",
"isPartOf":{"@id":"https://yoast.com/wordpress-seo/#webpage"},
"author":{"@id":"https://yoast.com/about-us/team/joost-de-valk/#author",
"name":"Joost de Valk"},
"publisher":{"@id":"https://yoast.com/#organization"},
"headline":"WordPress SEO: the definitive guide",
"datePublished":"2019-03-28T14:05:01+00:00",
"dateModified":"2019-04-11T12:24:14+00:00",
"commentCount":"4",
"mainEntityOfPage":"https://yoast.com/wordpress-seo/#webpage",
"image":{"@id":"https://yoast.com/wordpress-seo/#primaryimage"},
"keywords":"Content SEO, Google Analytics, Mobile SEO, Security, Site Speed, Site Structure,
Technical SEO, WordPress, Yoast SEO"},
{
"@type":"Person",
"@id":"https://yoast.com/about-us/team/joost-de-valk/#author",
"name":"Joost de Valk",
"image":{"@type":"ImageObject",
"@id":"https://yoast.com/#personlogo",
"url":"https://yoast.com/app/uploads/2018/09/avatar_user_1_1537774226.png",
"caption":"Joost de Valk"},
"description":"Joost de Valk is the founder and Chief Product Officer of Yoast and the Lead
Marketing & Communication for WordPress.org. He's a digital marketer, developer and an Open Source fanatic.",
"sameAs":[
"https://www.facebook.com/jdevalk",
"http://www.linkedin.com/in/jdevalk",
"https://twitter.com/jdevalk"]}
]}</script>

Dépannage de votre balisage

Avec tous ces crochets, accolades et virgules en jeu, des erreurs peuvent se produire. Alors, comment les détecter et les corriger ?

Rapport d’erreur Sublime Text

Si vous avez suivi mon conseil professionnel ci-dessus et défini votre syntaxe sur JSON, Sublime Text mettra en évidence certaines erreurs pour vous.

Sublime Text a détecté une erreur et fait un surlignage. Il est important de noter que les erreurs sont “signalées” de trois manières :

L’erreur est l’élément en surbrillance.
L’erreur se trouve quelque part sur la ligne en surbrillance.
L’erreur se situe quelque part dans un champ précédent.

Dans ce cas, c’est la troisième option. L’avez-vous repéré ? Il manque une virgule après “info@gofishdigital.com”.

Honnêtement, ce rapport d’erreur peut être déroutant au début, mais vous vous y habituerez rapidement et commencerez à identifier la ou les erreurs assez facilement.

Rapport d’erreurs de l’outil de données structurées de Google

Accédez à https://search.google.com/structured-data/testing-tool > Nouveau test > Extrait de code. Collez et exécutez votre code. S’il y a une erreur, voici ce que vous verrez :

Cliquez sur le rapport d’erreur et l’outil mettra en surbrillance le champ après l’erreur. Comme vous le verrez, la virgule manquante après “info@gofishdigital” a amené l’outil à mettre en surbrillance “téléphone”. La logique est que sans la virgule, cette ligne est en fait l’erreur. Cela a un sens logique, mais peut prêter à confusion, il convient donc de le souligner.

Fonction de soulignement “caché” de Sublime Text

La validation du balisage de données structurées peut être exaspérante, et chaque petite astuce aide. Au fur et à mesure que vos données structurées se compliquent, le nombre de sections, de crochets et d’accolades est susceptible d’augmenter. Sublime Text a une fonctionnalité que vous n’avez peut-être pas remarquée qui peut vous aider à garder une trace de tout !

Dans l’image ci-dessus, j’ai placé mon curseur sur la première ligne associée à la propriété “sameAs”. Regardez attentivement et vous remarquerez que Sublime Text a souligné les crochets associés à ce groupement. Si le curseur est placé n’importe où à l’intérieur du groupement, vous aurez besoin de ces traits de soulignement.

J’utilise souvent cette fonctionnalité pour faire correspondre mes crochets et/ou accolades afin d’être sûr de ne pas en avoir oublié ou ajouté un extra.

Validation de vos données structurées

Bien sûr, le but ultime de toute cette vérification d’erreur est de faire valider votre code. Les conseils de dépannage ci-dessus vous aideront à développer une méthode de vérification des erreurs à toute épreuve, et vous vous retrouverez avec le sentiment euphorique que donne le balisage validé !

Utilisation de la recherche Google pour les cas uniques

Les leçons et les exemples de ce guide devraient fournir une base de connaissances solide et polyvalente pour la plupart des référenceurs. Mais vous pouvez rencontrer une situation que vous ne savez pas comment gérer. Dans ces cas, Google-le. J’ai beaucoup appris sur les données structurées JSON-LD et le vocabulaire Schema en étudiant des cas d’utilisation (certains qui ne correspondent que vaguement à ma situation) et en jouant avec le code. Vous rencontrerez de nombreuses techniques d’imbrication intelligentes et uniques qui vous feront vraiment tourner les roues.

Les données structurées et l’avenir de la recherche

Les rumeurs sont que les données structurées ne feront que devenir plus importantes pour aller de l’avant. C’est l’une des façons dont Google recueille des informations sur le Web et le monde en général. Il est dans votre intérêt en tant que référenceur de dénouer le nœud des données structurées JSON-LD et du vocabulaire Schema, et j’espère que ce guide vous a aidé à le faire.

(Article traduit de moz.com)