Schema.org — Microdata pour Google, Bing et Yahoo!

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Schema.org — Microdata pour Google, Bing et Yahoo!

Schema.org propose un ensemble de micro-données hiérarchisé destiné à donner du sens au marquage HTML qui structure les pages web. Ce système complet de microdatas est comparable à RDFa, à ceci près qu’il est proposé conjointement par Google, Bing et Yahoo! pour enrichir les résultats de leurs moteurs de recherche respectifs.

Pour vous faire une idée de la richesse de ce vocabulaire commun, il suffit de jeter un oeil sur l’ensemble de la hiérarchie disponible sur la page The Type Hierarchy. On le voit, ce vocabulaire a l’ambition de taguer l’ensemble de la production culturelle humaine, et plus à venir.

Thing

Au sommet de cette hiérarchie de micro-données, on trouve la «chose».Thing est décomposée en:

  • CreativeWork,
  • Event,
  • Intangible,
  • Organization,
  • Person,
  • Place,
  • Product.

CreativeWork

Chaque élément est lui-même structuré en sous-ensemble. Pour CreativeWork, nous avons par exemple :

  • Article,
  • Blog,
  • Book,
  • ItemList,
  • Map,
  • MediaObject,
  • Movie,
  • MusicPlaylist,
  • MusicRecording,
  • Painting,
  • Photograph,
  • Recipe,
  • Review,
  • Sculpture,
  • TVEpisode,
  • TVSeason,
  • TVSerie,
  • WebPage,
  • WebPageElement.

WebPageElement

Parmi les éléments qui permettent d’ajouter du sens aux balises HTML pour préciser leur portée. Par exemple, WebPageElement se subdivise en :

  • SiteNavigationElement,
  • Table,
  • WPAdBlock,
  • WPFooter,
  • WPHeader,
  • WPSideBar.

Exemple d’utilisation du schema « Movie »

J’ai repris un exemple de la documentation de schema.org en prenant la liberté de modifier le balisage HTML initialement proposé pour ajouter un peu plus de sémantique via une liste de définition. Un peu dans l’esprit de ce que j’avais fait pour le microformat hCard, souvent expliqué avec des exemples de marquage HTML un peu «léger».

<dl>
    <dt>Avatar</dt>
     <dd>Director: James Cameron (born August 16, 1954)</dd>
     <dd>Science fiction</dd>
     <dd><a href="../movies/avatar-theatrical-trailer.html">Trailer</a></dd>
</dl>
Fig. 1 : exemple de fiche pour le film Avatar sans les microdatas.
<dl itemscope itemtype ="http://schema.org/Movie">
    <dt itemprop="name">Avatar</dt>
    <dd>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</dd>
    <dd itemprop="genre">Science fiction</dd>
    <dd><a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a></dd>
</dl>
Fig. 2 : même marquage qu’au-dessus avec les microdata issues de «Movie».

RDFa c’est fini ?

D’après Google, les site utilisant RDFa continueront à être valorisés en tant que Rich Snippets mais il ne dit pas pendant combien de temps…

Enfin une solution stable et pérenne pour enrichir nos données ?

Je suis un farouche supporter des microformats, mais j’ai toujours gardé également à l’esprit qu’il ne s’agissait globalement que d’un exercice de style. Je n’ai jamais pu observer un quelconque impact dans le fait de mettre des classes microformatées dans mes balises. Avec les schémas proposés par Google Bing et Yahoo! nous aurons peut-être plus de chances de voir nos efforts enfin récompensés. A tester et à voir.

→ Consulter HTML Microdata du W3C

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



6 commentaires pour “Schema.org — Microdata pour Google, Bing et Yahoo!”

  1. Ouik dit :

    Si j’ai bien compris, c’est basé sur des specifications en working draft du W3C : http://dev.w3.org/html5/md/Overview.html ça semble donc être un format promis à un bel avenir. Ya plus qu’à.

    Juste une chose : les possibliités me semblent tellement nombreuses que ça risque d’alourdir beaucoup et le code html de la page et le travail de l’éditeur / rédacteur / autre, non ?

    • br1o dit :

      Merci pour le lien, j’avais zappé le working draft du W3C. Je le mettrai dans le billet. 

      Pour ce qui est d’alourdir les pages, ça dépend de pas mal de choses. Par exemple, je ne suis pas sûr que tous les sites et les blogs ont quelque chose à gagner avec les micro-données WebPage, par exemple, mais dans certains cas, si des contenus différents sont amenés à partager le même espace, ça vaut le coup de les différencier à l’aide de ces micro-données.

      • Ouik dit :

        tout dépendrait du contexte donc. A suivre.

        • br1o dit :

          je pense qu’il faut raisonner en terme de template. Par exemple, dans un site web léger à base de WordPress avec la mise en avant de quelques produits à vendre, ça vaut le coup d’utiliser « Product » dans une éventuelle catégorie Boutique, pour faire la différence avec les autres type de billets. Enfin, je dis ça, je dis rien ;)

  2. J’avoue que l’idée même des micro-formats est intéressante, mais je suis un peu perdu… quid de l’utilité (bénéfices) et la « déployabilité » de ces nouvelles possibilités ?

    Y a-t-il un état des lieux qui permet de savoir ce qu’on peut déjà utiliser ?

  3. 1truc dit :

    Ce que je n’arrive pas à saisir c’est la compatibilité avec le CSS. Si on veut que le div itemscope soit désigné de telle ou telle façon, on continue à mettre class ?

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site