HTML

Optimisation pour les moteurs de recherche (SEO)

SEO - Microformats et microdonnées

Microformat μF - Un amalgame de format

Bien que le terme « microformat » soit plus ou moins récent, lil remontent bien au-delà du HTML. Pour favoriser la communication entre la machine et une information destinées aux humains, c’est le HTML et particulièrement le RDF qui lui a apporté un aspect relationnelle qu’on appelle aujourd’hui le « Web des données » (Linked Data) (à ne surtout pas confondre avec le concept de « Cloud Data », représentation moderne du besoin insatiable de tout concentrer au même endroit ; -) À coup de standard et de normalisation, c’est une tentative de créer un Web sémantique et une structure de données partagées sans pour autant devoir passer par le carcan des documents HTML. C’est ce que nommait Tim Berners-Lee en 2006 le « Graphe Global Géant (GGG) » ou Web 3.0 matérialisé depuis 2011 par le projet « linked open data (LOD) ». Entre autres des microformats, le langage RDF, le XHTML et des formats XML comme le « Foaf », toujours bien vivant malgré une soi-disant complexité. Un excellent exemple est le langage SVG, une image qui a des allures de page Web. Au-delà de la technique et de la tentative de donner aux machines l’accès aux balisages sémantiques a plus souvent qu’autrement été la transposition des formats les plus rependue dans de nouveaux formats Web. Comme une dactylo en code ASCII! Les exemples sont légions, du spécialisé « Semantic Web DogFood » au format Atom!

Un bon exemple est le format XMP. Un ramassis de format et de termes spécifiques dans un seul schéma, à des appareils photographiques, à des vieux standards graphiques. Parfois dédiés à des applications comme Photoshop ou même Adobe...une entreprise! Tout aussi vieillot, le vCard est un bon exemple de récupération, transposé en « microformat hCard » à tel point que Microformats.org semble aujourd’hui tributaire de plusieurs de ces reliques. Format par ailleurs toujours bien actuel et derrière la grande majorité des exportation/importation de vos contacts, calendriers, événements et alertes!

Un autre exemple est Dublin Core (DCMI), une des premières initiatives du Web sémantique. Des métadonnées et un vocable aujourd’hui souvent combiné aux microdonnées tout aussi naturellement. Et bien entendu le XMDP (XHTML Meta Data Profils) et ses nombreux profils qu’on a recyclés en microdonnées. Et enfin, plus récemment, les réseaux sociaux comme le préfix « og: » de Facebook ou les nouveaux « Cards » de Twitter qui aspire à mieux j’imagine ?(!)

J’ai une petite larme pour le format Foaf et le tout le développement XML qu’il ne faut surtout pas oublier entre-temps, mais voilà déjà une liste de schémas fort utile :

hAtom

pour marquer des fils web Atom (standard) provenant du HTML standard ;

hCalendar

pour les événements ;

hCard

pour l’information de contact ; comprend :

adr

pour les adresses postales ;

geo

un des premier pour les coordonnées géographiques (latitude, longitude) ;

hListing

pour les petites annonces ;

hMedia

info medi concernant les images, video et audio ;

hNews

pour les actualités ;

hProduct

pour les produits ;

hRecipe

recettes de cuisine et cuisson ;

hReview

pour les critiques ;

hReview-aggregate

agrégation de critiques et notes ;

hResume

pour les résumés ou CVs ;

Microdonnées

<a href="http://site.fr" rel="nofollow">Un Très bon site et je me fou que la machine le sache!</a>

Le terme « microdonnées » (Microdata ou structured data) instauré dans le HTML5 par le WHATWG nous vient directement du rapport avec les « balises méta » (Meta tag) jugées peu flexibles et grossière. C’est les communautés de développeurs qui se sont manifesté autour de la relation entre la machine et les informations transigées par les blogues, les forums, les répertoires de sites... C’est un vocabulaire plus fin, une nomenclature plus intime pour disséquer et décrire au scalpel le contenu sous forme de balise et d’attribut. Pas nécessairement en HTML5, par exemple ajouter des attributs spécifiques pour indiquer telle ou telle information au moteur de recherche directement dans le code HTML ne date pas d’hier.

// Métadonnée
<meta name="author" content="Luc Tremblay" />

//En RDF
<item rdf:about="http://dbpedia.org/resource/Chat">Chat</item>

L’ancre est en quelque sorte une microdonnée toujours très utilisée.

