Données Structurées JSON-LD : Guide d’implémentation

Une page web balisée par des Données structurées au format JSON-LD sera mieux comprise par Google.

Pourquoi choisir d’implémenter les Données Structurées sous ce format ?

L’implémentation des Données structurées implique des choix techniques. Traditionnellement, on implémente des microdonnées, un format “inline”, imbriqué dans le code HTML de la page : un élément est entouré directement de balises supplémentaires. Ce n’est plus recommandé : cette méthode alourdit le code, le rend moins lisible et disperse vos Données Structurées. A l’inverse, un JSON-LD regroupe tous vos champs en un script propre et ordonné, facilement survolable à l’oeil nu.

Le choix du JSON-LD fait, tout dépend de la lourdeur technique et de la fréquence d’actualisation de votre site. Un site mis à jour une fois par mois tel un blog (vous en lisez un en ce moment même) peut se permettre de coder son JSON-LD à la main. S’il y a un peu plus de mouvement, une automatisation est nécessaire. Si votre CMS est flexible (un WordPress en PHP, par exemple), laissez-le générer les Données Structurées lui-même. Elles seront directement présentes dans le code HTML, c’est la meilleure des méthodes. Si c’est trop complexe, une solution de facilité reste de passer par Google Tag Manager (ou autre TMS) qui les générera en JavaScript, avec les risques que cela implique (une moins bonne lisibilité pour les moteurs de recherche, même Google).

Donnees-structurees-implementation

Ce qu’est le JSON-LD

Le JSON-LD (JavaScript Object Notation for Linked Data) est un format d’implémentation des Données Structurés. Il est une déclinaison du JSON, JavaScript Object Notation, dérivé du JavaScript.

Le format permet d’intégrer les données sous forme de métadonnées, plutôt qu’un balisage du code source existant comme avec les formats Microdonénes et RDFa. Ce qui lui permet d’être divisé en plusieurs blocs lisibles, plutôt que ventilé dans le code, donc difficile à survoler d’un coup d’oeil.

Il est pris en compte par les moteurs de recherche principaux, de Yandex à Bing et notamment par Google qui le préconise comme format privilégié pour les données structurées.

microdonnees-json-ld

Les mêmes informations balisées en Microdonnées (gauche) et en JSON-LD (droite)

Syntaxe et implémentation

  • Le langage JSON-LD se présente sous la forme de paires nom/valeur (name-value pairs)
  • L’élément de contexte indique la référence sur laquelle se baser pour mieux comprendre le code (à destination des moteurs de recherche).
  • Le schéma / type annonce le type d’élément qui sera balisé.

Ces balises introductives désignent le projet Schema.org, et le site encycolpédique qui sert de référence aux types d’éléments disposant d’un balisage.

Appeler le script

Le JSON-LD étant du JS, c’est un script au sein du code HTML, donc à déclarer par la balise <script>.

Déclarer le contexte

Le Contexte indique le vocabulaire auquel on fait référence pour baliser les données. Sauf méthodes avancées, on déclare toujours Schema.org.

Déclarer le type

L’entité que l’on appelle est désignée par le Type. Dans d’autres formats, c’est l’itemtype.

Définir les propriétés

Important : Après chaque propriété, excepté la dernière, vous devez terminer la ligne par une virgule. Elle indique que d’autres propriétés suivent. Le faire sur la dernière des propriétés générera donc une erreur

Propriétés imbriquées / enfantes

Pour déclarer une propriété avec un nouveau Type, il suffit d’ouvrir des {}
A leur fermeture, vous repartez dans l’entité parente. La profondeur est illimitée.

erreur-json-ld

Vous verrez souvent cette erreur

La validation du code par l’outil Google

Comme tout bon JavaScript codé à la main, les erreurs de parsing sont légion. L’outil de test des Données Structurées vous indiquera la ligne fautive, avec un indice pour la résolution (davantage que la solution).

Les propriétés exigées / recommandées

L’outil indique quelles propriétés sont nécessaires pour proposer un balisage minimal. Certaines sont recommandées, ce qui annonce une prise en compte possible ou future de Google, donc à ne pas négliger afin d’être exhaustif.

