Microdonnées : le balisage sémantique au service du référencement

En mai 2009 nous avons pu découvrir les résultats de recherche enrichis sur Google : non seulement on nous propose des réponses pertinentes par rapport à nos mots clés, mais en plus il nous est possible de savoir d’un simple coup d’oeil si la page correspond vraiment à ce que l’on veut, sans avoir à lire la description (et de préférer un lien qui présente 5 jolies étoiles plutôt que 2)

Résultat de recherche enrichi

Dans la capture d’écran ci-dessus on voit bien qu’une multitude d’informations est affichée et on imagine bien que Google n’a pas choisi seul la photo de la recette et que, bien que très performants, les googlebots n’ont pas été disséquer le texte de la page pour en déduire le temps de préparation.

Tout ceci est indiqué à l’aide de microdonnées, c’est à dire de marqueurs que l’on place sur les balises html pour expliquer à quoi correspond ce qui s’y trouve.

separateur

Comment fonctionne le balisage sémantique ?

Dans ce billet nous allons utiliser un exemple simple : ma boutique vend une chaise bleue de marque rmg pour un prix de 149€99 (c’est vraiment une belle chaise… bleue).

Dans une structure html classique j’aurais utilisé le code suivant :

<div id="produit">
    <h1>Chaise</h1>
    <img src="chaise_bleue.jpg">
    <div id="description">C'est une jolie chaise</div>
    <div id="couleur">Colori : bleu</div>
    <div id="marque">Fabricant : rmg</div>
    <div id="prix">Prix : 149€99</div>
</div>

Mon bloc produit est structuré, si ma feuille de style css fait bien son travail, le rendu peut être sympa. Quoi qu’il en soit, toutes mes informations sont là et un humain peut comprendre que ce qui vient tout de suite après le mot « colori » va indiquer la couleur de la chaise. Mais un robot n’en n’est pas capable, c’est pourquoi je vais légèrement modifier ma structure pour l’aider à comprendre de quoi je parle :

<div itemscope itemtype="http://data-vocabulary.org/Product" id="produit">
    <h1 itemprop="name">Chaise</h1>
    <img itemprop="image" src="chaise_bleue.jpg">
    <div itemprop="description" id="description">C'est une jolie chaise</div>
    <div id="couleur">Colori : <span itemprop="color">bleu</span></div>
    <div id="marque">Fabricant : <span itemprop="brand">rmg</span></div>
    <span itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">
        <div id="prix">Prix : <meta itemprop="currency" content="EUR" /><span itemprop="price">149.99</span> €</div> 
    </span>
</div>

De cette façon chaque élément est lié à une propriété spécifique de mon type d’objet « Product » et le moteur de recherche va pouvoir connaître les caractéristiques précises de ma chaise.

L’objet product, et toutes les autres structures de microdonnées définies sont détaillées sur le site schema.org.

separateur

L’intérêt des microdonnées dans le référencement

D’une part les microdonnées vont permettre une analyse bien plus précise de votre page et un classement par catégorie plus pertinent, les pages marquées comme étant des recettes (il y a bien une structure de données disponible pour les recettes) seront favorisées sur une recherche comme « recette de tarte au pommes ».

D’autre part, c’est un réflexe humain qui vous fera choisir le deuxième lien s’il comporte une photo au lieu du premier lien qui n’en comportera pas. L’utilisation des microdonnées permet donc d’améliorer le taux de clic d’une page dont le référencement pourrait être amélioré

separateur

Et vous ? Avez-vous commencé à utiliser du balisage sémantique dans vos pages ? Avez-vous vu votre nombre de visites augmenter ? Votre taux de rebond diminuer ? Quelles sont les microdonnées que vous utilisez le plus ?

6 réponses

  1. marieK dit :

    Non moi je ne m’y suis pas mise. Trop de travail de tout changer et mon CMS n’est pas du tout adapté mais je rage quand je vois ce que je laisse passer

  2. Renaud M.G. dit :

    C’est vrai que des fois c’est l’outil qui bloque ! mais de là à ne pas pouvoir changer le contenu d’une page, c’est vraiment un mauvais CMS 😉

  3. […] ne prend que quelques secondes pour chaque article et les fiches produits se mettent à utiliser les microdonnées, les pages catégorie proposent un texte à destination des moteurs de […]

  4. […] à cette section dans laquelle nous allons intégrer des microdonnées, vous allez aider les moteurs de recherche à comprendre la structure de votre site, tout comme vos […]

  5. […] le mieux possible le contenu éditorial du site internet : optimisation de balises, utilisation de microdonnées, mise à disposition de liens de partage sur les réseaux sociaux… même s’il existe de […]

  6. […] Dans la capture d’écran ci-dessus on voit bien qu’une multitude d’informations est affichée et on imagine bien que Google n’a pas choisi seul la photo de la recette et que, bien que très performants, les googlebots n’ont pas été disséquer le texte de la page pour en déduire le temps de préparation.Tout ceci est indiqué à l’aide de microdonnées, c’est à dire de marqueurs que l’on place sur les balises html pour expliquer à quoi correspond ce qui s’y trouve.  […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *