MathieuRobin.com

Je me suis posé la question hier d'intégrer les microdata dans les pages de ce blog. Voilà ce qu'il en résulte après une première soirée de travail.

Les microdata, c'est quoi ?

Effectivement, mieux vaut commencer par ça. Les microdata, c'est une sorte de format de données imaginé par l'alliance de Google, Yahoo et Microsoft. Il y a encore peu, les 3 acteurs majeurs de la recherche sur internet avaient chacun leur jeu de balises/attributs pour mieux assimiler le contenu d'une page. Rapidement, cela s'est révélé être un joyeux bordel sans nom et ils ont décidé de travailler sur un format unique pour simplifier le travail à tout le monde.

Du coup, avec les microdata, vous pouvez clairement donner le nom d'une personne pour qu'il soit plus facilement retrouvé par les moteurs de recherche. Ou encore l'ISBN d'un livre.

En gros, cela permet de pré-mâcher le travail d'indexation des moteurs en leur fournissant des données claires et identifiables.

Vous pouvez trouver un inventaire détaillé de tout ce qu'il y a savoir ici.

Un exemple ?

Je vais me resservir de mon exemple du livre, exemple que je connais bien parce que c'est surtout sur ce modèle que j'ai bossé hier soir. Voilà un code HTML correct d'un point de vue microdata pour définir le livre sur GWT 2 que je vous présentais il y a peu :

<div itemscope="" itemtype="http://schema.org/Book">
    <meta itemprop="url" content="http://www.amazon.fr/gp/product/2212125690/ref=as_li_ss_tl?ie=UTF8&amp;tag=mathieurcom-21&amp;linkCode=as2&amp;camp=1642&amp;creative=19458&amp;creativeASIN=2212125690" />
    <meta itemprop="name" content="Programmation GWT 2 - Développer des applications RIA et Ajax avec GWT" />
    <div itemprop="author" itemscope="" itemtype="http://schema.org/Person">
        <meta itemprop="name" content="Sami Jaber" />
    </div>
    <div itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization"><meta itemprop="name" content="Eyrolles">
        <meta itemprop="datePublished" content="2010-01-05"></div><meta itemprop="isbn" content="978-2212125696" />
    </div>
    <meta itemprop="isbn" content="978-2212125696" />
</div>

Et le résultat ?

Google suggère sur son site que les microdata (rich snippets dans leur vocabulaire) améliore la qualité de l'indexation de la page ciblée.

Voir ici.

Puis je tester ce que voit vraiment les moteurs de Google ?

Bien sûr ! Google a mis à dispo un outil "Rich Snippets Testing Tool" qui permet de tester ce que ses robots voient sur vos pages. Et donc de voir ce que les microdata apportent comme informations. Par exemple, le code suggéré ci-dessus ajoute ceci :

Item
<div><strong>Type:</strong> http://schema.org/Book
url = http://www.amazon.fr/gp/product/2212125690/ref=as_li_ss_tl?ie=UTF8&amp;tag=mathieurcom-21&amp;linkCode=as2&amp;camp=1642&amp;creative=19458&amp;creativeASIN=2212125690
name = Programmation GWT 2 - Développer des applications RIA et Ajax avec GWT
author = <em>Item</em>( 1 )
publisher = <em>Item</em>( 2 )
isbn = 978-2212125696</div>
<span style="font-size: 15px; line-height: 22px;">Item 1</span>
<div>
<div><strong>Type:</strong> http://schema.org/Person
name = Sami Jaber</div>
<span style="font-size: 15px; line-height: 22px;">Item 2</span></div>
<div>
<div><strong>Type:</strong> http://schema.org/Organization
name = Eyrolles
datepublished = 2010-01-05</div>
</div>

Je trouve ça plutôt pas mal, non ? Reste à voir si cela a réellement un impact de fou sur l'indexation des pages.

Mettre en place sur wordpress

J'avoue que j'en ai un peu marre des exetnsions WordPress. Soit pas à jour, soit ralentissant tellement le chargement des pages que je peux voir ma barbe pousser, soit ne faisant pas exactement pas ce que j'attends d'elles. Voire carrément les 3.

Donc j'ai utilisé la bonne vieille méthode du DIY - Do It Yourself et j'ai modifié mes templates de blog. J'ai donc introduit tout un tas de valeurs via les champs personnalisés dans les articles pour lesquels j'ai eu le temps de le faire.

Par exemple, pour un bouquin, j'utilise comme clé de démarrage l'ISBN et après je construis le bloc HTML vu précédemment en fonction des champs. Voici un exemple de code (un peu franchement sale) pour les livres :

<?php
$meta_values = get_post_custom();
if(isset($meta_values['isbn'])) {
	echo '<div itemscope itemtype="http://schema.org/Book"><meta itemprop="url" content="'.$meta_values['url'][0].'" /><meta itemprop="name" content="'.$meta_values['title'][0].'" /><div itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="'.$meta_values['author'][0].'" /></div><div itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="'.$meta_values['publisher'][0].'" /><meta itemprop="datePublished" content="'.$meta_values['datePublished'][0].'" /></div><meta itemprop="isbn" content="'.$meta_values['isbn'][0].'" /></div>';
}
?>

Dans cet exemple, j'utilise la liste de champs personnalisés suivants, tous non-optionnels pour me simplifier la vie :

• isbn
• author
• datePublished
• publisher
• title
• url

A vous d'imaginer désormais comment faire en sorte que chacun de vos articles puisse avoir un bloc de microdata pour être mieux indexé lui aussi.