![\"rating-geekeries-juiz-admin\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/08\/rating-geekeries-juiz-admin.png\")
<\/p>\nMicroformats, microdata, nouvelle s\u00e9mantique, nouveaux \u00e9l\u00e9ments HTML\u2026 Tant de nouveaut\u00e9s qui perturbent les int\u00e9grateurs web soucieux de se mettre \u00e0 jour dans leurs comp\u00e9tences ou curieux de savoir ce dont ils peuvent d\u00e9j\u00e0 faire usage dans leurs int\u00e9grations.<\/p>\n
<\/p>\n
Bien que les microformats existent depuis 5 ou 6 ans, ce n’est qu’avec l’arriv\u00e9e de HTML5 que la profession et les outils sont suffisamment m\u00fbres pour commencer \u00e0 les exploiter r\u00e9ellement. Nous allons essayer de nous concentrer sur les microformats et, surtout, les microdata apport\u00e9es par HTML5.<\/p>\n
Faisons les pr\u00e9sentations avant de nous attaquer \u00e0 du code.<\/p>\n
HTML5 apporte de nombreux nouveaux \u00e9l\u00e9ments qui viennent renforcer le sens des composants de votre page. Les nouveaux \u00e9l\u00e9ments de sectionnement de votre page (section, article, aside, etc.) ainsi que les nouvelles balises (time, figure, figcaption, etc.) permettent un transport d’informations non n\u00e9gligeable qui, m\u00eame s’il n’est pas pleinement exploit\u00e9 pour le moment, l’est d\u00e9j\u00e0 en partie par les moteurs de recherche, et le sera certainement davantage par les lecteurs d’\u00e9cran ou d’autres terminaux dans un avenir proche. (esp\u00e9rons-le tout du moins).<\/p>\n
Mais HTML5 est loin de n’apporter que du balisage tout brillant et tout neuf, il apporte aussi de nouvelles pi\u00e8ces \u00e0 notre panoplie d’int\u00e9grateur web : les microdonn\u00e9es. Ces informations ainsi \u00e9mises par votre code source peuvent \u00eatre utilis\u00e9es par Google – pour ne citer que le plus utilis\u00e9 – qui va proposer un affichage dans ce genre :<\/p>\n
<\/p>\n
Fil d’ariane et note transport\u00e9s par microdonn\u00e9es<\/p>\n
Les microformats et les microdonn\u00e9es (de l’anglais microdata) sont une mani\u00e8re d’apporter un sens \u00e0 certains composants de votre page web. Les deux ont un mode de fonctionnement plus ou moins similaire.
\nEssayons de les d\u00e9finir au sein de cet article.<\/p>\n
Le microformat propose une syntaxe qui s’apparente \u00e0 du HTML classique et s’applique bien en dehors de la norme HTML5 puisqu’il est compatible avec HTML4, ou XHTML1.0 par exemple. Il utilise l’attribut class et certaines valeurs bien pr\u00e9cises dans le but de \u00ab\u00a0baliser\u00a0\u00bb un contenu afin qu’il soit interpr\u00e9t\u00e9 comme une donn\u00e9e bien sp\u00e9cifique.<\/p>\n
Voici un exemple de code un peu plus parlant :<\/p>\n
<span class=\"hreview-aggregate\">\r\n <span class=\"item\">\r\n <span class=\"fn\">Juiz Smart Mobile Admin<\/span>\r\n <\/span>\r\n <span class=\"rating\">\r\n Note de :\r\n <span class=\"average\">90<\/span> sur\r\n <span class=\"best\">100<\/span>\r\n <\/span>\r\n bas\u00e9e sur\r\n <span class=\"count\">35<\/span> votes.\r\n<\/span><\/code><\/pre>\nComme vous pouvez le constater, les microformats n’utilisent pas d’attribut ou de syntaxe trop complexe, seulement des valeurs de classe bien pr\u00e9cises.<\/p>\n
Vous trouverez un bon nombre de donn\u00e9es et d’outils sur le site microformats.org<\/a> qui a propos\u00e9 une tentative de codification des pratiques courantes. Microformats.org a ainsi pu r\u00e9unir un certain nombre de \u00ab\u00a0profils\u00a0\u00bb XMPD que vous trouverez directement sur le wiki microformats<\/a>. En plus de simples valeurs de classe, microformat c’est \u00e9galement l’utilisation de l’attribut rel<\/a>, c’est le format hCard<\/a>, le format hCalendar<\/a>, etc.<\/p>\nLes microformats ne sont pas un apport de HTML5.<\/p>\n
Les microdonn\u00e9es<\/h2>\n
Les microdonn\u00e9es sont repr\u00e9sent\u00e9es par l’arriv\u00e9e de nouveaux attributs en HTML5. Il est alors possible de donner la r\u00e9f\u00e9rence du document utilis\u00e9 pour baliser l’information directement au sein de l’\u00e9l\u00e9ment porteur de ces informations.<\/p>\n
J’attire votre attention \u00e9galement sur l’arriv\u00e9e d’un document qui tend \u00e0 devenir une nouvelle r\u00e9f\u00e9rence pour structurer des donn\u00e9es : issu d’un consortium entre Google, Bing, Yahoo et Yandex, cette r\u00e9f\u00e9rence est nomm\u00e9e schema.org<\/a>. Ce sont d’ailleurs les sch\u00e9mas propos\u00e9s par schema.org que j’ai d\u00e9cid\u00e9 d’utiliser au quotidien et, par cons\u00e9quent, de vous pr\u00e9senter dans cet article.<\/p>\nNouveaux attributs<\/h3>\n
Il n’en existe pas \u00e9norm\u00e9ment.<\/p>\n
\n- itemscope<\/strong> : il permet de cr\u00e9er un item dont le type peut-\u00eatre pr\u00e9cis\u00e9 gr\u00e2ce \u00e0 l’attribut suivant,<\/li>\n
- itemtype<\/strong> : coupl\u00e9 \u00e0 itemscope, il accueille une URL vers la r\u00e9f\u00e9rence du sch\u00e9ma (ex : \u00ab\u00a0http:\/\/schema.org\/Review\u00a0\u00bb) qui devra respecter les valeurs de ce sch\u00e9ma,<\/li>\n
- itemprop<\/strong> : il est porteur d’une valeur permettant de pr\u00e9ciser la nature d’une donn\u00e9e au sein d’un sch\u00e9ma sp\u00e9cifi\u00e9 pr\u00e9c\u00e9demment.<\/li>\n
- itemref<\/strong> : il permet de faire le lien compl\u00e9mentaire entre deux donn\u00e9es sans descendance.<\/li>\n
- itemid<\/strong> : lorsque l’item poss\u00e8de une r\u00e9f\u00e9rence globale unique, comme par exemple un l’identifiant d’un livre (urn:isbn:0-xxx-xxxxx-x). Il est attribu\u00e9 en m\u00eame temps que l’attribut itemscope.<\/li>\n<\/ul>\n
Ces attributs peuvent \u00eatre transport\u00e9s par n’importe quel \u00e9l\u00e9ment (souvent des span pour injecter une donn\u00e9e sans mise en forme particuli\u00e8re), bien que certaines exceptions, \u00e9videntes, existent.<\/p>\n
Exemple d’une simple revue<\/h3>\n
Nous allons nous attarder sur ce sch\u00e9ma et reprendre l’exemple pr\u00e9c\u00e9demment mis en place avec les microformats:<\/p>\n
<span itemscope itemtype=\"http:\/\/schema.org\/Review\">\r\n <span itemprop=\"itemReviewed\">Juiz Smart Mobile Admin<\/span>\r\n <span itemprop=\"reviewRating\">\r\n Note de : 90 sur 100\r\n <\/span>\r\n bas\u00e9e sur 35 votes.\r\n<\/span><\/code><\/pre>\nRendu :<\/p>\n
\u00ab\u00a0Juiz Smart Mobile Admin Note de : 90 sur 100 bas\u00e9e sur 35 votes.\u00a0\u00bb<\/p>\n
Il est important de noter que l’insertion de ces attributs et leurs valeurs n\u2019influe pas sur l\u2019aspect des \u00e9l\u00e9ments.<\/p>\n
Ce code va nous permettre de voir une utilisation basique d’une revue (Review<\/a>), qui pour schema.org est un sous-ensemble d’un travail cr\u00e9atif (CreativeWork<\/a>). Le type de donn\u00e9es transport\u00e9es ici est \u00e0 d\u00e9clarer dans l’attribut itemtype du parent et donne l’URL vers le schema utilis\u00e9. L’attribut itemscope permet de d\u00e9finir l’\u00e9l\u00e9ment comme porteur d’informations format\u00e9es.<\/p>\nEnsuite, nous utilisons l’attribut itemprop<\/code> que nous appliquons \u00e0 des \u00e9l\u00e9ments afin d’en d\u00e9finir le sens, en respectant les valeurs fournies par schema.org pour le type que nous utilisons.<\/p>\nExemple d’une notation imbriqu\u00e9e dans une revue<\/h3>\n
Aussi appel\u00e9e Embedded Items<\/em>, l’imbrication de diff\u00e9rents types de sch\u00e9ma peut intervenir dans le cas de notre exemple de revue. En effet, notre exemple pr\u00e9c\u00e9dent manque quelque peu de pr\u00e9cision, puisque schema.org pr\u00e9voit \u00e9galement un type de sch\u00e9ma pour les \u00e9valuations (AggregateRating<\/a>).<\/p>\nCompl\u00e9tons notre code pr\u00e9c\u00e9dent :<\/p>\n
<div itemscope itemtype=\"http:\/\/schema.org\/Review\">\r\n <h1 itemprop=\"itemReviewed\">Juiz Smart Mobile Admin<\/h1>\r\n <!-- Imbrication d\u2019un item -->\r\n <p itemprop=\"reviewRating\" itemscope itemtype=\"http:\/\/schema.org\/AggregateRating\">\r\n Note de :\r\n <span itemprop=\"ratingValue\">90<\/span> sur\r\n <span itemprop=\"bestRating\">100<\/span>\r\n\r\n bas\u00e9e sur\r\n <span itemprop=\"ratingCount\">35<\/span> votes.\r\n <\/p>\r\n <!-- \/ fin de l\u2019imbrication -->\r\n <p itemprop=\"reviewBody\">\r\n Ce plugin propos\u00e9 pour optimiser l'interface d'administration de[\u2026]\r\n <\/p>\r\n<\/div><\/code><\/pre>\nRendu :<\/p>\n
\u00ab\u00a0Juiz Smart Mobile Admin
\nNote de : 90 sur 100 bas\u00e9e sur 35 votes.
\nCe plugin propos\u00e9 pour optimiser l’interface d’administration de[\u2026]\u00a0\u00bb<\/p>\n
J’ai pris le soin de remplacer certains \u00e9l\u00e9ments pour vous illustrer le fait que les attributs peuvent \u00eatre plac\u00e9s sur n’importe quels \u00e9l\u00e9ments, ce qui influe sur la mise en page mais pas sur la mani\u00e8re de transporter les informations.<\/p>\n
Ici, vous pouvez rep\u00e9rer un deuxi\u00e8me jeu itemscope\/itemtype inclus dans l’itemtype Review<\/em>. \u00c0 partir du moment o\u00f9 vous cr\u00e9ez une nouvelle d\u00e9claration de type, le moteur de recherche sait qu’il n’a plus \u00e0 traiter le premier type (partie du code entre les deux commentaires HTML), mais le second d\u00e9clar\u00e9 (autres parties du code), tant qu’il se trouve dans l’\u00e9l\u00e9ment porteur de ce type. D\u00e8s qu’il en sort (ici d\u00e8s qu’il sort du premier paragraphe) il revient dans l’analyse du type parent.<\/p>\nAutrement dit, dans la div parente, nous utilisons un type Review<\/em>, tous les itemprop ont donc des valeurs autoris\u00e9es par le sch\u00e9ma de ce type. Le premier paragraphe, qui pr\u00e9cise un nouveau type (AggregateRating<\/em>) poss\u00e8de des span qui sont porteurs d’itemprop dont les valeurs autoris\u00e9es sont celles du nouveau sch\u00e9ma d\u00e9clar\u00e9. Lorsqu’on sort de ce paragraphe, l’analyse porte sur le premier type d\u00e9clar\u00e9 (Review<\/em>).<\/p>\nCr\u00e9ation d’une fiche recette<\/h2>\n
Pour vous habituer \u00e0 jongler avec les donn\u00e9es et les techniques de schema.org, nous allons voir deux autres exemples dont la cr\u00e9ation d’une fiche de recette. Cet exemple est id\u00e9al car il est illustr\u00e9 directement dans Google.<\/p>\n
![\"google-seo-recette\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/08\/google-seo-recette.png\")
<\/a><\/p>\nRecette d’une tarte au kiwi. On voit clairement la dur\u00e9e et la photo de la recette.<\/p>\n
Vous ne connaissez pas forc\u00e9ment les termes employ\u00e9s par schema.org, alors un petit coup de \u00ab\u00a0cook\u00a0\u00bb dans le formulaire de recherche du site et la fiche technique Recipe<\/a> sort dans les r\u00e9sultats.<\/p>\nUne bonne m\u00e9thodologie consiste \u00e0 cr\u00e9er votre structure avec les informations que vous avez dans un premier temps ; dans un second temps, ajoutez les attributs item* lorsque schema.org le pr\u00e9voit. Il est possible de pr\u00e9ciser certains types de donn\u00e9es en imbriquant un item d’un certain type dans un autre item d’un autre type.<\/p>\n
<div itemscope itemtype=\"http:\/\/schema.org\/Recipe\">\r\n <h1 itemprop=\"name\">Recette d'une Tarte au Kiwi<\/h1>\r\n <p>\r\n <img itemprop=\"image\" src=\"tarte-kiwi.jpg\" alt=\"\" \/>\r\n Recette propos\u00e9e par <span itemprop=\"author\">Greg<\/span>,\r\n le <meta itemprop=\"datePublished\" content=\"2012-02-08\">8 f\u00e9vrier 2012 -\r\n Not\u00e9e\r\n <!-- Imbrication d\u2019un item AggregateRating -->\r\n <span itemprop=\"aggregateRating\" itemscope itemtype=\"http:\/\/schema.org\/AggregateRating\">\r\n <span itemprop=\"ratingValue\">4<\/span>\/<span itemprop=\"bestRating\">5<\/span>\r\n <\/span>\r\n <!-- \/ fin de l\u2019imbrication -->\r\n avec <span itemprop=\"comment\">35<\/span> avis.\r\n <\/p>\r\n <p itemprop=\"description\">\r\n D\u00e9licieuse, cette tarte d'hiver \u00e9moustille les papilles.\r\n Toute simple, elle est \u00e0 la port\u00e9e des novices en cuisine. Succ\u00e8s garanti !\r\n <\/p>\r\n\r\n <h2>Informations<\/h2>\r\n\r\n <h3>Dur\u00e9es<\/h3>\r\n <p>\r\n Dur\u00e9e de pr\u00e9paration : <meta itemprop=\"prepTime\" content=\"PT15M\">15 mn<\/span><br \/>\r\n Dur\u00e9e de cuisson : <meta itemprop=\"cookTime\" content=\"PT25M\">25 mn<\/span><br \/>\r\n Dur\u00e9e totale : <meta itemprop=\"totalTime\" content=\"PT40M\">40 mn\r\n <\/p>\r\n\r\n <h3>Nutrition<\/h3>\r\n<!-- Imbrication d\u2019un item NutritionInformation -->\r\n <p itemprop=\"nutrition\" itemscope itemtype=\"http:\/\/schema.org\/NutritionInformation\">\r\n <span itemprop=\"calories\">240 calories<\/span>\r\n <\/p>\r\n<!-- \/fin de l\u2019imbrication -->\r\n\r\n <h2>Ingr\u00e9dients<\/h2>\r\n <ul>\r\n <li itemprop=\"ingredients\">1 p\u00e2te feuillet\u00e9e<\/li>\r\n <li itemprop=\"ingredients\">350 g de kiwis<\/li>\r\n <li itemprop=\"ingredients\">125 g de cr\u00e8me liquide<\/li>\r\n <li itemprop=\"ingredients\">1 jaune d'oeuf<\/li>\r\n <li itemprop=\"ingredients\">2 cuill\u00e8res \u00e0 caf\u00e9 de cassonade<\/li>\r\n <li itemprop=\"ingredients\">30 g de sucre semoule<\/li>\r\n <\/ul>\r\n\r\n <h2>Instructions<\/h2>\r\n <ol itemprop=\"recipeInstructions\">\r\n <li>Pr\u00e9chauffez le four \u00e0 220\u00b0C.<\/li>\r\n <li>D\u00e9roulez la p\u00e2te toute pr\u00eate et posez-la avec son papier dans un moule \u00e0 tarte.<\/li>\r\n [\u2026]\r\n <\/ol>\r\n\r\n<\/div><\/code><\/pre>\nCe code peut sembler complexe, mais il s’agit d’une base structurelle pour la cr\u00e9ation d’une fiche recette sur laquelle on a simplement ajout\u00e9 des m\u00e9tadonn\u00e9es.<\/p>\n
Comme vous pouvez le voir, nous avons commenc\u00e9 par d\u00e9clarer un item de type Recipe<\/em> repr\u00e9sent\u00e9 dans la premi\u00e8re partie du code. Puis \u00e0 l’int\u00e9rieur nous avons souhait\u00e9 \u00e9tendre les informations sur la notation de la recette en d\u00e9clarant un nouvel item de type AggregateRating<\/em> repr\u00e9sent\u00e9 entre les premiers commentaires HTML. Enfin, plus loin, nous avons \u00e9tendu les informations nutritionnelles en d\u00e9clarant un nouveau type imbriqu\u00e9 nomm\u00e9 NutritionInformation<\/em> repr\u00e9sent\u00e9 entre les seconds commentaires HTML.<\/p>\nCette imbrication est possible lorsque le schema le pr\u00e9voit, l’information est ainsi repr\u00e9sent\u00e9e :<\/p>\n
![\"recipe-microdata\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/08\/recipe-microdata.png\")
<\/a><\/p>\nLe propri\u00e9t\u00e9 \u00ab\u00a0nutrition\u00a0\u00bb peut-\u00eatre \u00e9tendue gr\u00e2ce au type \u00ab\u00a0NutritionInformation\u00a0\u00bb<\/p>\n
Il vous faudra donc apprendre \u00e0 jouer avec les diff\u00e9rents sch\u00e9mas, et surtout \u00e0 estimer quelles informations m\u00e9ritent d’\u00eatre \u00e9tendues.<\/p>\n
Cr\u00e9ation d’une fiche film<\/h2>\n
Je prends volontairement ce dernier exemple pour vous pr\u00e9senter une technique qui permet d’associer des informations sans qu\u2019elles soient forc\u00e9ment imbriqu\u00e9es. En effet il arrive que la mise en page d’un site web ou l’\u00e9volution de ses informations ne permette pas d’imbriquer les items comme nous l’avons vu juste avant.<\/p>\n
Prenons le sch\u00e9ma suivant :<\/p>\n
![\"schema-microdata-film\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/08\/schema-microdata-film.png\")
<\/a><\/p>\nLe code HTML correspondant \u00e0 cette mise en page pourrait ressembler \u00e0 cela :<\/p>\n
<section role=\"main\">\r\n <article itemscope itemtype=\"http:\/\/schema.org\/Movie\" itemref=\"more-info\">\r\n <h1 itemprop=\"name\">Nom du film de la fiche<\/h1>\r\n <img itemprop=\"image\" src=\"img\/the-film.png\" alt=\"\" width=\"150\" height=\"150\">\r\n\r\n <section itemprop=\"video\" itemscope itemtype=\"http:\/\/schema.org\/VideoObject\">\r\n <h2>Trailer : <span itemprop=\"name\">Nom du film de la fiche<\/span><\/h2>\r\n <meta itemprop=\"duration\" content=\"T1M33S\">\r\n <meta itemprop=\"thumbnail\" content=\"image-miniature-du-trailer.jpg\">\r\n <object \u2026>\r\n <param \u2026>\r\n <embed type=\"application\/x-shockwave-flash\" \u2026>\r\n <\/object>\r\n <p itemprop=\"description\">Courte description de la vid\u00e9o<\/p>\r\n <\/section>\r\n\r\n <section itemprop=\"description\">\r\n <p>Contenu principal de ma fiche film<\/p>\r\n <\/section>\r\n\r\n <footer>\r\n <dl>\r\n <dt>R\u00e9alisateur<\/dt>\r\n <dd itemprop=\"director\">Emily Atef<\/dd>\r\n <dt>Acteurs<\/dt>\r\n <dd itemprop=\"actors\">Maria-Victoria Dragus<\/dd>\r\n <dd itemprop=\"actors\">Roeland Wiesnekker<\/dd>\r\n <dd itemprop=\"actors\">Wolfram Koch<\/dd>\r\n <dd itemprop=\"actors\">Christine Citti<\/dd>\r\n <dd itemprop=\"actors\">Nathalie Boutefeu<\/dd>\r\n <dt>Distributeur<\/dt>\r\n <dd itemprop=\"provider\">Les Films du Losange<\/dd>\r\n <dt>Musique par<\/dt>\r\n <dd itemprop=\"musicBy\">John Smith<\/dd>\r\n <dt>Ratio d'image<\/dt>\r\n <dd>2.35<\/dd>\r\n <\/dl>\r\n <\/footer>\r\n\r\n <\/article>\r\n\r\n <aside id=\"more-info\">\r\n <dl>\r\n <dt>Langues<\/dt>\r\n <dd><meta itemprop=\"inLanguage\" content=\"fr\">Fran\u00e7ais<\/dd>\r\n <dd><meta itemprop=\"inLanguage\" content=\"de\">Allemand<\/dd>\r\n <dt>Ann\u00e9e de production<\/dt>\r\n <dd><time datetime=\"2011\" itemprop=\"dateCreated\">2011<\/time><\/dd>\r\n <dt>Date de sortie<\/dt>\r\n <dd><time datetime=\"2011-04-25\" itemprop=\"datePublished\">25 avril 2012<\/time><\/dd>\r\n <dt>Genre<\/dt>\r\n <dd itemprop=\"genre\">Drame<\/dd>\r\n <dt>Dur\u00e9e<\/dt>\r\n <dd><meta itemprop=\"duration\" content=\"PT91M\">91 min<\/dd>\r\n <\/dl>\r\n <\/aside>\r\n<\/section><\/code><\/pre>\nNotre fiche film est divis\u00e9e en deux mais ses informations sont r\u00e9unies sous le m\u00eame item gr\u00e2ce \u00e0 la propri\u00e9t\u00e9 itemref qui fait r\u00e9f\u00e9rence \u00e0 l’\u00e9l\u00e9ment aside#more-info \u00e0 travers son identifiant \u00ab\u00a0more-info\u00a0\u00bb.<\/p>\n
Cet attribut permet de pr\u00e9senter un m\u00eame item d\u00e9coup\u00e9 en plusieur \u00e9l\u00e9ments \u00e0 travers la page. Si les informations de notre item Movie avaient \u00e9t\u00e9 diss\u00e9min\u00e9es dans d’autres \u00e9l\u00e9ments de la page, il aurait \u00e9t\u00e9 possible de les cibler gr\u00e2ce \u00e0 la valeur de leur attribut id de la sorte :<\/p>\n
<article itemscope itemtype=\"http:\/\/schema.org\/Movie\"\r\n itemref=\"more-info id2 id3 id4\"><\/code><\/pre>\nJe ne vous ai pas encore expliqu\u00e9 la pr\u00e9sence des \u00e9l\u00e9ments meta dans la page. Ceux-ci permettent d’ins\u00e9rer une information qui a souvent besoin d’un formatage pr\u00e9cis qui est peu intelligible par une personne non aguerrie.
\nPrenons l’exemple de l’information \u00ab\u00a0duration\u00a0\u00bb qui repr\u00e9sente la dur\u00e9e. Cette information doit \u00eatre format\u00e9e en respectant le format ISO 8601<\/a> qui d\u00e9finit un format de date ou de temps.
\nDans notre fiche, il aurait \u00e9t\u00e9 possible d’\u00e9crire :<\/p>\n<dd itemprop=\"duration\">PT91M<\/dd><\/code><\/pre>\nMais vous imaginez bien ici que PT91M est quelque peu d\u00e9rangeant pour d\u00e9finir une dur\u00e9e d’une heure et demi. C’est pourquoi, par convention – et si ce n’en est pas encore une il faudrait que \u00e7a le devienne – l’information s’\u00e9crit dans un \u00e9l\u00e9ment meta et \u00e0 c\u00f4t\u00e9 de l’information intelligible.<\/p>\n
Outils<\/h2>\n
Google propose un syst\u00e8me d’analyse de vos pages \u00e0 la recherche des Rich Snippets. Il d\u00e9tecte le sch\u00e9ma utilis\u00e9 et vous fait un rapport sur les donn\u00e9es trouv\u00e9es, leur formatage et les \u00e9ventuelles erreurs rencontr\u00e9es.
\nCet outil est disponible ici : Structured Data – Testing Tool<\/a><\/p>\nAvis personnel & analyses<\/h2>\n
Cet article aborde les microformats sur la base de l\u2019apport de HTML5 et des microdata. Les outils mis \u00e0 disposition aujourd\u2019hui permettent de concevoir des contenus riches en informations pour le visiteur, mais \u00e9galement pour les machines. \u00c0 l\u2019heure actuelle, ces machines sont principalement des moteurs de recherche et quelques applications qui utilisent les sch\u00e9mas propre \u00e0 microformats.org.<\/p>\n