Microdata et Schema.

org, la smantique chirurgicale

Article
par jojaba(Dveloppeur
Web, France - Alsace)
Cr le 27 Novembre 2012,
mis jour le 04 Mars
2013(23961 lectures)
Tags
: rfrencement, html5,microformats, microdata,itemtype, schema
Les dispositifs mettant en exergue la smantique qui permet notamment aux moteurs de
recherche d'apprhender des informations prcises sur le contenu d'une page Web ont t
valoriss par l'avnement de la technologie Microdata dans HTML5. Fort des
exprimentations en matire de balisage smantique fournies par les microformats, on a pu
mettre en place une syntaxe permettant de faciliter ce type de mise en vidence.
Les microformats avant HTML5
Difficile de trouver une date prcise, mais il semblerait qu'ils existent depuis envrion 2003 avec
l'arrive de XFN, et prennent des formes varies. Les microformats n'ont pas de rgles, dans le
sens o aucune norme n'a t tablie par aucun organisme - pas mme microformats.org qui
n'est "que" le wiki o sont rassembles les pratiques - il s'agit d'un format ouvert qui volue
selon les pratiques sur internet. Ils sont donc une tentative de codification des pratiques
courantes. Microformats.org a ainsi pu runir un certain nombre de "profils" XMPD que vous
trouverez sur le wiki.
De manire gnrale les F utilisent les attributs existants (classes, rel) de HTML et cherchent
simplifier l'utilisation de certaines donnes par les programmes (logiciels) auxquels ils
s'adressent. Par exemple, si je cherche formater un contenu destination d'un carnet
d'adresses, je vais formater le contenu HTML existant sous la forme d'une "fiche contact"
(profil hCard).
Les informations peuvent tre marques de diffrentes manires :
par des classes aux valeurs bien prcises
par des valeurs de rel
grce la syntaxe RDFa
Pour aller plus loin, consultez Les microformats et Les microformats 2.
Microdata avec HTML5
Avec l'arrive de nouveaux lments comme <time> et <article>, la smantique est
apporte par les lments HTML, mais pas seulement : trois attributs principaux sont utiliss
pour intgrer des Microdata dans HTML5 :
itemscope (signication : quel champ smantique correspond l'lment ?),
itemtype (prcise le type d'lment concern),
itemprop (les diffrentes proprits, par exemple : le nom, la date, l'adresse, l'url)
Ils sont complts par itemref (permet de faire rfrence un type dj dfini dans la page)
et itemid (fait rfrence une cl unique, reconnue de faon quasi-universelle).
Pour renseigner ces attributs, tout se joue autour de la dfinition d'unvocabulaire spcifique
chaque type d'identification (personne, vnement, lieu,). Et ce petit jeu-
l, schema.org est une rfrence en la matire, initiative commune de Google, Yahoo, Bing
et Yandex dcide en 2011.
Voici un petit tour d'horizon des diffrents types et proprits fournis par cette organisation.
Mais avant cela, un petit rappel ou un claircissement pour ceux qui ne connatraient pas les
Microdatas.
Comment inclure des Microdatas ?
A la fin du tutoriel sur les Microformats, est faite une petite rfrence auxMicrodatas.
L'ensemble de ces attributs apporte des informations hirarchiquement structures.
itemscope et itemtype
Ils s'utilisent conjointement dans une balise dlimitant le pan d'informations qui sera
affubl d'lments smantiques. itemscope indique simplement que les informations
contenues dans la balise ont t enrichies et itemtype indique quel type de donnes
nous avons faire. Exemple :
<article itemscope
itemtype="http://schema.org/Article">
<!-- Les donnes formates concernant l'article
(titre, auteur, permalien) -->
</article>
Dans cet exemple, on donne l'tendue des informations microformates (itemscope) et
le type d'lment auquel ils se rfrent, ici, un article (itemtype) : les dtails sur la
valeur que l'on peut y indiquer sont abords ci-aprs.
itemprop
Permet d'indiquer quoi correspondent les diffrentes informations. En reprenant
l'exemple d'avant on peut obtenir ceci :
<article itemscope
itemtype="http://schema.org/Article">
<header>
<h1 itemprop="name">Microformats versus
Microdatas</h1>
<ul>
<li>Le <time itemprop="dateCreated"
datetime="2012-11-20T20:00">20 novembre 2012</time>
par <span itemprop="creator">Jojaba</span></li>
<li>Permalien : <a
href="http://lien_vers_article.html"
itemprop="url">Microformats versus Microdatas</a>
</li>
<ul>
</header>
<section itemprop="text">
<p>
Les Microdatas sont relativement rcents,
puisque apparus avec HTML5 alors que les
microformats sont bien plus anciens (le premier F
fait son apparition en 2003), ce qui leur donne des
atouts majeurs : ils ont pu tre prouvs, ils ont
volu, ils ont t pris en compte par bon nombre
d'acteurs sur le Web
<p>
<p>
Conclusion&nbsp;: je dirais que les microformats
peuvent encore tre utiles pour des pages qui ne
sont pas codes en HTML5 et que microdata devrait
tre utilis le plus possible (d'aileurs, ils sont
<a
href="http://support.google.com/webmasters/bin/answe
r.py?
hl=fr&answer=99170&topic=1088472&ctx=topic">recomman
ds par Google</a>).
</p>
</section>
</article>
itemprop="name" : indique le nom de l'article dans ce cas de figure mais pourrait
galement indiquer le nom d'une personne si on est dans le cas de l'identification de
personne.
itemprop="dateCreated" datetime="2012-11-20T20:00" : date de
cration de l'article. dans l'attribut datetime on place la date au format ISO 8601
itemprop="creator" : l'auteur de l'article.
itemprop="text" : le contenu de l'article.
itemref
Cet attribut permet de reprendre des informations dj prsentes sur la mme page en
indiquant l'id de la partie enrichie smantiquement. Par exemple : itemref="titre
emplacement" inclura les lments ayant comme id titre etemplacement.
lments imbriqus
Il peut arriver qu'une proprit soit elle-mme dfinie par d'autres proprits et donc tre
considre comme tant un type d'lment. Elle sera donc imbrique dans type parent. Petit
exemple pour comprendre :
<article itemscope itemtype="http://schema.org/Event">
<hgroup>
<h1 itemprop="name">Kiwiparty 2051</h1>
<p>Propose par <span itemprop="attendee" itemscope
itemtype="http://schema.org/Person"><span
itemprop="name">Raphal</span> et <span
itemprop="colleague">Rodolphe</span> - <span
itemprop="affiliation">Alsacrations</span></span></p>
</hgroup>
<section itemprop="description">
<p>Cette 52e dition vous permettra de dcouvrir les
nouvelles balises HTML 13, La spcification CSS 9.2.a et
bien d'autres nouveauts. Venez nombreux !</p>
</section>
<footer>Lieu : <span
itemprop="location">Epitech</span> | Date : <time
itemprop="startDate" datetime="2051-04-01T09:00">1er
avril 2051 9h00</footer>
</article>
Le type imbriqu (Person) a t mis en gras dans l'exemple ci-dessus.
Les diffrents itemtype disponibles sur schema.org
Vous l'aurez compris, tout se joue au niveau du
vocabulaire utilis. Plus il est riche, plus il est
prcis et plus vous pourrez donner du sens votre
contenu. Schema.org propose une hirarchie
assez consquente, touchant bon nombre de
domaines, jugez-en plutt vous-mme : Toute
l'arborescence des types dfinis par schema.org.
Le principe est simple : plus vous descendez dans
l'arborescence (parent fils), plus le vocabulaire
se prcisera. Le parent "racine" Thing est dfini par quelques proprits de sens assez large
(additionalType, description, image, name, url) puisqu'il devrait pouvoir
s'appliquer tout type d'lment. Au fur et mesure de la progression dans la hirarchie (vers
le bas) vous constaterez que les proprits dfinissent une smantique de plus en plus pointue.
Par exemple, Thing CreativeWork Article est affubl de 3 proprits
: articleBody, articleSection, wordCount.
Hritage
Un autre point intressant dans l'utilisation des lments hirarchiques dfinis par schema.org
est que chaque fils hrite des proprits de son (ses) parent(s). En reprenant l'exemple
prcdent, le type Article a donc comme proprits
spcifiques articleBody, articleSection, wordCount, mais galement toutes les
proprits du niveau suprieur c'est dire celles de CreativeWork (about,
accountablePerson, aggregateRating, alternativeHeadline,
associatedMedia, audience, audio, author, award, awards, comment,
contentLocation, contentRating, contributor, copyrightHolder,
copyrightYear, creator, dateCreated, dateModified, datePublished,
discussionUrl, editor, encoding, encodings, genre, headline,
inLanguage, interactionCount, isFamilyFriendly, keywords,
mentions, offers, provider, publisher, publishingPrinciples,
review, reviews, sourceOrganization, text, thumbnailUrl, version,
video) et de Thing (additionalType, description, image, name, url).
Vous pouvez constater cet tat de fait dans la rfrence du schma Article sur le site de
schema.org.
D'autres exemples concrets
Le schma "Corporation"
Le schma Corporation (socit) est un sous ensemble du schma
Organization correspondant celui d'une entreprise, d'une association, d'une cole, d'une
organisation en somme... Il n'y a qu'une seule proprit en plus par rapport son
parent. Prenons l'exemple de code suivant et essayons de voir comment l'amliorer avec
Microdata.
<div>
<h1>Alsacrations</h1>
<h2> propos</h2>
<p>Alsacrations est une innovante agence de
crations et services numriques, cre en 2006 par
Raphal Goetter et Rodolphe Rimel et localise
Strasbourg, capitale europenne. Elle compte
actuellement 6 collaborateurs (dveloppeurs, graphistes,
experts) et rpond tous types de projets, d'envergure
rgionale, nationale ou internationale.</p>
<p>Alsacrations est galement organisatrice de la
confrence Web <a
href="http://kiwiparty.fr">KiwiParty</a>.</p>

<h2>Contact</h2>
<p>10, place du Temple Neuf<br />
67000 Strasbourg, France<br />
09 54 96 50 50</p>
<p><a href="http://alsacreations.fr/">Site Web</a>
</p>
<h2>L'quipe</h2>
<ul>
<li><a href="equipe.html#raphael">Raphal</a>
</li>
<li><a href="equipe.html#rodolphe">Rodolphe</a>
</li>
<li><a href="equipe.html#philippe">Philippe</a>
</li>
<li><a href="equipe.html#simon">Simon</a></li>
<li><a href="equipe.html#geoffrey">Geoffrey</a>
</li>
<li><a
href="equipe.html#guillaume">Guillaume</a></li>
<li><a
href="equipe.html#stephanie">Stphanie</a></li>
<li><a href="equipe.html#jennifer">Jennifer</a>
</li>
</ul>
</div>
Voici une prsentation succincte d'une socit prise au hasard (mais oui mais oui !). Analysons
la page du schma Corporation et essayons de recouper les informations.
<div itemscope
itemtype="http://schema.org/Corporation">
<h1 itemprop="name">Alsacrations</h1>
<h2> propos</h2>
<p itemprop="description">Alsacrations est une
innovante agence de crations et services numriques,
cre en <time itemprop="foundingDate" datetime="2006-
01-06">2006</time> par <span itemprop="founders">Raphal
Goetter</span> et <span itemprop="founders">Rodolphe
Rimel</span> et localise Strasbourg, capitale
europenne. Elle compte actuellement 6 collaborateurs
(dveloppeurs, graphistes, experts) et rpond tous
types de projets, d'envergure rgionale, nationale ou
internationale.</p>
<p>Alsacrations est galement organisatrice de la
<span itemprop="events">confrence Web <a
href="http://kiwiparty.fr">KiwiParty</a></span>.</p>
<h2>Contact</h2>
<p itemprop="contactPoints">
<span itemprop="address" itemscope
itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">10, place du
Temple Neuf</span><br />
<span itemprop="postalCode">67000</span>
<span
itemprop="addressLocality">Strasbourg</span>,
<meta itemprop="addressCountry"
content="FR" />France
</span><br />
<span itemprop="telephone">0954965050</span>
</p>
<p><a href="http://alsacreations.fr/"
itemprop="url">Site Web</a></p>
<h2>L'quipe</h2>
<ul itemprop="employees" itemscope>
<li><a href="equipe.html#raphael">Raphal</a>
</li>
<li><a href="equipe.html#rodolphe">Rodolphe</a>
</li>
<li itemprop="name"><a
href="equipe.html#philippe">Philippe</a></li>
<li itemprop="name"><a
href="equipe.html#simon">Simon</a></li>
<li itemprop="name"><a
href="equipe.html#geoffrey">Geoffrey</a></li>
<li itemprop="name"><a
href="equipe.html#guillaume">Guillaume</a></li>
<li itemprop="name"><a
href="equipe.html#stephanie">Stphanie</a></li>
<li itemprop="name"><a
href="equipe.html#jennifer">Jennifer</a></li>
</ul>
</div>
Le marquage de ces donnes est une des manires de procder.
Imbrication d'un autre format pour address
Dans l'exemple prcdent, l'information address est tendue avec la cration d'un item
de type PostalAddress, c'est un choix qui n'tait aucunement obligatoire. On aurait pu
galement tendre l'vnement KiwiParty en utilisant le schema Event. Tout dpend des
besoins de votre prsentation. Ceci illustre ce que l'on appelle l'Embedded Items. Il s'agit de la
possibilit d'imbriquer un schma de donnes dans un autre schma. Pour ce faire, il convient
de dclarer le nouvel item grce l'attribut itemscope, et de prciser le nouveau schma
utilis grce l'attribut itemtype puis d'enchaner avec les diffrentes proprits dusous-
format appliqu.
Le schma "Article"
Comme son nom l'indique, il permet de marquer les donnes propres un article (de blog, par
exemple). Vous me direz, le schma BlogPosting est plus appropri pour un blog, mais
bizarrement celui-ci ne propose rien de plus que le schma Article... mais soyons prvoyants,
nous utilisons BlogPosting. Imaginons le zoning d'un article de blog sous cette forme :
Ici le corps de l'article se trouve dans une partie du site. Des informations annexes se trouvent
la suite, mais galement dans une barre latrale, ou pourquoi pas en pied de page. Il va nous
falloir utiliser l'attribut itemref qui permet de lier un itemscope des informations se
trouvant en dehors de ce dernier.
Voyons un exemple de code correspondant l'illustration prcdente.
<section id="main_content">
<article itemscope
itemtype="http://schema.org/BlogPosting"
itemref="author_box review_box">
<header>
<h1>HTML5 - Microformats et Microdata</h1>
<p>HTML5 vient dmocratiser une forme de
meta-donne existante [...]</p>
</header>
<div itemprop="articleBody">
<!-- contenu de l'article -->
</div>
<footer>
<p>Publi le <time itemprop="date"
datetime="2012-0404">04/04/2012</time></p>
<p itemprop="keywords">Mots-clefs : <a
href="/tag/html5" rel="tag">HTML5</a>, <a
href="/tag/microdata" rel="tag">Microdata</a></p>
</footer>
</article>
</section>
<section id="sidebar">
<aside id="author_box">
<h2>Auteur</h2>
<p>Nom : Geoffrey C.</p>
<p>Site web : http://crofte.fr</p>
<p></p>
</aside>
<aside id="review_box">
<h2>Informations pratiques</h2>
<div itemprop="preview" itemscope
itemtype="http://schema.org/AggregateRating">
<p>Article lu <span
itemprop="reviewCount">1337</span> fois.</p>
<p>Not <span
itemprop="ratingValue">4</span>/<span
itemprop="bestRating">5</span> d'aprs <span
itemprop="ratingCount">20 votes.</p>
</div>
<p><meta itemprop="interactionCount" content="13
Usercomments">13 commentaires</p>
</aside>
</section>
Conseils pour l'ajout de balises smantiques
Premire rgle : plus il y en a, mieux c'est. Il faut nanmoins garder l'esprit que seul le
contenu visible par les utilisateurs (nous rappelons qu' la base, c'est pour eux que cet effort
est fait) devrait tre enrichi.
Vous constaterez dans la spcification des diffrents types que l'on dfini la valeur attendue
pour chaque proprit. Cette valeur peut tre un lment imbriqu (exemple :
pour CreativeWork, on prcise que la proprit author devrait tre du
type Organization ou Person). Or ceci n'est pas une obligation, vous pouvez galement
utiliser du texte normal ou une URL la place de ces sous-types. Il est galement possible
d'utiliser un enfant du type recommand, par exemple, si la valeur attendue est de
type Place, vous pouvez utiliser la place LocalBusiness.
Google met disposition un outil de test d'insertion des Rich Snippets (rsultats de
recherche enrichis par les microformats) afin de vrifier le respect de l'implmentation des
valeurs de schema.org : Rich Snippets Tester Tool
Il est galement possible de rcuperer un formatage JSON des microdonnes
avec Microdata Live
Enfin, les informations fournies peuvent tre indiques de faon tre interprtables par les
machines.
Les dates et heures doivent tre utilises dans des balises <time>, insres dans
l'attribut datetime.
Dates et horaires pour machines sur schema.org
Il est consill d'utiliser la balise <link> pour les propris n'ayant que peu de valeurs ou
pour des rfrences canoniques.
Rfrences canoniques sur schema.org
Il peut arriver qu'une information sur la page Web ayant un fort potentiel smantique ne
puisse pas tre marque parce qu'elle se trouve au mauvais endroit. Dans ce cas, il est
recommand d'utiliser la balise <meta> et l'attribut content cet effet.
Utilisation de <meta> sur schema.org
Conclusion
Schema.org dmontre une grande souplesse d'utilisation, de nombreux vocabulaires adapts
beaucoup de situations, c'est galement une de ses forces : cela facilite l'implmentation de
contenu smantique par le dveloppeur. En outre :
Search engines including Bing, Google, Yahoo! and
Yandex rely on this markup to improve the display of
search results, making it easier for people to find the
right web pages.
Les moteurs de recherche majeurs prennent en charge le vocabulaire schema.org pour
l'affichage de rsultats de recherche. Tout est l pour faire de la smantique une plus-value
indniable de nos sites !
Ressources
Sur le site officiel (en anglais donc) : page partir de laquelle a t ralis ce tutoriel
La liste des types schema.org au format PDF (65,5 Ko) et PNG (490 Ko)
Quiz sur les microformats