// Ancre
<a name="html5" id="html5"></a>

À l’aide de simple nom de classe CSS :

// Classe
<span class="date">25 janvier 2001</span>

// Exemple avec coordonnées
<address>
  <span class="name">Luc Tremblay</span>
  <span class="address">123 de la rue</span>
  <span class="city">L’Islet</span>
  <span class="phone">+1 555-555-1212</span>
  <span class="geo">64.686; -2.193</span>
  <span class="url">http://exemple.com</span>
</address>

De belles classes anglaises monsieur, on parle à une machine ne l’oublions pas ; -) « geo » est même déjà une convention pour la longitude/latitude. Remarquez que le HTML5 peut devenir aussi significatif avec ces nouvelles balises, entre la microdonnée et la balise!

// Exemple de structure HTML5
<article>
  <header>
    <hgroup>
      <h1>Titre</h1>
      <h2>Sous-titre</h2>
    </hgroup>
    <p><time datetime="2015-02-2025">25 février 2015</time></p>
  </header>                
  <p class="description">Description</p>
</article>

Les attribut data-*

Si les normes sont utiles pour construire un Web de données, elles ne sont pas indispensables pour les développeurs qui ont créé leurs propres méthodes pour discuter avec une machine, en particulier la leur.... Un bon exemple est l’attribut « data-* » qui découle directement de ce besoin et qui permet des « microdonnées » preso! On pourrait faire cet exemple tiré par les cheveux :

// Exemple improbable, par ailleurs incompréhensible pour Google. 
<address data-name="Luc Tremblay" data-address="123 de la rue" data-city="L’Islet" data-phone="+1 555-555-1212" data-geo="64.686; -2.193" data-url="http://exemple.com">
  Luc Tremblay<br />
  123 de la rue<br />
  L’Islet<br />
  +1 555-555-1212<br />
  64.686; -2.193<br />
  http://exemple.com
</address>

Une communauté

À l’instar du Dublin Core, d’autres groupes ont planché sur la question, schema.org. OpenMetadata ou encore The Open Graph protocol qu’utilise Facebook pour enrichir les pages du « web sociable ». Microformats.org, un autre grand joueur qui compile un peu de tout, mentionne même sur son site :

«Les microdonnées sont vraiment plus simple que l’alternative XML, trop complexe»

Rien de moins! Enfin, sans oublier schema.org aussi reconnu par Google et surtout le HTML Standard - 5 Microdata du WHATWG derrière l’intégration des microdonnées au HTML avec son HTML5. Et bien entendu la proposition W3C - HTML Microdata.

En d’autres mots, autant de manières de pousser un titre, une date et un auteur à une machine, comme si le « meta tag » ne faisait pas déjà le travail! L’intention est bonne, je ne suis pas sûr que ça normalise vraiment. On ajoute à ce qui est déjà complexe. Par exemple Google ne supporte pas la balise méta « keywords » à cause des abus. Mais supporte la microdonnée « keywords » que l’ont peu caché display: none et malgré le fait que l’honnêteté des webmestres est aussi un problème soulevé par ses propres concepteurs! D’ailleurs regarder le code source de la plupart de ses références, vous constaterez qu’aucun n’utilise les microdonnées! J’imagine qu’aucune machine n’avait vraiment à lire ces informations jusqu’à présent.

Voilà le portrait, pour ne pas dire l’apologie du ...Web3! Outre le devoir de mémoire, ce n’est pas si compliqué. Enfin c’est même d’une grande simplicité si ce n’était de la sémantique spécialisée justement. Abstraitement on peut même trouver l’exercice des plus futiles, si ce n’était de la machine en cause...

HTML 5

Le HTML5 permet donc à quelques nouveaux attributs de spécifier des microdonnées souvent dévirées d’un microformat!

En gros, outre les exceptions historiques dont les balises <meta>, <cite> ou les nouvelles ex: <summary>, <article>, <details>, <figcaption>... les balises HTML conventionnelles sont en principe utilisé pour indiquer au navigateur la manière dont il doit afficher l’information. Elles ne donnent pas d’information concernant son contenu. Le HTML5 a certes ajouté à la compréhension (ou à l’ambiguïté!) quoique davantage une sémantique structurelle ex: <article>, <aside>, <footer>... Le WHATWG a donc intégré officiellement les microdonnées dans les balises HTML à l’aide d’un attribut itemscope.

