Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

HTML

Optimisation pour les moteurs de recherche (SEO)

RDFFav

SEO - Microformats et microdonnées

Marginalisé, le web sémantique a depuis toujours imaginé un vocabulaire et instauré des formats, c’était avant Google!microformats, microdata, microdonnée, sémantique, structured data

Microformat μF - Un amalgame de format
Schéma LOD 2014 (linked open data)
Schéma LOD 2014 (Linking Open Data cloud diagram 2014, par Max Schmachtenberg, Christian Bizer, Anja Jentzsch and Richard Cyganiak.)

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
Attribut rel

Un instant, on n’a pas attendu le HTML5 pour utiliser l’attribut rel maintenant considéré comme microdonnée. Utiliser pour décrire une relation vers tout type de document, de la feuille de style à la traduction anglaise... Pourvu qu’il soit l’attribut d’un hyperlien, c’est-à-dire d’une balise <a> <link> et <area>.

Pour des informations supplémentaires sur auteurs notamment ou simplement pour renseigner sur la navigation : page « canonique », suivante, précédente, un type de lien externe, ou une page d’aide (auteur, external, help, next/preu, nofollow) etc. Ou encore pris en charge par le navigateur comme norefer qui lui indique de ne pas transmettre le « référer » dans les en-têtes HTTP si l’utilisateur suit le lien. Même Google les utilise déjà, nofollow qui, loin de signaler que « l’auteur original ou de l’éditeur du document en cours ne cautionne pas le document de référence » est une façon des plus simples d’indiquer à GoogleBot de poursuivre le référencement de la page sans faire de détour sur le lien en question!

Cette méthode est probablement ce qui a motivé le WHATWG à intégrer les 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é
Microformat

À 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»
Source Microformats.org

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...

Google L’obligation Google

Mais voilà, si la plupart de ses initiatives (ce méandre de formats, de conventions, de normes et de standard) ont longtemps été marginales voire ignorées, Google a décidé de s’en préoccuper et pas à peu près! Ce qui donne une toute nouvelle lecture du potentiel, je disais de l’obligation du webmestre de les utiliser. Ce qui était autrefois un rêve, une obsession de programmeur est devenue un outil simple des plus puissants du marketing Web, oui le monde du SEO, woooow! Lui (Google), qui a flirté avec plusieurs formats, voilà qu’il se branche. Dorénavant la machine n’est pas qu’une machine, elle est GoogleBot ;-)

Enfin pas tous, Google à évidemment ses préférences et ses caprices. Mais s’il faille toujours s’inscrire à son répertoire d’entreprise pour mousser son résultat avec coordonnées et carte Google, c’est les microdonnées qui se chargent d’afficher les dates d’un spectacle, les ingrédients d’une recette, de la simple date d’un article à la cote d’un site Web. Avouez que ça fesse!

Résultat riche Google Résultat riche Google (trucsweb)

Exemple de fil d’Ariane, de date de publication, de notation spécifiés par microdonnées HTML5.

Ça devient sérieux, on ne peut pas enlever à Google son pouvoir de séduction. Ce tutoriel traitera en premier lieu des microdonnées pratiques et courantes que Google supporte! Que dire de plus, merci à Google. Mais retenez bien que les microformats et la microdonnée son plutôt frivole et s’adonnent volontiers à d’autre usages pour des mariages des plus intéressants. Que ce soi la récupération naturelle des vieux formats comme le fidèle vCard ou le vCalendar, naturellement transposable en hCard et en hCalendar. Tout ça pour dire combien les microdonnées est plutôt organique et aussi vivant qu’une langue. Alors le but de ce tutoriel est de revisiter vos pages Web pour les rendre encore plus attrayantes et même parlantes pour Googleboot.

Boîte à outils

GoogleDocumentation officiel de Google, et son validateur des plus pratique. Tout ce qu’il faut pour optimiser au maximum votre positionnement et surtout votre résultat affiché par Google.


Générateur de microdonnées


Nous voilà bien outillé pour revisiter notre bonne vielle page HTML. Pour les puristes, on a ici trois références :


Bon l’enthousiasme laisse place à la frustration. Autant le «Reviews and ratings» efficace. Autant l’ensemble de mes tentatives, sur plusieurs agendas professionnels et officiels, ont toutes é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.


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 :