Attention à la casse : le vocabulaire utilisé est sensible à la casse. WebPage fonctionnera, webpage beaucoup moins.

Anecdote SEO technique

Tout visiteur de site (humain ou machine) décline une partie de son identité en tant qu’User Agent. L’outil de test des Données Structurées a le sien propre, contrairement aux autres outils de Google : Google-User-Agent-Structured-Data<!–User-agent: Mozilla/5.0 (compatible; Google-Structured-Data-Testing-Tool +https://search.google.com/structured-data/testing-tool) –>

Le résultat chez Google : les Rich Snippets – Extraits enrichis

Attention : Schema.org propose à l’heure actuelle 583 types d’éléments, Google est très loin de tous les prendre en compte.

La tentation du cloaking est toujours présente : le code étant invisible pour l’internaute, déclarer des informations différentes pour les moteurs est facile. On peut chercher à afficher un prix faible et une note favorable dans ses Rich Snippets tandis que la fiche produit présente un produit cher et mal noté. Google a d’abord privilégié les formats RDFa et Microdonnées du fait de leur transparence : le balisage porte sur des éléments visibles de la page. Le JSON-LD est maintenant favorisé, mais Google surveille les abus potentiels et les pénalise.

La syntaxe est complexe pour des non-développeurs. Comme souvent en code informatique, les autres sites sont les meilleurs formateurs (involontaires). N’hésitez pas à vérifier le balisage des pages des grands sites, notamment e-commerce.

Mes Rich Snippets ne s’affichent pas !

Google nous livre des explications possibles sur ce qui pourrait amener le non-affichage des extraits enrichis , précisant ses consignes habituelles :

  • le balisage est erronné, d’une manière telle que l’outil de validation des Données structurées n’était pas capable de les comprendre. L’erreur est évitable, Google a développé cet outil justement dans le but de validerla conformité de son code avant publication. Soit l’outil ne détecte rien, soit il relève une erreurs d’encodage, courantes en JSON-LD.
  • les données structurées ne sont pas représentatives du contenu de la page, voire même potentiellement trompeuses. Exemple : afficher un prix supérieur dans une page produit que celui indiqué dans le balisage, dans le but d’afficher un montant faible dans les résultats de recherche.
  • Les données balisées sont masquées à l’internaute, invisibles sur la page. L’intention ici serait d’afficher une page épurée à l’internaute, dans le style très visuel qu’ont les sites modernes, tout en proposant un maximum de données à Google .

Attention : dans la Search Console de Google, un rapport est dédié aux Données Structurées, et indique lesquelles ont été détectées par Google. Ce qui permet également de déceler de potentielles erreurs de marquage. Leur détection n’assure pas pour autant un affichage dans les SERP. Le meilleur indicateur est le nombre d’Impressions comportant un Résultat Enrichi, qui est un filtre dans le rapport d’Analyse de la recherche.

Types de Données Structurées

Breadcrumb

Sans doute le format le plus courant, étant donné son universalité : tous les types de sites peuvent l’implémenter. Son utilité est de remplacer visuellement l’URL complète par le chemin de navigation (donc le Fil d’Ariane d’une page) dans les SERP, rendant le snippet plus lisible.

Donnees-Structurees-Breadcrumb

En JSON-LD, le type BreadcrumbList est conseillé. On renseigne au sein d’une liste (itemListElement) chaque élément du Fil d’Ariane (ListItem) avec sa Position, son id (l’URL) et son nom.

Donnees-Structurees-Fil-Ariane-Exemple

SearchResultsPage

Il est possible de baliser une page de résultats. L’ironie est que Google balise lui-même ses SERP… En regardant dans le code HTML, on remarque dès la première ligne un marquage (en Microdonnées) de type SearchResultsPage. Assez minimaliste : seuls sont indiqués le itemtype et l’image (les autres champs possibles sont issus des types WebPage, CreativeWork et Thing).

donnees-structurees-searchresultspage-google

Une page de résultats ayant rarement vocation à être indexée par Google, ce marquage n’est pas d’une grande utilité. Même les e-commerçants les plus agressifs ne l’ont pas implémenté.

 

[Total : 17    Moyenne : 4.7/5]
Pour marque-pages : Permaliens.

Les commentaires sont fermés