Quant à Google, eh bien il récupère deux décennies de microformats. Si bien que loin d’être au bénéfice exclusif du développeur comme c’est souvent le cas, ou encore l’Encyclopædia Universalis exhaustif de la microdonnée, la sémantique c’est construite autour du véritable enjeu, à savoir le contenu et ses auteurs. Les systèmes de notation, les revues, les commentaires, les médias sociaux, les produits, les avis, les agenda et événement et bien entendu le blog peuvent être signalé et digéré par Google.

Attributs :

itemscope

Crée un schéma et indique que le contenu contiennent des informations à son sujet.

itemtype

Une URL pointant vers un vocabulaire (schéma) qui décrit l’élément et ses propriétés.

itemid

Un identifiant unique pour l’élément.

itemprop

Indique que la balise contient la valeur de la propriété indiquée. Les noms des propriétés et leurs valeurs possibles sont indiquées dans le vocabulaire.

itemref

Permet d’associer une balise non-descendante à une balise avec l’attribut itemscope.

La méthode est simple, cibler un item/donnée et lui attribuer une propriété selon un schéma!

<div itemscope itemtype="[uri]">
  <span itemprop="[propriété]">Valeur</span>
  <span itemprop="[propriété]">Valeur</span>
</div>

<div itemscope="" itemtype="[uri]">...
// Ou 
<div itemscope="itemscope" itemtype="[uri]">...

Un groupe d’items selon un schéma. définie par l’attribut itemscope auquel on ajoute généralement une référence sur le type de contenu itemtype et même par item, ce qui est génial et particulièrement flexible quand vient le temps de relier les contenus. Chaque schéma englobe ses propres items spécifiques ou itemprop avec un vocable qui lui est propre. Mais souvent des plus génériques tel « name », desc, img... ou spécialisés, en musique par exemple comme « band » et « nationality ».

Exemple simple de la W3C

<div itemscope>
 <p>Mon nom est <span itemprop="name">Louis-Jean Cormier</span>.</p>
 <p>Mon band se nomme <span itemprop="band">Karkwa</span>.</p>
 <p>Je suis <span itemprop="nationality">Québécoise</span>.</p>
</div>

// Résultat
name
    Louis-Jean Cormier
band
    Karkwa
nationality
    Québécoise

Comme on peut voir dans cet exemple de la W3C traduit en français, la sémantique est tout à fait anglophone et pas toujours adaptée pour le français par exemple. « Je suis québécoise! » mais je suis un homme ; -)

Attribut « itemtype »

Pour indiquer, à la manière du « nom d’espace XML » (namespace), le type de schéma. L’attribut itemtype permet de spécifier un vocabulaire, par exemple « BlogPosting » de Google (voir l’exemple complet)

<article itemscope="itemscope" itemtype="http://schema.org/BlogPosting">
  ...
</article>

Attribut « itemref »

Une licence appliquée à deux œuvres à l’aide d’une seule référence « licenses » selon le schéma très pratique de la W3C « Licensing works » :

<!DOCTYPE HTML>
<html>
 <head>
  <title>Collection</title>
 </head>
 <body>
  <h1>Photos de paysage</h1>
  <figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses">
   <img itemprop="work" src="fleurs.jpg" alt="Un champ de fleurs.">
   <figcaption itemprop="title">De belles couleurs.</figcaption>
  </figure>
  <figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses">
   <img itemprop="work" src="foret.jpg" alt="Forêt de pins.">
   <figcaption itemprop="title">Pinière derrière chez moi.</figcaption>
  </figure>
  <footer>
   <p id="licenses">Image sous licence 
    <a itemprop="license" href="http://www.opensource.org/licenses/mit-license.php">
     MIT license
    </a>.
   </p>
  </footer>
 </body>
</html>

// La lecture
work
    fleurs.jpg
title
    De belles couleurs. 
license
    http://www.opensource.org/licenses/mit-license.php
work
    foret.jpg
title
    Pinière derrière chez moi. 
license
    http://www.opensource.org/licenses/mit-license.php

Intégration dans vos pages Web

Passons aux choses sérieuses, l’intégration de formats pratiques :

• Fil d’Ariane (Breadcrumbs)
• Organisations (Business)
• Blog
• Événements (Events)
• Produit (Product)
• Application (SoftwareApplication)
• Personne (People)
• Recettes (Recipes)
• Avis et notes (Reviews and ratings)
• Licence (Licensing works)
• Médias sociaux
• Moteur de recherche

