{"id":4760,"date":"2015-02-27T14:10:36","date_gmt":"2015-02-27T13:10:36","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=4760"},"modified":"2015-02-27T18:40:33","modified_gmt":"2015-02-27T17:40:33","slug":"html5-microdata-quelques-exemples","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-microdata-quelques-exemples","title":{"rendered":"HTML5  &#8211; Microdata : quelques exemples"},"content":{"rendered":"<p>Microdata reste tr\u00e8s m\u00e9connu malgr\u00e9 ses quelques ann\u00e9es d&rsquo;existence maintenant. J&rsquo;en avais d\u00e9j\u00e0 parl\u00e9 il y a de cela 3 ans sur <a href=\"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-microdata\">diff\u00e9rents blogs sp\u00e9cialis\u00e9s<\/a>. Depuis, les choses n&rsquo;ont pas beaucoup chang\u00e9 : il reste tr\u00e8s rare de voir du microformat, notamment microdata en place sur un site web.<!--more--><\/p>\n<h2>Les microformats<\/h2>\n<h3>Un peu d&rsquo;histoire<\/h3>\n<p>Difficile de trouver une date pr\u00e9cise, mais il semblerait qu&rsquo;ils existent depuis environ 2003 avec l&rsquo;arriv\u00e9e de <abbr title=\"Xhtml Friends Network\">XFN<\/abbr>, et prennent des formes vari\u00e9es.<\/p>\n<p>Les microformats n&rsquo;ont pas de r\u00e8gles, dans le sens o\u00f9 aucune norme n&rsquo;a \u00e9t\u00e9 \u00e9tablie par aucun organisme &#8211; pas m\u00eame microformats.org qui n&rsquo;est \u00ab\u00a0que\u00a0\u00bb le wiki o\u00f9 sont rassembl\u00e9es les pratiques &#8211; il s&rsquo;agit d&rsquo;un format ouvert qui \u00e9volue selon les pratiques sur internet. Ils sont donc une tentative de codification des pratiques courantes. Microformats.org a ainsi pu r\u00e9unir un certain nombre de \u00ab\u00a0profils\u00a0\u00bb <abbr title=\"XHTML Meta Data Profile\">XMPD<\/abbr> que vous trouverez sur <a href=\"http:\/\/microformats.org\/profile\/\">le wiki<\/a>.<\/p>\n<h3>En pratique<\/h3>\n<p>De mani\u00e8re g\u00e9n\u00e9rale les <abbr title=\"microformats\"><b>\u03bcF<\/b><\/abbr> utilisent les attributs existants (classes, rel) de HTML et cherchent \u00e0 simplifier l&rsquo;utilisation de certaines donn\u00e9es par les programmes (logiciels) auxquels ils s&rsquo;adressent. Par exemple, si je cherche \u00e0 formater un contenu \u00e0 destination d&rsquo;un carnet d&rsquo;adresses, je vais formater le contenu HTML existant sous la forme d&rsquo;une \u00ab\u00a0fiche contact\u00a0\u00bb (profil <strong>hCard<\/strong>).<\/p>\n<p>Les informations peuvent \u00eatre marqu\u00e9es de diff\u00e9rentes mani\u00e8res :<\/p>\n<ul>\n<li>par des classes aux valeurs bien pr\u00e9cises<\/li>\n<li>par des <a href=\"\/article\/lire\/1400-attribut-rel-relations.html\">valeurs de rel<\/a><\/li>\n<li>gr\u00e2ce \u00e0 la <a href=\"http:\/\/www.yoyodesign.org\/doc\/w3c\/rdfa-syntax\/Overview.html\">syntaxe RDFa<\/a><\/li>\n<\/ul>\n<p>Pour aller plus loin je vous invite \u00e0 lire les articles de Jojaba et sur <a href=\"\/tuto\/lire\/1213-microformats-introduction.html\">les microformats<\/a> et <a href=\"\/actu\/lire\/1472-microformats-2.html\">microformats 2<\/a> sur Alsacr\u00e9ations.<\/p>\n<p>\u00c0 titre d&rsquo;exemple, le tr\u00e8s connu <abbr title=\"Content Managing system\">CMS<\/abbr> WordPress utilise les microformats depuis quelques ann\u00e9es (plus de 8 ans \u00e0 la date d&rsquo;\u00e9criture de ces lignes) dans ses th\u00e8mes par d\u00e9faut, c&rsquo;est ce qui fait en partie son efficacit\u00e9 dans le r\u00e9f\u00e9rencement naturel de vos articles ou pages cr\u00e9\u00e9s avec cet outil.<\/p>\n<h3>L&rsquo;apport de HTML5<\/h3>\n<p>HTML5 apporte de nouvelles valeurs \u00e0 l&rsquo;attribut <code>rel<\/code> ainsi que de nouveaux \u00e9l\u00e9ments comme <code>&lt;time&gt;<\/code> et <code>&lt;article&gt;<\/code>, la s\u00e9mantique est apport\u00e9e par les \u00e9l\u00e9ments HTML. Mais je ne vais pas vous parlez de cela durant cet article, je vais mes concentrer sur <strong>les microdatas<\/strong>.<\/p>\n<h2>Les microdatas<\/h2>\n<p>Arriv\u00e9es avec HTML5, les microdonn\u00e9es semblent \u00eatre une tentative de standardisation proposant de nouveaux attributs <strong>sp\u00e9cialement con\u00e7us<\/strong> pour l&rsquo;occasion, leurs valeurs de marquage d\u00e9pendra du sch\u00e9ma (ou type) de donn\u00e9es choisies et ne pourra pas s&rsquo;en \u00e9carter.<\/p>\n<p>Un semblant de cadre qui va nous obliger \u00e0 \u00eatre beaucoup plus stricts dans notre approche des \u00ab\u00a0meta data\u00a0\u00bb.<\/p>\n<h3>Nouveaux attributs<\/h3>\n<p>Microdata ajoute de nouveaux attributs \u00e0 notre panoplie d&rsquo;int\u00e9grateur (ou de r\u00e9f\u00e9renceur).<br \/>\nChaque bloc de microdonn\u00e9es est appel\u00e9 un item et fonctionne sur le principe de nom-valeur :<\/p>\n<ul>\n<li><code><strong>itemscope<\/strong><\/code> : permet de d\u00e9signer un bloc de microdonn\u00e9es (cr\u00e9e un item)<\/li>\n<li><code><strong>itemtype<\/strong><\/code> : associ\u00e9 \u00e0 <code>itemscope<\/code>, il permet de d\u00e9finir le type de donn\u00e9es d&rsquo;un item gr\u00e2ce \u00e0 un document de r\u00e9f\u00e9rence. (j&rsquo;ai l&rsquo;habitude de travailler avec <a href=\"http:\/\/schema.org\/\">Shema.org<\/a>)<\/li>\n<li><code><strong>itemprop<\/strong><\/code> : permet de pr\u00e9ciser la donn\u00e9e marqu\u00e9e gr\u00e2ce \u00e0 une valeur correspondant au type d\u00e9clar\u00e9<\/li>\n<li><code><strong>itemref<\/strong><\/code> : permet d&rsquo;associer un bloc de donn\u00e9es non descendant d&rsquo;un <code>itemscope<\/code>.<\/li>\n<li><code><strong>itemid<\/strong><\/code> : permet de d\u00e9finir un identifieur global pour un \u00e9l\u00e9ment de microdonn\u00e9es, comme par exemple un num\u00e9ro ISBN d&rsquo;un livre. Utilisez <code>itemid<\/code> sur le m\u00eame \u00e9l\u00e9ment que le porteur des attributs <code>itemscope<\/code> et <code>itemtype<\/code>.<\/li>\n<\/ul>\n<p>Cela ne vous parle peut-\u00eatre pas vraiment, mais nous allons voir des exemples ensembles.<\/p>\n<h3>Exemples d&rsquo;utilisation<\/h3>\n<p>Pour les habitu\u00e9s des microformats et des profils propos\u00e9s par microformats.org, il est possible de faire une douce transition vers microdata.<br \/>\nPrenons l&rsquo;exemple d&rsquo;une <a href=\"http:\/\/microformats.org\/profile\/hcard\"><strong>hCard<\/strong><\/a> qui repr\u00e9sente une fiche de contact, comme une carte de visite.<\/p>\n<pre class=\"code\"><code class=\"language-markup\">&lt;!-- Cr\u00e9ation d'un item hcard --&gt;\r\n&lt;section itemscope itemtype=\"http:\/\/microformats.org\/profile\/hcard\"&gt;\r\n    &lt;h1 itemprop=\"fn\"&gt;Geoffrey Crofte&lt;\/h1&gt;\r\n    &lt;!-- Cr\u00e9ation d'un item adresse (je peux en avoir plusieurs) --&gt;\r\n    &lt;div itemprop=\"adr\" itemscope&gt;\r\n      &lt;p itemprop=\"street-address\"&gt;10, place du Temple Neuf&lt;\/p&gt;\r\n      &lt;p itemprop=\"locality\"&gt;Strasbourg&lt;\/p&gt;\r\n      &lt;p itemprop=\"postal-code\"&gt;67000&lt;\/p&gt;\r\n    &lt;\/div&gt;\r\n    &lt;a href=\"http:\/\/creativejuiz.fr\" itemprop=\"url\" rel=\"me\"&gt;Mon site Web&lt;\/a&gt;,\r\n    &lt;a href=\"http:\/\/creativejuiz.fr\/blog\/\" itemprop=\"url\" rel=\"me\"&gt;Mon blog&lt;\/a&gt;\r\n&lt;\/section&gt;<\/code><\/pre>\n<p>Notre document de r\u00e9f\u00e9rence renseign\u00e9 par l&rsquo;attribut <code>itemtype<\/code> permet de d\u00e9clarer un sch\u00e9ma \u00e0 respecter pour les <code>itemprop<\/code> enfants.<br \/>\nComme le montrent les deux liens utilisant l&rsquo;<code>itemprop<\/code>\u00a0 de valeur <code>url<\/code>, il est possible de composer un item avec plusieurs donn\u00e9es de type identique.<\/p>\n<p>Bien qu&rsquo;\u00e9tant une des premi\u00e8res r\u00e9f\u00e9rences dans les microformats, les profils de microformats.org se sont vu revisit\u00e9s par Google, Yahoo, Bing et Yandex afin de proposer une sorte de standard aux webmasters.<br \/>\nDe cette revisite et d&rsquo;un commun accord est n\u00e9e <strong>schema.org<\/strong>, une collection de sch\u00e9mas servant \u00e0 structurer des donn\u00e9es riches sur la base des microdatas.<\/p>\n<p><a href=\"http:\/\/schema.org\/Person\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-4817\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2015\/02\/schema-org.jpg\" alt=\"schema-org\" width=\"1280\" height=\"721\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2015\/02\/schema-org.jpg 1280w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2015\/02\/schema-org-300x169.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2015\/02\/schema-org-600x338.jpg 600w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a><\/p>\n<p>La m\u00e9thode offerte par HTML5 coupl\u00e9e \u00e0 schema.org pour structurer des donn\u00e9es apporte une certaine richesse et beaucoup de flexibilit\u00e9.<br \/>\nParcourons deux exemples ensemble pour prendre en main l&rsquo;outil.<\/p>\n<h4>Le sch\u00e9ma \u00ab\u00a0Corporation\u00a0\u00bb<\/h4>\n<p>Le <a href=\"http:\/\/schema.org\/Corporation\">sch\u00e9ma Corporation<\/a> (soci\u00e9t\u00e9) est un sous ensemble du <a href=\"http:\/\/schema.org\/Organization\">sch\u00e9ma Organization<\/a> correspondant \u00e0 celui d&rsquo;une entreprise, d&rsquo;une association, d&rsquo;une \u00e9cole, d&rsquo;une organisation en somme&#8230;<br \/>\nIl n&rsquo;y a qu&rsquo;une seule propri\u00e9t\u00e9 en plus par rapport \u00e0 son parent.<\/p>\n<p>Prenons l&rsquo;exemple de code suivant et essayons de voir comment l&rsquo;am\u00e9liorer avec les microdatas.<\/p>\n<pre class=\"code\"><code class=\"language-markup\">&lt;div&gt;\r\n    &lt;h1&gt;Alsacr\u00e9ations&lt;\/h1&gt;\r\n    &lt;h2&gt;\u00c0 propos&lt;\/h2&gt;\r\n    &lt;p&gt;Alsacr\u00e9ations est une innovante agence de cr\u00e9ations et services num\u00e9riques, cr\u00e9\u00e9e en 2006 par Rapha\u00ebl Goetter et Rodolphe Rimel\u00e9 et localis\u00e9e \u00e0 Strasbourg, capitale europ\u00e9enne. Elle compte actuellement 6 collaborateurs (d\u00e9veloppeurs, graphistes, experts) et r\u00e9pond \u00e0 tous types de projets, d'envergure r\u00e9gionale, nationale ou internationale.&lt;\/p&gt;\r\n    &lt;p&gt;Alsacr\u00e9ations est \u00e9galement organisatrice de la conf\u00e9rence Web &lt;a href=\"http:\/\/kiwiparty.fr\"&gt;KiwiParty&lt;\/a&gt;.&lt;\/p&gt;\r\n    \r\n    &lt;h2&gt;Contact&lt;\/h2&gt;\r\n    &lt;p&gt;10, place du Temple Neuf&lt;br \/&gt;\r\n    67000 Strasbourg, France&lt;br \/&gt;\r\n    09 54 96 50 50&lt;\/p&gt;\r\n    &lt;p&gt;&lt;a href=\"http:\/\/alsacreations.fr\/\"&gt;Site Web&lt;\/a&gt;&lt;\/p&gt;\r\n\r\n    &lt;h2&gt;L'\u00e9quipe&lt;\/h2&gt;\r\n    &lt;ul&gt;\r\n        &lt;li&gt;&lt;a href=\"equipe.html#raphael\"&gt;Rapha\u00ebl&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"equipe.html#rodolphe\"&gt;Rodolphe&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"equipe.html#philippe\"&gt;Philippe&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"equipe.html#geoffrey\"&gt;Geoffrey&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"equipe.html#stephanie\"&gt;St\u00e9phanie&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"equipe.html#guillaume\"&gt;Guillaume&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"equipe.html#jennifer\"&gt;Jennifer&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"equipe.html#matthieu\"&gt;Matthieu&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>Voici une pr\u00e9sentation succincte d&rsquo;une soci\u00e9t\u00e9 prise au hasard. (mais oui mais oui !)<br \/>\nAnalysons la page du sch\u00e9ma Corporation et essayons de recouper les informations.<\/p>\n<pre class=\"code\"><code class=\"language-markup\">&lt;div itemscope itemtype=\"<strong>http:\/\/schema.org\/Corporation<\/strong>\"&gt;\r\n    &lt;h1 itemprop=\"<strong>name<\/strong>\"&gt;Alsacr\u00e9ations&lt;\/h1&gt;\r\n    &lt;h2&gt;\u00c0 propos&lt;\/h2&gt;\r\n    &lt;p itemprop=\"<strong>description<\/strong>\"&gt;Alsacr\u00e9ations est une innovante agence de cr\u00e9ations et services num\u00e9riques, cr\u00e9\u00e9e en &lt;time itemprop=\"<strong>foundingDate<\/strong>\" datetime=\"2006-01-06\"&gt;2006&lt;\/time&gt; par &lt;span itemprop=\"founders\"&gt;Rapha\u00ebl Goetter&lt;\/span&gt; et &lt;span itemprop=\"founders\"&gt;Rodolphe Rimel\u00e9&lt;\/span&gt; et localis\u00e9e \u00e0 Strasbourg, capitale europ\u00e9enne. Elle compte actuellement 6 collaborateurs (d\u00e9veloppeurs, graphistes, experts) et r\u00e9pond \u00e0 tous types de projets, d'envergure r\u00e9gionale, nationale ou internationale.&lt;\/p&gt;\r\n    &lt;p&gt;Alsacr\u00e9ations est \u00e9galement organisatrice de la \r\n        &lt;span itemprop=\"<strong>events<\/strong>\" <strong>itemscope itemtype=\"http:\/\/schema.org\/Event\"<\/strong>&gt;conf\u00e9rence Web\r\n            &lt;a href=\"http:\/\/kiwiparty.fr\" <strong>itemprop=\"url\"<\/strong>&gt;&lt;span <strong>itemprop=\"name\"<\/strong>&gt;KiwiParty&lt;\/span&gt;&lt;\/a&gt;\r\n            &lt;span <strong>itemprop=\"location\"<\/strong> <strong>itemscope itemtype=\"http:\/\/schema.org\/Place\"<\/strong>&gt;\r\n                &lt;<strong>meta<\/strong> itemprop=\"<strong>name<\/strong>\" content=\"KiwiParty par Alsacr\u00e9ations\"&gt;\r\n                &lt;<strong>meta<\/strong> itemprop=\"<strong>address<\/strong>\" content=\"Strasbourg, France\"&gt;\r\n            &lt;\/span&gt;\r\n            &lt;meta itemprop=\"startDate\" content=\"2015-06-19T09:00:00Z\"&gt;\r\n            &lt;meta itemprop=\"offers\" content=\"0.00\"&gt;\r\n        &lt;\/span&gt;.&lt;\/p&gt;\r\n\r\n    &lt;h2&gt;Contact&lt;\/h2&gt;\r\n    &lt;p itemprop=\"<strong>contactPoint<\/strong>\" <strong>itemscope itemtype=\"http:\/\/schema.org\/ContactPoint\"<\/strong>&gt;\r\n        &lt;meta itemprop=\"contactType\" content=\"customer support\"&gt;\r\n        &lt;span itemprop=\"<strong>telephone<\/strong>\"&gt;+33954965050&lt;\/span&gt;\r\n    &lt;\/p&gt;\r\n    &lt;p&gt;&lt;a href=\"http:\/\/alsacreations.fr\/\" itemprop=\"<strong>url<\/strong>\"&gt;Site Web&lt;\/a&gt;&lt;\/p&gt;\r\n\r\n    &lt;h2&gt;L'\u00e9quipe&lt;\/h2&gt;\r\n    &lt;ul itemprop=\"<strong>employees<\/strong>\" <strong>itemscope itemtype=\"http:\/\/schema.org\/Person\"<\/strong>&gt;\r\n        &lt;li&gt;&lt;a href=\"equipe.html#raphael\"&gt;Rapha\u00ebl&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li&gt;&lt;a href=\"equipe.html#rodolphe\"&gt;Rodolphe&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li itemprop=\"<strong>name<\/strong>\"&gt;&lt;a href=\"equipe.html#philippe\"&gt;Philippe&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li itemprop=\"<strong>name<\/strong>\"&gt;&lt;a href=\"equipe.html#geoffrey\"&gt;Geoffrey&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li itemprop=\"<strong>name<\/strong>\"&gt;&lt;a href=\"equipe.html#stephanie\"&gt;St\u00e9phanie&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li itemprop=\"<strong>name<\/strong>\"&gt;&lt;a href=\"equipe.html#guillaume\"&gt;Guillaume&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li itemprop=\"<strong>name<\/strong>\"&gt;&lt;a href=\"equipe.html#jennifer\"&gt;Jennifer&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li itemprop=\"<strong>name<\/strong>\"&gt;&lt;a href=\"equipe.html#matthieu\"&gt;Matthieu&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>Le marquage de ces donn\u00e9es est <strong>une<\/strong> des mani\u00e8res de proc\u00e9der.<br \/>\nEn effet, j&rsquo;ai pris soin d&rsquo;\u00e9tendre l&rsquo;information <code>address<\/code> avec la cr\u00e9ation d&rsquo;un item de <a href=\"http:\/\/schema.org\/PostalAddress\">type PostalAddress<\/a>, c&rsquo;est un choix personnel qui n&rsquo;\u00e9tait aucunement obligatoire. J&rsquo;aurais pu \u00e9galement \u00e9tendre l&rsquo;\u00e9v\u00e8nement KiwiParty en utilisant le <a href=\"http:\/\/schema.org\/Event\">schema Event<\/a>. Tout d\u00e9pend des besoins de votre pr\u00e9sentation.<\/p>\n<p>Cet exemple illustre ce que l&rsquo;on appelle l&rsquo;<em>Embedded Items<\/em>. Il s&rsquo;agit de la possibilit\u00e9 d&rsquo;imbriquer un sch\u00e9ma de donn\u00e9es dans un autre sch\u00e9ma.<br \/>\nPour ce faire, il convient de d\u00e9clarer le nouvel item gr\u00e2ce \u00e0 l&rsquo;attribut <code>itemscope<\/code>, et de pr\u00e9ciser le nouveau sch\u00e9ma utilis\u00e9 gr\u00e2ce \u00e0 l&rsquo;attribut <code>itemtype<\/code>. Ce nouvel item imbriqu\u00e9 reste porteur d&rsquo;un\u00a0<code>itemprop<\/code> associ\u00e9 \u00e0 son item parent..<\/p>\n<h4>Le sch\u00e9ma \u00ab\u00a0Article\u00a0\u00bb<\/h4>\n<p>Comme son nom l&rsquo;indique, il permet de marquer les donn\u00e9es propres \u00e0 un article (de blog, par exemple).<br \/>\nVous me direz, le <a href=\"http:\/\/schema.org\/BlogPosting\">sch\u00e9ma BlogPosting<\/a> est plus appropri\u00e9 pour un blog, mais bizarrement celui-ci ne propose rien de plus que le <a href=\"http:\/\/schema.org\/Article\">sch\u00e9ma Article<\/a>&#8230; mais soyons pr\u00e9voyants, nous utilisons BlogPosting.<\/p>\n<p>Imaginons le zoning d&rsquo;un article de blog sous cette forme :<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2015\/02\/microdata-article.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-4820\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2015\/02\/microdata-article.png\" alt=\"Un exemple de mise en page de donn\u00e9es en deux colonnes\" width=\"1080\" height=\"518\" \/><\/a><\/p>\n<p>Ici le corps de l&rsquo;article se trouve dans une partie du site. Des informations annexes se trouvent \u00e0 la suite, mais \u00e9galement dans une barre lat\u00e9rale, ou pourquoi pas en pied de page.<br \/>\nIl va nous falloir utiliser l&rsquo;attribut <code>itemref<\/code> qui permet de lier un <code class=\"html\">itemscope<\/code> \u00e0 des informations se trouvant en dehors de ce dernier.<\/p>\n<p>Voyons un exemple de code correspondant \u00e0 l&rsquo;illustration pr\u00e9c\u00e9dente.<\/p>\n<pre class=\"code\"><code class=\"language-markup\">&lt;section id=\"main_content\"&gt;\r\n    &lt;article <strong>itemscope<\/strong> <strong>itemtype=\"http:\/\/schema.org\/BlogPosting\"<\/strong> <strong>itemref=\"author_box review_box\"<\/strong>&gt;\r\n        &lt;header&gt;\r\n            &lt;h1 <strong>itemprop=\"name\"<\/strong>&gt;HTML5 - Microformats et Microdata&lt;\/h1&gt;\r\n            &lt;p <strong>itemprop=\"description\"<\/strong>&gt;HTML5 vient d\u00e9mocratiser une forme de meta-donn\u00e9e existante [...]&lt;\/p&gt;\r\n        &lt;\/header&gt;\r\n        &lt;div <strong>itemprop=\"articleBody\"<\/strong>&gt;\r\n            &lt;!-- contenu de l'article --&gt;\r\n        &lt;\/div&gt;\r\n        &lt;footer&gt;\r\n            &lt;p&gt;Publi\u00e9 le &lt;time <strong>itemprop=\"datePublished\"<\/strong> <strong>datetime=\"2015-02-17T09:32:00Z\"<\/strong>&gt;17\/02\/2015&lt;\/p&gt;\r\n            &lt;p <strong>itemprop=\"keywords\"<\/strong>&gt;Mots-clefs : &lt;a href=\"\/tag\/html5\" <strong>rel=\"tag\"<\/strong>&gt;HTML5&lt;\/a&gt;, &lt;a href=\"\/tag\/microdata\" rel=\"tag\"&gt;Microdata&lt;\/a&gt;&lt;\/p&gt;\r\n        &lt;\/footer&gt;\r\n    &lt;\/article&gt;\r\n&lt;\/section&gt;\r\n&lt;section id=\"sidebar\"&gt;\r\n    &lt;aside id=\"<strong>author_box<\/strong>\" <strong>itemprop=\"author\"<\/strong> <strong>itemscope itemtype=\"http:\/\/schema.org\/Person\"<\/strong>&gt;\r\n        &lt;h2&gt;Auteur&lt;\/h2&gt;\r\n        &lt;p&gt;Nom : &lt;span <strong>itemprop=\"name\"<\/strong>&gt;Geoffrey C.&lt;\/span&gt;&lt;\/p&gt;\r\n        &lt;p&gt;Site web : &lt;a href=\"http:\/\/geoffrey.crofte.fr\" <strong>itemprop=\"url\"<\/strong>&gt;http:\/\/geoffrey.crofte.fr&lt;\/a&gt;&lt;\/p&gt;\r\n        &lt;p&gt;Google+ : &lt;a href=\"https:\/\/plus.google.com\/108378161493961108220\/posts\" <strong>itemprop=\"url\"<\/strong>&gt;Profil Google&lt;\/a&gt;&lt;\/p&gt;\r\n    &lt;\/aside&gt;\r\n    &lt;aside id=\"<strong>review_box<\/strong>\"&gt;\r\n        &lt;h2&gt;Informations pratiques&lt;\/h2&gt;\r\n        &lt;div <strong>itemprop=\"aggregateRating\"<\/strong> <strong>itemscope<\/strong> <strong>itemtype=\"http:\/\/schema.org\/AggregateRating\"<\/strong>&gt;\r\n            &lt;p&gt;Article lu &lt;span <strong>itemprop=\"reviewCount\"<\/strong>&gt;16 641 337&lt;\/span&gt; fois.&lt;\/p&gt;\r\n            &lt;p&gt;Not\u00e9 \u00e0 &lt;span <strong>itemprop=\"ratingValue\"<\/strong>&gt;4&lt;\/span&gt;\/&lt;span <strong>itemprop=\"bestRating\"<\/strong>&gt;5&lt;\/span&gt; d'apr\u00e8s &lt;span <strong>itemprop=\"ratingCount\"<\/strong>&gt;42 votes.&lt;\/p&gt;\r\n        &lt;\/div&gt;\r\n        &lt;p&gt;<strong>&lt;meta itemprop=\"interactionCount\" content=\"13 Usercomments\"&gt;<\/strong>13 commentaires&lt;\/p&gt;\r\n    &lt;\/aside&gt;\r\n&lt;\/section&gt;<\/code><\/pre>\n<p>Cette proposition de formatage permet de relier deux items \u00e0 un item principal gr\u00e2ce \u00e0 l&rsquo;intervention de l&rsquo;attribut <code>itemref<\/code> combin\u00e9 aux attributs <code>id<\/code> des blocs \u00e0 r\u00e9f\u00e9rencer. Ces \u00e9l\u00e9ments \u00ab\u00a0inclus\u00a0\u00bb doivent rester coh\u00e9rents avec le sch\u00e9mas parent, ici BlogPosting et proposer par cons\u00e9quent des <code>itemprop<\/code> attendus.<\/p>\n<h3>Tester vos sch\u00e9mas<\/h3>\n<p>Google met \u00e0 disposition un outil de test d&rsquo;insertion des Rich Snippets afin de v\u00e9rifier le respect de l&rsquo;impl\u00e9mentation des valeurs de schema.org.<br \/>\n<a href=\"https:\/\/developers.google.com\/structured-data\/testing-tool\/\">Structured Data: Testing Tool<\/a><\/p>\n<p class=\"message important\">Cet outil \u00e9volue souvent, et les sch\u00e9mas de Schema.org ont d\u00e9j\u00e0 \u00e9t\u00e9 revisit\u00e9s, notamment dans l&rsquo;obligation de mentionner certaines donn\u00e9es pour valider compl\u00e8tement un sch\u00e9ma. Restez donc inform\u00e9s le plus possible.<\/p>\n<p>Il est \u00e9galement possible de r\u00e9cup\u00e9rer un formatage JSON des microdonn\u00e9es avec <a href=\"http:\/\/foolip.org\/microdatajs\/live\/\">Microdata Live<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Microdata reste tr\u00e8s m\u00e9connu malgr\u00e9 ses quelques ann\u00e9es d&rsquo;existence maintenant. J&rsquo;en avais d\u00e9j\u00e0 parl\u00e9 il y a de cela 3 ans sur diff\u00e9rents blogs sp\u00e9cialis\u00e9s. Depuis, les choses n&rsquo;ont pas beaucoup chang\u00e9 : il reste tr\u00e8s rare de voir du microformat, notamment microdata en place sur un site web.<\/p>\n","protected":false},"author":4,"featured_media":4816,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[605,12],"tags":[16,436,439,25],"coauthors":[597],"class_list":["post-4760","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-referencement-seo","category-veille-technologique","tag-html5","tag-microdata","tag-microformat","tag-referencement"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/4760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=4760"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/4760\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/4816"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=4760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=4760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=4760"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=4760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}