Une page web balisée par des Données structurées au format JSON-LD sera mieux comprise par Google.
Contents
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).
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 Microdonnées 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.
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 encyclopé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.
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 (Résultats Enrichs) 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 : <!–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 erroné, 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 valider la 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.
- Google serre la vis et affiche ce qu’il veut, parfois des Rich Snippets pour vos concurrents, parfois pour personne. Vous pouvez les perdre du jour au lendemain sans raison.
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
Fil d’Ariane – 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.
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.
Liste de résultats – 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).
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é.
Produit – Product
Le balisage d’une fiche produit est le plus courant et le plus efficace en termes de Rich Snippets, grace a la quantité d’informations visuelles s’affichant dans les SERP :
- prix
- disponibilité
- moyenne des avis (étoiles et chiffre)
Démonstration de balisage pour une fiche produit d’une plante, sur le site d’une jardinerie :
<scripttype="application/ld+json">{
"@context": "http://schema.org/",
"@type": "Product",
"url": "https://jardinerieformidable.com/crassula.html",
"sku": "6902",
"name": "Crassula",
"image": [
"https://images.jardinerieformidable.com/crassula1.jpg",
"https://images.jardinerieformidable.com/crassula2.jpg",
],
"description": "Crassula est un genre botanique appartenant à la famille des Crassulaceae et comprenant 300 espèces de plantes succulentes originaires d'Afrique du Sud, incluant le célèbre arbre de Jade, Crassula ovata.",
"isSimilarTo": [
"https://www.jardinerieformidable.com/crassula-aussi.html",
"https://www.jardinerieformidable.com/crassula-toujours.html"
],
"color": "Vert",
"height": 20,
"width": 10,
"additionalType": "http://www.productontology.org/doc/Plant",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "32"
},
"offers": {
"@type": "Offer",
"url": "https://jardinerieformidable.com/crassula.html",
"priceCurrency": "EUR",
"price": "6.05",
"availability": "http://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "Jardinerie Formidable"
}
}
}</script>
Ressources pédagogiques / éducatives
Cas assez particulier ne disposant pas d’un type propre, les ressources éducatives sont des CreativeWork. On doit préciser le public visé à l’aide des propriétés Audience et du type EducationalAudience avec le champ educationalRole. Ensuite, on précise par la propriété educationalAlignment le niveau scolaire (educationalLevel) et la matière scolaire concernée (educationalSubject). Démonstration :
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "CreativeWork",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://sitepedagogiqueremarquable.fr/article"
},
"headline": "Titre de l'Article",
"image": {
"@type": "ImageObject",
"url": "https://sitepedagogiqueremarquable.fr/article.jpg",
"height": 800,
"width": 800
},
"datePublished": "2018-02-05T08:00:00+08:00",
"dateModified": "2018-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "Henri Martin"
},
"publisher": {
"@type": "Organization",
"name": "Site Pédagogique Remarquable",
"logo": {
"@type": "ImageObject",
"url": "https://sitepedagogiqueremarquable.fr/logo.jpg",
"width": 600,
"height": 60
}
},
"description": "La description complète de la ressource",
"audience": {
"@type": "EducationalAudience",
"educationalRole": "teacher"
},
"educationalAlignment": [
{
"@type": "AlignmentObject",
"alignmentType": "educationalLevel",
"educationalFramework": "France Education Levels",
"targetName": "Cycle 1"//préciserleniveauéducatifselonlatypologiedéfinieparlesite
},
{
"@type": "AlignmentObject",
"alignmentType": "educationalSubject",
"targetName": "Discipline de la ressource"//préciserladisciplinecommeindiquéesurlapage
}
]
}</script>
Foire Aux Questions – FAQPage
Nouveau format phare de 2019, plus simple que son cousin HowTo, le format de Données Structurées FAQ permet d’élargir son snippet avec une liste de questions / réponses. Les questions créent une liste sous la meta-description de l’URL dans les SERPs, un clic déroule la réponse. Malgré sa taille imposante, on voit souvent jusqu’à 3 résultats avec une FAQ pour une même requête.
Prérequis :
- Au moins 2 questions / réponses balisées.
- Les questions doivent êtres interrogatives
- Les questions/réponses doivent être propres à la page, et non génériques/dupliquées sur plusieurs pages du site.
Avantages :
- Eligible aussi bien sur un contenu édito qu’une catégorie ou un produit
- Permet de présenter des réponses soit en paragraphe, soit en liste à puces
- Possibilité d’intégrer des liens internes dans les réponses vers une autre page du site, créant un mini-menu de navigation
- Mise en forme en gras, italique
- Accepte les emojis, que Google reprend dans les SERPs
<script type="application/ld+json">{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Quelle est la question ?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ceci est la réponse à la première question."
}
},
{
"@type": "Question",
"name": "Mais quelle est la 2e question ?",
"acceptedAnswer": {
"@type": "Answer",
"text": "C'est ce qui est écrit juste au-dessus."
}
},
{
"@type": "Question",
"name": "Peux-t-on insérer des liens dans les questions ?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Oui, allez voir <a href=\"https://www.schemaapp.com/webinars/stand-out-in-search-with-faq-rich-results/\">ce webinar</a> sur cette page."
}
}
]
}</script>
Extrait d’avis > Avantages & Inconvénients d’un produit
Ce nouveau format de Données Structurées date d’août 2022. Au sein d’un contenu de présentation d’un produit avec avis, Google incite à proposer un résumé pour que le lecteur ait une vision rapide des arguments en faveur et en défafeur du produit. C’est quelque chose de courant dans les test de logiciels et jeux vidéos. Ici, on résumera en liste ces arguments et on les balisera avec des ItemList dans un ensemble positiveNotes ou negativeNotes.
"positiveNotes": {
"@type": "ItemList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "abordable"
},
{
"@type": "ListItem",
"position": 2,
"name": "légère"
},
{
"@type": "ListItem",
"position": 3,
"name": "efficace"
}
]
},
"negativeNotes": {
"@type": "ItemList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "effet très court"
},
{
"@type": "ListItem",
"position": 2,
"name": "sèche lentement"
}