Mettre en place les microdata

Flattr this!

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.

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans HTML, avec comme mot(s)-clef(s) , , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • http://damdec.fr damdec

    Salut,

    De manière plus générique, tu peux aussi appliquer le type « WebPage » au body pour éventuellement placer un itemprop= »breadcrumb » autour du fil d’ariane et itemprop= »name » sur le titre par exemple.

    Pour les blogs, il existe un type bien spécifique : BlogPosting (http://schema.org/BlogPosting), mais rien ne dit encore comment cela va être utilisé par moteurs…

    La prise en compte de toutes ces infos semble encore assez opaque… et l’outils de test proposé par Google ne permet pas encore de visualiser le résultat (seulement les données qu’il arrive à extraire). As tu des exemples de sites qui utilisent le format schema.org et qui ont obtenu un affichage plus pertinent dans les résultats de recherche Google (et Yahoo et Bing…) ?

  • http://www.mathieurobin.com/ Mathieu

    Il existe effectivement un type spécifique aux articles de blog mais on peut aller plus loin que ça. Par exemple, l’article de présentation du livre GWT 2 est plus qu’un article en lui-même. Il est aussi une présentation du livre. Mais je ne peux pas de façon générique afficher des microdata à propos d’un livre sur tous mes articles. Je dois donc travailler sur un modèle dynamique de microdata.

    Tes questions font partie pour moi d’une seconde soirée de travail sur laquelle je ferai certainement un bilan. J’ai prévu d’essayer de trouver des infos de la part de vrais experts SEO et ne pas tenir uniquement compte de mes expérimentations/observations. Ce qui ne serait de toute façon pas vraiment représentatif.

  • http://christus-web.com/ Olivier C

    Bonsoir. Bien vu l’alliance entre les microdata et les champs personnalisés sous WP. J’y pense moi aussi depuis quelque temps. Je pense que c’est une très bonne idée.

    • http://www.mathieurobin.com/ Mathieu

      Ça fait plaisir de savoir que d’autres personnes pensent que c’est une bonne idée :-)

      • http://christus-web.com/ Olivier C

        Oui. Par contre seulement pour mes prochains articles je pense : parceque… revoir tous les articles… pour ces derniers je crois que je vais effectuer une petite requête sur la base de donnée (mes auteurs sont souvent inclus dans un lien, souvent après une class « source », ça va me faciliter l’opération).

        • http://www.mathieurobin.com/ Mathieu

          Tu m’étonnes, l’horreur de tout revoir…

Articles liés