Fil d’Ariane (Breadcrumbs)

<div itemprop="breadcrumb" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> 
  <ol>
    <li><a href="/" itemprop="url"><span itemprop="title">Accueil</span></a></li>
    <li><a href="/tutoriels/" itemprop="url"><span itemprop="title">Tutoriels</span></a></li>
    <li><a href="/tutoriels/html/" itemprop="url"><span itemprop="title">HTML</span></a></li>
    <li><b><span itemprop="title">SEO - Microformats et microdonnée</span></b></li>
  </ol>
</div>

<div id="a" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" itemref="b">
  <a href="http://trucsweb.com/" itemprop="url">
    <span itemprop="title">Accueil</span> ›
  </a> ›
</div>
<div id="b" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="child" itemref="c">
  <a href="http://trucsweb.com/tutoriels/" itemprop="url">
    <span itemprop="title">Tutoriels</span> ›
  </a> ›
</div>
<div id="c" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="child">
  <a href="http://trucsweb.com/tutoriels/HTML/" itemprop="url">
    <span itemprop="title">HTML</span>
  </a>
</div>

Organisations (Business) et coordonnées (Address)

<div itemscope="itemscope" itemtype="http://data-vocabulary.org/Organization"> 
  <h2 itemprop="name">Conception Oznogco mutimédia</h2>
  <div itemprop="address" itemscope="itemscope" itemtype="http://data-vocabulary.org/Address">
    <span itemprop="street-address">Coteau-du-Tuf</span>, 
    <span itemprop="locality">L’Isle-Verte</span>, 
    <span itemprop="region">Québec</span> 
    <span itemprop="postal-code">H7W 2R2</span>
  </div>
  <div itemscope="itemscope" itemtype="http://www.data-vocabulary.org/Geo/"
style="display:none">
    <span itemprop="geo">  
      <span itemprop="latitude">48.006 N</span>  
      <span itemprop="longitude">-69.347 W</span>
    </span>
  </div>  
  Téléphone : <span itemprop="tel">555-555-5555</span>
  <a href="http://oznogco.com" itemprop="url">http://oznogco.com</a>
</div>

Vocable BlogPosting compatible Google (exemple complet)

<article itemscope="itemscope" itemtype="http://schema.org/BlogPosting">
  <header>
    <h1 itemprop="name headline">jQuery : Équivalent Javascript</h1>
    <h2 style="display:none;" itemprop="genre">Javascript</h2>
    <h2 style="display:none;" itemprop="genre">Sans jQuery</h2>
  </header>
  <p class="lead" itemprop="description">
    <span itemprop="keywords" style="display:none">jQuery,  ECMAScript, querySelector, classList, JSON</span>
    Résumé...
    <img itemprop="image" src="http://www.trucsweb.com/documents/images/2015/sans-jquery.jpg"/>
    <span itemprop="author">Django Blais</span> <time itemprop="datePublished" datetime="2015-04-27T22:08:00-05:00">27 avril 2015</time>
  </p>
  <section class="col-md-12" itemprop="articleBody"> 
    ...
  </section>
</article>

Événements (Events)

Ce schéma qui combine plusieurs formats est des plus puissant parce qu’il s’intègre à merveille dans ce que Google appelle son « Knowledge Graph ». Un système de relation sameAs entre les contacts, location, événement etc. Je vous invite à lire sur le sujet : Listing Your Events in the Knowledge Graph

L’ensemble de mes tentatives, sur plusieurs agendas professionnels et officiels, a tout échoué. Et ce malgré la conformité et les validations des outils de Google. Même chose avec les recettes. Nada, Google ne fait absolument rien! Ce qui sous-entend que c’est encore un switch à la discrétion d’un humain! Un gros Bhouuuu à Google discriminatoire qui nous fait encore une fois perdre notre temps.

