Les struc­tures de données cons­ti­tuent la base de toute page Web. Un code HTML contient des éléments dis­tinc­tifs appelés Tags ou balises, grâce auxquels des sections de texte sont ca­rac­té­ri­sés par certaines pro­prié­tés, ap­par­te­nances ou formes de pré­sen­ta­tion. Les ad­mi­nis­tra­teurs Web dé­fi­nis­sent les pa­ra­graphes, titres, énu­mé­ra­tions ou liens de cette manière. Cela vaut aussi pour les passages de texte en gras ou en italique, les gra­phiques, tableaux ou vidéos. Les pro­grammes qui analysent le code reçoivent des in­for­ma­tions dé­tail­lées sur la structure d’un document HTML et sur la re­pré­sen­ta­tion des contenus dé­ter­mi­née par les balises ou tags. Une machine ne peut cependant pas ré­per­to­rier avec exac­ti­tude un contenu entier. Si l’on prend par exemple un article d’actualité sur une pla­te­forme d’in­for­ma­tions, l’encadré de gauche re­pré­sente ce qu’un humain ex­ploi­te­rait de l’article tandis que celui de droite re­pré­sente ce qu’un or­di­na­teur in­ter­prète :

Tandis qu’un in­ter­naute saisit d’un seul coup d’œil ce dont traite un article en lisant les gros titres, les sous-titres, les éléments en italique ou encore la date de pu­bli­ca­tion, un or­di­na­teur ne peut in­ter­pré­ter ces éléments que si on le lui indique via le code HTML (par exemple <h1> pour le titre principal, <h2> pour un sous-titre et <i> pour le caractère italique). Ces faits sont d’une grande im­por­tance, aussi bien pour les moteurs de recherche que pour les in­ter­nautes à la recherche d’un résultat pertinent en fonctions de te termes de recherche. De nombreux ad­mi­nis­tra­teurs de sites Internet en­ri­chis­sent ainsi leurs documents HTML d’in­for­ma­tions sé­man­tiques lisibles par les machines, de manière à définir leurs contenus. On parle de données struc­tu­rées.

Pourquoi a-t-on besoin de données struc­tu­rées ?

L’idée qu’un programme puisse in­ter­pré­ter des in­for­ma­tions que seul un humain pourrait voir en théorie, revient au concept de Web sé­man­tique. Bien utilisées, les données struc­tu­rées per­met­tent aux machines d’in­ter­pré­ter les contenus Web. Cela est avant tout pertinent pour les moteurs de recherche basés sur des textes tels que Google, Bing ou Yahoo. Une telle balise sert d’in­for­ma­tion sé­man­tique indiquant la forme de la pré­sen­ta­tion d’un texte, d’un graphique ou encore à dé­ter­mi­ner un rich snippet, à savoir un extrait enrichi qui sera présenté sur la page de résultats de recherche (SERP). Ces snippets sont d’une grande im­por­tance pour les ex­ploi­tants de pagesWeb.

Les rich snippets sont des extraits de contenus de pages Web, affichés à côté d’in­for­ma­tions de base telles que l’URL, le titre et la des­crip­tion dans les pages de résultats des moteurs de recherche (SERPs). La condition pour cela est que tous les contenus per­ti­nents soient traduits dans le code HTML par les ad­mi­nis­tra­teurs de pages Web, de manière à leur attribuer un type d’in­for­ma­tion précis. Google utilise ac­tuel­le­ment les données struc­tu­rées, afin de re­pré­sen­ter des rich snippets pour les types de données suivants :

  • In­for­ma­tions de produits : prix, dis­po­ni­bi­lité, éva­lua­tions et retours d’ex­pé­riences
  • Recettes : images, temps de pré­pa­ra­tion, calories et éva­lua­tions
  • Rapports d’ex­pé­riences : res­tau­rants, films, magasins, etc… .
  • Evè­ne­ments : comédies musicales, concerts, ex­po­si­tions, et festivals incluant les horaires
  • Logiciels : éva­lua­tion, prix, retours d’ex­pé­riences
  • Vidéos: des­crip­tion et image de pré­vi­sua­li­sa­tion
  • Articles d’actualité : titre, date de pu­bli­ca­tion, in­for­ma­tions sur les auteurs et images  

Les rich snippets, ou extraits enrichis, pré­sen­tent pour les ad­mi­nis­tra­teurs Web l’avantage d’occuper plus de place dans les SERPs, de donner des in­for­ma­tions plus per­ti­nentes et ainsi obtenir un taux de clics plus élevé. Les pos­si­bi­li­tés de pré­sen­ta­tion sur les pages de résultats de re­cherches s’élar­gis­sent avec des outils tels que Bread­crumbs et Sitelinks Search Box de Google.

