Mieux référencer son blog sur Google avec les microdonnées et les microformats (1/2)

1 Octobre 2012

En plus des balises <META> maintenant bien connue depuis les débuts du HTML, où vous renseigner différentes informations descriptives de votre blog, ) savoir titre, mots-clefs, description, auteur etc, en renseignant ces balises dans la section <HEAD> de votre page HTML, vous pouvez maintenant grace au HTML5 aller plus loin et plus précisément dans le référencement de votre blog grâce aux :

-microdonnées HTML

-et aux microformats HTML.

C'est quoi ?

Les extraits (les quelques lignes de texte qui s'affichent sous chaque résultat de recherche) sont conçus pour donner aux internautes un aperçu du contenu de la page et leur montrer la pertinence du résultat par rapport à leur requête.

Si Google interprète correctement le contenu de vos pages, nous pouvons créer des extraits enrichis, c'est-à-dire des informations détaillées visant à aider les internautes lors de recherches spécifiques. Par exemple, l'extrait enrichi d'une recette de cuisine peut contenir une photo et indiquer la durée totale de préparation ainsi que la note attribuée à la recette. L'extrait enrichi pour un restaurant peut indiquer sa note moyenne et un ordre de prix. Enfin, l'extrait enrichi d'un album musical peut contenir la liste des titres avec un lien permettant de lire chacun d'entre eux. Ces extraits enrichis aident les internautes à savoir si votre site est pertinent dans le cadre de leur recherche, et peuvent entraîner une hausse des clics sur vos pages.

Vous pouvez nous aider à mettre en valeur ces informations pertinentes en ajoutant un balisage HTML supplémentaire à vos pages. Ce balisage nous aide à reconnaître certains types de données et à les afficher de manière utile dans les extraits enrichis.

-La spécification HTML5 concernant les microdonnées est un moyen d'associer des libellés à des contenus de manière à décrire un type d'information spécifique (avis, personnes ou événements, par exemple). Chaque type d'information concerne un élément spécifique, comme une personne, un événement ou un avis. Par exemple, un événement est associé aux propriétés suivantes : adresse, heure de début, nom et catégorie.
Les microdonnées utilisent des attributs simples dans les balises HTML (souvent <span> ou <div>) pour pouvoir affecter des noms concis et descriptifs aux éléments et aux propriétés.

-Les microformats sont des conventions simples, que l'on appelle entités. Celles-ci sont utilisées pour décrire un type d'information spécifique, telle qu'un avis, un événement, un produit, une entreprise ou une personne. Chaque entité possède ses propres propriétés. Par exemple, une personne est associée aux propriétés suivantes : nom, adresse, fonction, société et adresse e-mail.
En règle générale, les microformats utilisent l'attribut class dans les balises HTML (<span> ou <div>) pour pouvoir affecter des noms concis et descriptifs aux entités et à leurs propriétés.

Grâce à ces micros-données/formats vous pourrez même espérer référencer les commentaires de vos billets/articles.

Comment cela fonctionne-t-il?

L'exemple ci-dessous au format microdonnées contient vos informations personnelles publiques définies dans l'administration>profil du blog :

 <div itemscope itemtype="http://data-vocabulary.org/Person">
  Je m'appelle <span itemprop="name">{{Blog.Owner.NickName}}</span>, 
 <figure><img src="{{Blog.Owner.Avatar|resize:60,60)|crop}}" itemprop="photo" </figure> 
  Adresse internet de mon blog : 
   <a href="http://www.example.com" itemprop="url">{{Blog.Url}}</a>.
  J'habite à 
   <span itemprop="address" itemscope 
      itemtype="http://data-vocabulary.org/Address">
    <span itemprop="locality">{{Blog.Owner.City}}</span>, 
  </span>
  et je suis <span itemprop="title">créateur</span>
  du blog <span itemprop="affiliation">{{Bog.Title}}</span>.
  </div>

Il peut parfois être intéressant de fournir des informations plus détaillées aux moteurs de recherche, même si vous ne souhaitez pas que ces informations puissent être visibles sur votre page. Par exemple, si un post/billet fait l'objet de 6 commentaires, les utilisateurs comprendront que ce billet a fait objet de débat. Les moteurs de recherche en revanche ne pourront pas le deviner. Dans ce cas, vous pouvez l'indiquer à l'aide de l'élément meta, comme suit lorsque vous affichez pour un article/billet le nombre de commentaires avec la syntaxe Twig suivante {{Post.CommentCount}} :

<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
   Nombre de commenatires : <span itemprop="value">{{Post.CommentCount}}</span>
   <meta itemprop="best" content="10" />
</div>

Dans l'exemple ci-dessus:

La balise meta sert à spécifier des informations supplémentaires non visibles sur la page Web. Dans cet exemple, il s'agit du nombre de commentaires optimal souhaité, "10". La valeur de la propriété est définie à l'aide de l'attribut content.

Les microformats :

En utilisant les microformats, nous allons ci-dessous appliquer un microformat au détail d'un article où le microformat hCard (auteur du billet) est imbriqué dans le microformat hReview (avis sur le billet).

<div class="hreview">
   <span class="item">
      <strong class="item"><span class="fn">{{Post.Title}}</span></strong>
   </span>
  <span class="reviewer vcard">
      Par <span class="fn">{{Post.Author}}</span>, <span class="title">Auteur-Contributeur</span>
      pour <span class="org">{{Blog.Title}}</span>
   </span>
  Nombre de Commentaires : <span class="rating">{{Post.CommentCount}}
  <meta itemprop="best" content="10" />
  </span>
   <span class="description"><span class="value-title" title="{{Blog.Snippet}}" /></span>
</div>

Voila un petit tour d'horizon, je fournirais un thème simplifié exemple avec ces microdonnées et microformats en utilisant le schema CreativeWork>Blog de :

http://www.schema.org.