<div itemscope="itemscope" itemtype="http://schema.org/MusicEvent">
  <div itemprop="location" itemscope="itemscope" itemtype="http://schema.org/MusicVenue">
    <meta itemprop="name" content="Le Vieux clocher"/>
    <link itemprop="sameAs" href="http://exemple.com/vieux_clocher"/>
    <meta itemprop="address" content="34, de la rue, L'Isle-Verte, Québec, Canada"/>
  </div>

  <div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer">
    <span itemprop="url">http://exemple.com/billetterie</span>
    <meta itemprop="priceCurrency" content="EURO" />
    <span itemprop="price">119.99</span> €
    <span itemprop="valideFrom">2015-05-01T12:00-0500</span>
    <span itemprop="availability" href="http://schema.org/InStock"/>Disponible!</span>
  </div>
  <a itemprop="url" href="http://exemple.com/spectacle/">
    <span itemprop="name"><b>Spectacle de musique</b></span>
  </a>
  <span itemprop="description">Grand spectacle familial.</span>
  <span itemprop="startDate" content="2015-06-01T12:00">Début : 06/01/2015 12:00PM</span>
  <span itemprop="endDate" content="2015-06-01:00.000">Fin : 2015-06-01:00.000</span>
  <span itemprop="duration" content="0000-00-00T03:00">Durée : 03:00</span>

  <div>
    <h3>Programmation</h3>
    <ul>
      <li itemprop="workPerformed" itemscope="itemscope" itemtype="http://schema.org/CreativeWork">
        <link itemprop="sameAs" href="http://exemple.com/ma_toune_1" />
        <span itemprop="name"><b>Ma toune 1</b> oeuvre de <em itemprop="name">Oznog</em></span>
      </li>
      <li itemprop="workPerformed" itemscope="itemscope" itemtype="http://schema.org/CreativeWork">
      <link itemprop="sameAs" href="http://exemple.com/ma_toune_2" />
      <span itemprop="name"><b>Ma toune 2</b></span>
      </li>
    </ul>
  </div>

  <div>
    <h3>Performeurs</h3>
    <div itemprop="performer" itemscope="itemscope" itemtype="http://schema.org/MusicGroup">
      <img itemprop="image" src="http://exemple.com/images/niobium.jpg" alt="Niobium" />
      <link itemprop="sameAs" href="http://Nniobium.org/" />
      <link itemprop="sameAs" href="http://fr.wikipedia.org/wiki/Niobium" />
      <div>
        <a href="http://exemple.com/Performeur?id=222"><span itemprop="name">Niobium</span></a>
      </div>
    </div>

    <div itemprop="performer" itemscope="itemscope" itemtype="http://schema.org/Person">
      <link itemprop="sameAs" href="http://www.musicien.com/" />
      <img itemprop="image" src="http://exemple.com/images/musicien.jpg" alt="Musicien"/>
      <div>
        <a href="http://exemple.com/Performeur?id=333"><span itemprop="name">Musicien</span></a>
      </div>
      <div>Chef d'orchestre</div>
    </div>
  </div>
</div>

Produit (Product)

<div itemscope="itemscope" itemtype="http://schema.org/Product">
  <span itemprop="brand">Oznogco</span>
  <span itemprop="name">Sucre d’érable</span>
  <img itemprop="image" src="sucre.jpg" alt="Sucre d’érable" />
  <span itemprop="description">Produits de l’érable.</span>
  Manufacturer Part Number!-- MPN = Le numéro de produit du manufacturier (Manufacturer Part Number). -->
  Numéro de Produit : <span itemprop="mpn">12345</span>
  <span itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.6</span> étoiles sur <span itemprop="reviewCount">89</span> avis
  </span>

  <span itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer">
    Prix régulier : 179.99 $
    <meta itemprop="priceCurrency" content="EURO" />
    $<span itemprop="price">119.99 $</span>
    (Fin de la vente <time itemprop="priceValidUntil" datetime="2020-11-05">
      5 juin!</time>)
    Disponible à partir : 
    <span itemprop="seller" itemscope="itemscope" itemtype="http://schema.org/Organization">
      <span itemprop="name">Executive Objects</span>
    </span>
    Condition : <link itemprop="itemCondition" href="http://schema.org/UsedCondition"/> excellente condition.
    <link itemprop="availability" href="http://schema.org/InStock"/>En stock!</span>
  </span>
</div>

// Liste de produits
<div itemscope="itemscope" itemtype="http://schema.org/Product">
  <span itemprop="brand">Oznogco</span>
  <span itemprop="name">Sucre d’érable</span>
  Numéro de Produit : <span itemprop="mpn">12345</span>
  <img itemprop="image" src="sucre.jpg" />

  <span itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
    Évaluation : <span itemprop="ratingValue">4.7</span>,sur <span itemprop="ratingCount">49</span> votes
  </span>

  <span itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/AggregateOffer">
    À partir de <span itemprop="lowPrice">119.99</span> $ jusqu’à 
    <span itemprop="highPrice">199.99</span> $
    <meta itemprop="priceCurrency" content="CAN" />
  </span>