D’après ses dé­cla­ra­tions, Google se sert de Sitelinks Search Box  pour les re­cherches na­vi­ga­tion­nelles, avec les­quelles les sites re­cher­chés sont indiqués dans la recherche (marques, en­tre­prises, URL). Dans ce cas les in­ter­nautes ont une idée précise ou ap­proxi­ma­tive de la manière avec laquelle ils pourront trouver le site Web voulu. Cela permet aux uti­li­sa­teurs de pouvoir chercher une page précise d’un site Internet di­rec­te­ment depuis les SERPs, de manière à éco­no­mi­ser des clics et donc gagner du temps. Un autre avantage in­dé­niable de ces outils pour les ad­mi­nis­tra­teurs est l’important espace occupé sur les SERPs, rendant les snippets plus visibles et aug­men­tant ainsi le nombre de visites. 

Le fil d’Ariane (Bread­crumb en anglais) propose aux visiteurs de vi­sua­li­ser le chemin parcouru dans leur recherche de manière à les orienter et leur permet de cliquer sur des liens des visites pré­cé­dentes.

L’ap­pré­cia­tion des éléments de pré­sen­ta­tion pour obtenir certains résultats de recherche revient au four­nis­seur de moteur de recherche. Il est toutefois re­com­mandé d’assigner des attributs à vos propres pages Web pour enrichir vos snippets, qu’il s’agisse de données struc­tu­rées, d’un Fil d’Ariane ou bien avec Sitelinks search box.

Struc­tu­rer les données de votre site Web

Afin que les contenus soient rendus lisibles par les machines via les données struc­tu­rées, trois formats d’attributs sont dis­po­nibles pour les ad­mi­nis­tra­teurs : Mi­cro­for­mats, RDFa et Microdata. Ces trois formats de struc­tu­ra­tion de données se basent sur des attributs sé­man­tiques di­rec­te­ment intégrés dans le code HTML. Selon chaque format il existe des attributs HTML clas­siques ou bien de nouveaux éléments dis­tinc­tifs. Depuis quelques années, on utilise aussi de plus en plus le format de données JSON-LD, per­met­tant d’effectuer con­for­ta­ble­ment des an­no­ta­tions à l’intérieur d’un script.

Mi­cro­for­mats