Format de mocroformat

  • 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
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

  • Bonjour, je vous signale deux erreurs d'url : dans le texte : "Générateur de microdonnées Générateur : hCard Creator Générateur : hCalendar Creator" Les url sont erronées, voici les url correctes : http://microformats.org/code/hcalendar/creator.html http://microformats.org/code/hcalendar/creator.html bonne journée Pat Trishia de https://homelaine.fr
    64x64
    Pat Trishia
    https://homelaine.fr
    Date (GMT) : 2017-06-26 14:14:31 (UTC +0000)
    • Merci beaucoup Pat, Je vais faire la correction. Ceci dit, c'est la preuve que même les spécialistes sont parfois incompétents. À quoi bon les microdonnées si l'on ne respecte pas les notions de base, comme NE JAMAIS CHANGER les adresses (URL). Tout au moins, ajoutez une redirection. Par ailleurs, un petit conseil pour ceux qui désirent améliorer le positionnement de leur site Web! Évitez les noms de page comme « creator.html ». Utilisez plutôt les pages par défaut « index.html » par exemple. De cette façon, on évite les changements d'adresse au moindre changement technologique. À mon avis, ces hyperliens changeront à nouveau et nous n'aurions peut-être pas la chance d'être informés par Pat!
      64x64
      oznog
      http://www.trucsweb.com
      Date (GMT) : 2017-06-26 15:34:9 (UTC +0000)


    • Super Post ! Pour ma Part en tant qu'SEO, la Microdonnée est une aubaine de contextualisation et de structuration des contenus, notamment pour Google et peut aussi influer sur le taux de clic avec une modification de l'affichage dans les SERPs. Perso, j'utilise que du JSON-LD car effectivement c'est beaucoup plus simple que d'aller marquer toutes les données présentes dans l'html. En plus on peut facilement ajouter des champs n'étant pas présent dans la pages (un peu suropti mais bon). Merci encore... pour cette participation à un web plus sain
      64x64
      Consultant SEO | Théo Ordinas
      https://theophile-ordinas.fr/
      Date (GMT) : 2018-10-26 15:14:28 (UTC +0000)
      Date local : Fri Oct 26 2018 17:21:10 GMT+0200 (heure d’été d’E
      • Salut et merci, Je ne sais pas ce que veut dire « suropti » (trop d'optimisme??) à part son caractère visiblement péjoratif! Mais j'aimerais ajouter qu'ironiquement 15 % des sites Web utilisent les microdonnées alors qu'on est complètement submergé par l'offre SEO depuis un quart de siècle ;- )) Enfin, on pourrait en débattre longtemps, c'est un vieux débat. Je laisse au lecteur la discrétion de choisir. Tout dépend du besoin quant à moi. Un SEO qui n'a pas le contrôle sur l'automatisation des pages doit bien entendu se contenter du JSON-LD. Mais un programmeur n'a pas à attendre après WordPress peut aisément intégrer et automatiser les microdonnées directement dans la page et bénéficier de la structure HTML sans avoir à redéfinir le contenu dans un JSON-LD. Et surtout sans même avoir à y penser, c'est automatique... Personnellement, j'utilise les deux. J'utilise beaucoup le format Json, j'ai même plusieurs tutoriels sur le sujet. Les microdonnées pour « définir le site Web » sont dans un JSON-LD, dans mon fichier « pied de page » parce que le contexte s'y prête mieux. Mais celles d'un évènement, d'un article, d'un produit, généralement renseigné par un édimestre sont directement dans le HTML, avec les attributs HTML5 (itemscope). Vous dites avec justesse « structuration des contenus ». Le HTML est structuré, mais pas le JSON-LD. Un JSON-LD reste en principe un doublon, une représentation du contenu sans aucune structure que la base du Json, c'est-à-dire une arborescence. Si le titre est identifié, c'est en raison de la sémantique et non pas de la structure contrairement au HTML qui ajoute à la sémantique sa propre structure des plus explicites. Le mal aimé et compliqué XML ou le HTML sont des langages entièrement structurés. C'est leur grande beauté ! Ne leur enlevez pas cet avantage s.v.p. ; -) D'ailleurs, quand on travail en séparant le contenu (XML) du style (CSS) et de la structure (HTML) le question ne se pose même pas. Ciao
        64x64
        oznog
        http://www.trucsweb.com
        Date (GMT) : 2018-10-26 16:08:27 (UTC +0000)
        Date local : Fri Oct 26 2018 12:15:10 GMT-0400


      • Tout à fait d'accord sur le coté structuration ! En SEO je distingue bien 2 type de MD : celles liées à la structure de ma pages ou site : WebPage, Website, Breadcrumb, MainContentofPages, et celles de contexte. N'étant pas développeur, j'ai effectivement du mal à automatiser la choses via mes templates html. "sur optimisation SEO" car oui j'ai tendance à dévier tu contenus actuel des pages grâce au JSON-LD afin d'ajouter du contenu uniquement visible aux moteurs... Merci pour ce retour... Structurant
        64x64
        Théo

        Date (GMT) : 2018-10-26 19:39:37 (UTC +0000)
        Date local : Fri Oct 26 2018 21:46:24 GMT+0200 (heure d’été d’E

        10/10 sur 2 revues.
               Visites : 19275 - Pages vues : 20166
        X

        Trucsweb.com Connexion

        X

        Trucsweb.com Mot de passe perdu

        X

        Trucsweb.com Conditions générales

        Conditions

        Responsabilité

        La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

        Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

        Droit applicable et juridiction compétente

        Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

        X

        Trucsweb.com Trucsweb

        X

        Trucsweb.com Glossaire

        X

        Trucsweb.com Trucsweb

        X

        Trucsweb.com Trucsweb

        Conditions

        Aucun message!

        Merci.

        X
        Aucun message!
        X

        Trucsweb.com Créer un compte