</div>
// Produits 2
<div itemscope="itemscope" itemtype="http://schema.org/Product">
  <span itemprop="brand">Oznogco</span>
  <span itemprop="name">Beurre d’érable</span>
  Numéro de Produit : <span itemprop="mpn">12344</span>
  <img itemprop="image" src="beurre.jpg" />

  <span itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
    Évaluation : <span itemprop="ratingValue">4.9</span>,sur <span itemprop="ratingCount">79</span> votes
  </span>

  <span itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/AggregateOffer">
    À partir de <span itemprop="lowPrice">100.99</span> $ jusqu’à 
    <span itemprop="highPrice">120.99</span> $
    <meta itemprop="priceCurrency" content="CAN" />
  </span>
</div>

Application (SoftwareApplication)

<div itemscope="itemscope" itemtype="http://schema.org/SoftwareApplication">
  <span itemprop="name">Angry Birds</span> -

  Prérequis <span itemprop="operatingSystem">ANDROID</span>
  <link itemprop="applicationCategory" href="http://schema.org/GameApplication"/>

  Avis :
  <div itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> votes )
  </div>

  <div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer">
    Prix : $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="CAD" />
  </div>
</div>

Personne (People)

Largement inspiré du format Foaf

<div itemscope="itemscope" itemtype="http://schema.org/Person">
  <a itemprop="url" href="http://trucsweb.com/">
    <span itemprop="name"><b>Django Blais</b></span>
  </a>
  <img src="oznog.jpg" itemprop="image" alt="Photo de Oznog"/>
  <span itemprop="jobTitle">Analyste-programmeur</span>
  <meta itemprop="birthDate" content="1966-06-15">06/15/1966</span>
  <span itemprop="affiliation">Conception Oznogco multimédia</span>
  <div itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">Coteaux-du-tuf</span>
    <span itemprop="addressLocality">L'Isle-Verte</span>,
    <span itemprop="addressRegion">Quebec</span>
    <span itemprop="addressCountry">Canada</span>
    <span itemprop="postalCode">H7W 2R2</span>
  </div>
  <span itemprop="telephone">(418) 123-4567</span>
  <a href="mailto:oznog@exemple.com" itemprop="email">oznog@exemple.com</a>
  Page d'accueil : <a href="http://trucsweb.com/" itemprop="url">trucsweb.com/</a>
  Foaf : <a href="http://trucsweb.com/oznog/" itemprop="url">trucsweb.com/oznog/</a>
  Collègues : 
    <a href="http://www.xyz.edu/frereuntel.foaf" itemprop="colleague">Frêre Untel 1</a>
    <a href="http://www.xyz.edu/frereunte2.foaf" itemprop="colleague">Frêre Untel 2</a>

  <div itemscope="itemscope" itemtype="http://schema.org/Organization">
    <span itemprop="name">Conception oznogco Multimédia</span>
     <div itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">Coteaux-du-tuf</span>
    <span itemprop="addressLocality">L'Isle-Verte</span>,
    <span itemprop="addressRegion">Quebec</span>
    <span itemprop="addressCountry">Canada</span>
    <span itemprop="postalCode">H7W 2R2</span>
  </div>
  <span itemprop="telephone">(418) 123-4567</span>
  <a href="mailto:oznog@exemple.com" itemprop="email">oznog@exemple.com</a>
  Page d'accueil : <a href="http://trucsweb.com/" itemprop="url">trucsweb.com/</a>
  </div>
</div>

Recettes (Recipes)