Le format Mi­cro­for­mats sert d’attribut sé­man­tique pour des documents HTML et XHTML. Les attributs clas­siques tels que class, rel ou rev peuvent être intégrés sans problème avec ce format, ce dernier per­met­tant aux robots d’in­dexa­tion de lire des in­for­ma­tions sé­man­tiques simples. Une uti­li­sa­tion classique est celle des contacts avec le Mi­cro­for­mat hCard, intégré dans le code HTML (class="vcard“) de la manière suivante :

Attributs clas­siques de contacts en HTML

01<div>
02<div>Prénom Nom</div>
03<div>En­tre­prise</div>
04<div>Numero de telephone</div>
05<a href="http://siteweb.fr/">http://siteweb.fr/</a>
06</div>

  Attribut de contacts avec le Mi­cro­for­mat hCard

01<div class="vcard">
02<div class="fn">Prénom Nom</div>
03<div class="org">En­tre­prise</div>
04<div class="tel">Numéro de téléphone</div>
05<a class="url" href="http://siteweb.fr/">http://siteweb.fr/</a>
06</div>

Tandis que les in­for­ma­tions de contact, sous la forme d’attributs HTML purs, sont interprés seulement en tant qu’éléments non spé­ci­fiques div, l’uti­li­sa­tion du format Mi­cro­for­mats hCard avec l’attribut class=“vcard“ permet des an­no­ta­tions sé­man­tiques pour des in­for­ma­tions isolées (par exemple les noms, or­ga­ni­sa­tions ou numéros de téléphone). L‘avantage de ce type d’attribut est la sim­pli­cité d’uti­li­sa­tion grâce à des attributs HTML connus. Cela limite cependant les pos­si­bi­li­tés d’éléments sé­man­tiques du fait du Mi­cro­for­mats, d’autant plus que le choix de ces derniers n’est pas ex­ten­sible. De plus, l’uti­li­sa­tion de l’attribut class peut mener à des conflits avec CSS. Mi­cro­for­mats n’est cependant pas com­pa­tible avec une interface de pro­gram­ma­tion pour l’ex­trac­tion de données.

RDFa

RDFa signifie « Resource Des­crip­tion Framework in At­tri­butes ». Le W3C (World Wide Web Con­sor­tium) re­com­mande ce format per­met­tant d’intégrer des éléments HTML, XHTML et autres dialectes XML. Au lieu de s’appuyer sur des attributs HTML clas­siques, le format RDF a introduit de nouveaux attributs per­met­tant des an­no­ta­tions sé­man­tiques complexes. L’exemple suivant montre des in­for­ma­tions de contact selon des données struc­tu­rées au format RDFa :

Aus­zeich­nung von Kon­tak­tin­for­ma­tio­nen mit RDFa

01<div xmlns:v="http://rdf.data-vo­ca­bu­lary.org/#" typeof="v:Person">
02<div property="v:name">Prénom Nom</div>
03<div property="v:af­fi­lia­tion">En­tre­prise</div>.
04<div property="v:tel">Numéro de téléphone</div>
05<a href="http://siteweb.fr" rel="v:url">www.siteweb.fr</a>.
06</div>

Si les données sont in­ter­pré­tées avec le format RDFa, un Namespace (espace de noms) XML doit être défini dès le départ. L’attribut typeof détermine le sujet d’une dé­cla­ra­tion RDF et il indique avec quel type de données le sujet est associé. L’attribut property détermine le prédicat de la dé­cla­ra­tion et indique les pro­prié­tés pour un contenu d’un élément. Les avantages de la struc­tu­ra­tion de données par RDFa sont la haute com­plexité de l’an­no­ta­tion et la pos­si­bi­lité de définir votre propre vo­ca­bu­laire. Le code peut être fixé grâce à des préfixes. RDFa est com­pa­tible avec une interface de pro­gram­ma­tion de document objet model (DOM API), avec laquelle il est possible d’extraire les données struc­tu­rées d’une page Web et d’utiliser des ap­pli­ca­tions in­te­rac­tives. Un dé­sa­van­tage est la mise au point d’XML et d’XHTML, même si HTML5 a pu être intégré entre-temps à RDFa. Un vo­ca­bu­laire stan­dar­disé pour les an­no­ta­tions avec RDFa est à dis­po­si­tion sur schema.org. Notre tutoriel sur les attributs avec RDFa selon Schema.org vous propose des ins­truc­tions dé­tail­lées.

Microdata

Microdata (Micro-données) est un module HTML5 défini sé­pa­ré­ment élar­gis­sant le vo­ca­bu­laire d’attributs existants. Tout comme Mi­cro­for­mats et RDFa, ce format utilise également des attributs simples sous la forme de balises HTML dans le but d’attribuer des pro­prié­tés à des éléments. La syntaxe de Microdata s’appuie sur un vo­ca­bu­laire avec lequel les éléments (items) sont ca­rac­té­ri­sés par des couples de valeurs. Le format de balises propose donc un compromis entre com­plexité modérée, flexi­bi­lité et pos­si­bi­li­tés d’ex­ten­sions. Microdata est com­pa­tible avec l’ex­por­ta­tion de JSON pour la trans­mis­sion et l‘en­re­gis­tre­ment de données struc­tu­rées et de Microdata DOM API. Microdata est aussi com­pa­tible avec le vo­ca­bu­laire de Schema.org. Vous pourrez trouver des exemples de domaines d’appcation et des in­for­ma­tions plus précises avec notre tutoriel sur les balises avec Microdata.

JSON-LD

JSON-LD est le nouveau standard pour les attributs sé­man­tiques de données de pages Web. L’abré­via­tion signifie « Ja­vaS­cript Object Notation for Linked Data », c’est-à-dire la mise en série de liens de données.  Google considère ce format comme étant le plus simple des formats existants, mais il n’est toutefois pas encore com­pa­tible avec tous les types de données. A la dif­fé­rence de Mi­cro­for­mats, RDFa et Microdata, JSON-LD ne se base pas sur des attributs sous la forme de balises HTML (HTML Tags). Au lieu de cela, un bloc de données JSON est intégré dans un script à une place quel­conque du code HTML. Notre tutoriel sur l’uti­li­sa­tion des balises avec JSON-LD d’après Schema.org vous donnera de plus amples in­for­ma­tions à ce propos.

Le projet Schema.org

Initiée par les leaders des moteurs de recherche Google, Bing, Yahoo et Yandex, cette com­mu­nauté col­la­bo­ra­tive au nom de Schema.org a été créée pour uni­for­mi­ser l’an­no­ta­tion sé­man­tique des contenus de pages Web. Sur son site du même nom, le projet com­mu­nau­taire propose uns et uniforme de schémas pour des données struc­tu­rées. Schema.org est com­pa­tible avec les formats de données RDFa, Microdata et JSON-LD. Vous trouverez une des­crip­tion détaillée du projet dans notre article sur le thème de Schema.org.

Astuce : tester les données struc­tu­rées avec Google

La dis­tinc­tion de documents HTMLs à travers des an­no­ta­tions sé­man­tiques demande du tact. Afin d’éviter des erreurs, il est re­com­mandé de valider pro­gres­si­ve­ment et étape par étape les attributs du code source d’une page Web. Google met pour cela un outil gratuit de test de données struc­tu­rées à dis­po­si­tion. Les ad­mi­nis­tra­teurs de sites Web peuvent ainsi vérifier des petits extraits de code ou une URL de page Web afin de constater d’éven­tuelles erreurs. Google propose également un outil pour mettre en avant des données de vos pages Web. Les domaines cor­res­pon­dants sont ainsi marqués et munis de mots-clés.  Il convient cependant de tenir compte du fait que ce type d’an­no­ta­tion sé­man­tique n’est pas di­rec­te­ment effectué dans le code source. Les domaines balisés peuvent seulement être in­ter­pré­tés par Google et utilisés pour des formes de pré­sen­ta­tions ex­ten­sibles. Avec d’autres moteurs de recherche comme Bing ou Yahoo, il est im­pos­sible de créer un tel rapport avec les contenus.

Aller au menu principal