<div itemscope="itemscope" itemtype="http://schema.org/Recipe">
  <h1 itemprop="name">Tarte aux pommes</h1>
  <img itemprop="image" src="pomme.jpg" />
  Par <span itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">
       <span itemprop="name">Frère Untel</span>
     </span>
  Publié le : <time datetime="2009-11-05" itemprop="datePublished">
    2 avril 2015</time>
  <span itemprop="description">La meilleurs tarte aux pommes au monde.</span>
  <span itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">5.0</span> étoile sur 
    <span itemprop="reviewCount">35</span> votes</span>
  Temps de préparation : <time datetime="PT30M" itemprop="prepTime">30 minutes</time>
  Temps de cuisson : <time datetime="PT1H" itemprop="cookTime">1 heure</time>
  Temps total : <time datetime="PT1H30M" itemprop="totalTime">1 heure 30 minutes</time>
  Donne : <span itemprop="recipeYield">Une tarte de 9" (8 portions)</span>
  <span itemprop="nutrition" itemscope="itemscope" itemtype="http://schema.org/NutritionInformation">
    Portion : <span itemprop="servingSize">Une tranche moyenne</span>
    Calories par portion : <span itemprop="calories">250 cal</span>
    Gras par portion : <span itemprop="fatContent">12 g</span>
  </span>
  Ingrédients :
    Tranches de <span itemprop="ingredients">pommes</span>:
    6 tasses de <span itemprop="ingredients">sucre</span>:
    3/4 tasse
  ...

  Mode d’emploi :
    <div itemprop="recipeInstructions">
      1. Couper et pellé les pommes
      2. Mélanger le sucre et la cannelle.
      ...
    </div>
</div>

Avis et notes (Reviews and ratings)

<div itemscope="itemscope" itemtype="http://schema.org/Book">
  <h2 itemprop="name"> Mon livre </h2>
  <div itemprop="description">Sur la culture.</div>
  <div itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
    <div>Évaluation :
      <span itemprop="ratingValue">88</span> de
      <span itemprop="bestRating">100</span> sur
      <span itemprop="ratingCount">20</span> avis.
    </div>
  </div>
</div>

Licence (Licensing works)

Cet exemple de la W3C ajoute une licence« Creative Commons Attribution-Share Alike 3.0 United States License » et une licence « MIT license » en simultanément.

<figure itemscope="itemscope" itemtype="http://n.whatwg.org/work">
 <img itemprop="work" src="mypond.jpeg">
 <figcaption>
  <p><cite itemprop="title">Mon œuvre</cite></p>
  <p><small>Licence sous <a itemprop="license"
  href="http://creativecommons.org/licenses/by-sa/3.0/us/">Creative
  Commons Attribution-Share Alike 3.0 United States License</a>
  and the <a itemprop="license"
  href="http://www.opensource.org/licenses/mit-license.php">MIT
  license</a>.</small>
 </figcaption>
</figure>

Médias sociaux

<span itemscope="itemscope" itemtype="http://schema.org/Organization">
  <link itemprop="url" href="http://www.exemple.com"> 
  <a itemprop="sameAs" href="http://www.facebook.com/exemple">FB</a>
  <a itemprop="sameAs" href="http://www.twitter.com/exemple">Twitter</a>
  <a itemprop="sameAs" href="http://plus.google.com/exemple">Google+</a>
  <a itemprop="sameAs" href="http://www.Instagram.com/exemple">Instagram</a>
  <a itemprop="sameAs" href="http://www.YouTube.com/exemple">YouTube</a>
  <a itemprop="sameAs" href="http://www.LinkedIn.com/exemple">LinkedIn</a>
  <a itemprop="sameAs" href="http://www.Myspace.com/exemple">Myspace</a>
</span>

Moteur de recherche

<div itemscope="itemscope" itemtype="http://schema.org/WebSite">
  <meta itemprop="url" content="http://trucsweb.com/"/>
  <form itemprop="potentialAction" itemscope="itemscope" itemtype="http://schema.org/SearchAction">
    <meta itemprop="target" content="http://trucsweb.com/recherche/?q={search_term_string}"/>
    <input itemprop="query-input" type="text" name="search_term_string" required/>
    <input type="submit"/>
  </form>
</div>

JSON

Au lieu de devoir baliser l’ensemble de votre contenu à l’aide de microdonnées, Google permet aussi de spécifier les microdonnées en format Json. Voilà quelques exemples :

<script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Organization",
      "url": "http://www.example.com",
      "logo": "http://www.example.com/images/logo.png"
    }
    </script>

<script type="application/ld+json">
{ "@context" : "http://schema.org",
  "@type" : "Organization",
  "url" : "http://www.t-mobile.com",
  "contactPoint" : [
    { "@type" : "ContactPoint",
      "telephone" : "+1-877-746-0909",
      "contactType" : "customer service",
      "contactOption" : "TollFree",
      "areaServed" : "US"
    } , {
      "@type" : "ContactPoint",
      "telephone" : "+1-505-998-3793",
      "contactType" : "customer service"
    } , {
      "@type" : "ContactPoint",
      "telephone" : "+1-877-296-1018",
      "contactType" : "customer service",
      "contactOption" : ["HearingImpairedSupported","TollFree"] ,
      "areaServed" : "US"
    } , {
      "@type" : "ContactPoint",
      "telephone" : "+1-877-453-1304",
      "contactType" : "technical support",
      "contactOption" : "TollFree",
      "areaServed" : ["US","CA"],
      "availableLanguage" : ["English","French"]
    } , {
      "@type" : "ContactPoint",
      "telephone" : "+1-877-453-1304",
      "contactType" : "bill payment",
      "contactOption" : "TollFree",
      "areaServed" : ["US","CA"]
    } ] }
</script>


<script type="application/ld+json">
{ "@context" : "http://schema.org",
  "@type" : "Organization",
  "url" : "http://www.your-company-site.com",
  "logo" : "http://www.example.com/logo.png",
  "contactPoint" : [
    { "@type" : "ContactPoint",
      "telephone" : "+1-401-555-1212",
      "contactType" : "customer service"
    } ] }
</script>


<script type="application/ld+json">
{ "@context" : "http://schema.org",
  "@type" : "Organization",
  "name" : "Your Organization Name",
  "url" : "http://www.your-site.com",
  "sameAs" : [ "http://www.facebook.com/your-profile",
    "http://www.twitter.com/yourProfile",
    "http://plus.google.com/your_profile"] 
}
</script>

<script type="application/ld+json">
{ "@context" : "http://schema.org",
  "@type" : "Person",
  "name" : "your name",
  "url" : "http://www.your-site.com",
  "sameAs" : [ "http://www.facebook.com/your-profile",
      "http://instagram.com/yourProfile",
      "http://www.linkedin.com/in/yourprofile",
      "http://plus.google.com/your_profile"] 
}
</script>

Conclusion

Risqué, bien entendu! Google est toujours libre d’agir à sa guise. Il peut fermer ce service, particulièrement si les développeurs en abusent comme c’est souvent le cas. Souvenez vous de son propre système d’évaluation qui n’a pas fait long feu! Mais c’est tellement simple et d’une puissance sans égale que c’est déjà une lacune de ne pas baliser un contenu Web avec des microdonnées. J’ai personnellement ajouté quelques schémas que Google a intégrer automatiquement en moins d’une semaine, sans même l’avoir avisé. Du jamais vu!

Vous êtes concepteur de CMS (système de gestion de contenu - SGC), au travail, pour intégrer les microdonnées du fil d’Ariane, des contacts et surtout de notation. Vous avez un site de recettes, des produits à vendre, un blog, un répertoire de film ou un agenda, si vous désirer un meilleurs positionnement, impossible de les ignorer. Vous êtes une entreprise, il vous le faut absolument. Un artiste? Protéger vos œuvres et signaler les licences et vos droits...

Note octobre 2018

Malheureusement Google est très aléatoire, toujours à la merci d’un être humain. La gestion des microdonnées reste malheureusement à la discrétion de Google et de ses gestionnaires. Le moteur ne fait rien d’automatique dans la plupart des cas. J’utilise cette technique depuis maintenant des années. Mes tests avec Google Developers - Structured Data (Testing Tool) sont toujours concluants et validés à la perfection avec tous les petits caprices spécialisés par Google. Mais sans succès, le résultat de recherche Google n’en tient pas vraiment compte. Si vous voulez améliorer la présentation de votre site Web avec Google, sortez votre porte monnaie et utilisez les services Google Map et entreprises. Mais ne venez pas me dire que Google aime la liberté et le développement « freelance » ! Personnellement j’utilise toujours les microdonnées mais pour mes propres besoins, je n’espère plus rien de Google.

Références

• Google Developers - Structured Data
• Google Developers - Structured Data (Testing Tool)
• HTML Standard - 5 Microdata
• Semantic Web
• W3C - HTML Microdata
• schema.org
• Microformats.org
• Wiki des microformats (en français)
• Data-Vocabulary.org
• Alsacreations - Microformats
• Web Hypertext Application Technology Working Group (WHATWG)
• GoodRelations Validator (hProduit)
• HTML5 Doctor : Extending HTML5 - Microdata
• Microdonnée - Wikipédia (français)
• Microformat - Wikipédia (français)
• Microformats validators
• Structured Data Linter
• Générateur : hCard Creator
• Générateur : hCalendar Creator
• Générateur : hReview Creator
• Schema Creator
• The Open Graph protocol