Les microdonnées HTML5 : comment augmenter son référencement? 0

Article présenté par : Éric St-Gelais
Source et auteur: http://www.nmediasolutions.com/
Par David Malo, le 8 août 2011.
Image à la Une : Courtoisie de:  http://41mag.fr/



Premièrement, qu’est-ce qu’une microdonnée HTML5?

Vous vous dites peut-être qu’une microdonnée est une très petite donnée… Eh bien, vous avez raison (+1 à vous!) Les microdonnées servent à séparer le contenu des pages Web en plusieurs petits morceaux. Comme vous le savez peut-être déjà aussi, la nouvelle spécification HTML5 introduira plusieurs nouveaux éléments qui serviront à mieux définir la nature du contenu des pages Web. Par exemple, la balise <header> englobera les éléments d’en-tête de la page, la balise <footer>, elle, englobera les éléments de pied de page. Les balises, et bien d’autres, telles <section>, <article> et <aside> ne sont, ni plus, ni moins, que les <div> du futur portant une valeur sémantique.

Le but des métadonnées est de spécifier explicitement aux moteurs de recherche la nature du contenu pour qu’ils puissent utiliser et colliger l’information plus efficacement. Si l’on prend une page de contact avec des métadonnées, un moteur de recherche pourrait l’analyser et en déduire que : cette page concerne une compagnie, que le nom de cette compagnie est Nmédia Solutions et que l’adresse de cette compagnie est le 1047, boulevard Mercure, Drummondville. Ainsi, il sera beaucoup plus facile pour le moteur de recherche de référencer la page et d’en sortir des résultats pertinents en fonction de certains critères de recherche.

Mais… c’est génial David! Alors, comment s’y prend-on pour utiliser les métadonnées?

Eh bien, prenons l’exemple d’une page de profil personnel. En temps normal, toute l’information d’un profil personnel (nom, photo, adresse courriel, position, numéro de téléphone, etc.) est disposée dans un <div> et sous-divisée en titres et en paragraphes. Google n’y voit alors que du texte sans pouvoir distinguer la nature de chacun des contenus. Si en plus il n’y a pas de meta descriptions, Google choisira plus ou moins aléatoirement un titre et un bout de texte pour représenter votre page de profil personnel dans ses résultats. En conséquence, cela donnera un rendu de vos données plus ou moins intéressant et pertinent.

 

Résultat de recherche avant microdonnées

 

La vie serait tellement belle si nous pouvions obtenir, dès le premier coup d’œil, toutes les informations pertinentes de cette merveilleuse personne qu’est Louis-Philippe (notre super président)! Par exemple, prenons une structure de base que pourrait contenir cette page :

<article>

<h1>Louis-Philippe Baril</h1>

<h2>Président, Nmédia Solutions</h2>

<img src=’images/photoProfil.jpg’ />

<a href=’mailto:test@nmediasolutions.com’>Courriel</a>

<h3>

Adresse :

</h3>

<p>

Drummondville, Québec

</p>

<h3>

Site web :

</h3>

<p>

<a href=’http://www.nmediasolutions.com/’>Nmédia Solutions</a>

</p>

<h3>

Anecdotes :

</h3>

<p>

A joué son hockey mineur de 4 à 8 ans environ avec Steve P – on se connait donc depuis plus de 30 ans, ce qui est plus que l’âge moyen des troupes – ayoye. Meilleur boursier dans les pools de hockey de l’histoire de Nmédia (bien en avant de Ced)

</p>

</article>

Voir la page

 

Avant tout, il faut déclarer le type d’item que contiendra la zone qui nous intéresse et lui fournir une URL qui lui indiquera la définition dudit item et toutes les propriétés s’y rattachant (comme un DTD). En théorie, nous pouvons créer n’importe quel type d’item, mais il faut créer et héberger sa propre page Web de spécifications; ce qui n’est pas la meilleure solution à adopter. Pour traiter les métadonnées, Google utilise un site entièrement dédié aux items des métadonnées. Donc, vaut mieux utiliser des items déjà présents sur data-vocabulary.com.

Dans le présent exemple, la première étape est de dire à notre balise <article>, qui englobe tout notre contenu, ce qu’il y a dans l’article qui traite de cette personne.

<article itemscope itemtype=’http://data-vocabulary.org/Person’>

Ensuite, il s’agit simplement d’associer le contenu de notre article aux propriétés de cet item. Chaque propriété a un nom et une valeur. Ainsi, si le contenu d’une propriété est dans une balise standard tel un <span>, un <h1>, un <div> ou un <p>, on déclare la propriété dans la balise ouvrante et la valeur devient ce qui se retrouvera entre la balise ouvrante et la balise fermante. Dans ce cas-ci, la propriété « name » utilise la valeur « Louis-Philippe Baril ».

<h1 itemprop=’name’>Louis-Philippe Baril</h1>

Cependant, certaines balises, dont les balises autofermantes, fonctionnent différemment et cherchent leur valeur dans un des attributs de la balise. C’est le cas de plusieurs éléments tels que <meta>, <audio>, <img>, <a> et <object>. Alors, si l’on doit déclarer une propriété sur une image, on y va comme suit :

<img src=’images/photoProfil.jpg’ itemprop=’photo’/>

Il est également possible d’avoir un item dans un autre item. Dans le présent cas, nous avons un item « address » à l’intérieur de notre item « person ». Il faut donc penser à déclarer un autre « itemscope » et un autre « itemtype » à notre conteneur qui englobe nos informations d’adresse.

Petit à petit, on divise et subdivise notre contenu jusqu’à ce qu’on ait un bel article plein de métadonnées. Vous vous rappelez notre code de page observé un peu plus tôt? Et bien, le voici maintenant :

<article itemscope itemtype=’http://data-vocabulary.org/Person’>

<h1 itemprop=’name’>Louis-Philippe Baril</h1>

<h2><span itemprop=’title’>Président</span>, <span itemprop=’affiliation’>Nmédia Solutions</span></h2>

<img src=’images/photoProfil.jpg’ itemprop=’photo’ />

<a href=’mailto:test@nmediasolutions.com’ itemprop=’url’>Courriel</a>

<h3>

Adresse :

</h3>

<p itemprop=’address’ itemscope itemtype=’http://data-

– See more at: http://www.nmediasolutions.com/blogue/site-internet/microdonnees-html5/#sthash.uW1gIETL.dpuf

vocabulary.org/Address’>

<span itemprop=’locality’>Drummondville</span>, <span itemprop=’region’>Québec</span>

</p>

<h3>

Site web :

</h3>

<p>

<a href=’http://www.nmediasolutions.com/’ itemprop=’url’>Nmédia Solutions</a>

</p>

<h3>

Anecdotes :

</h3>

<p>

A joué son hockey mineur de 4 à 8 ans environ avec Steve P – on se connait donc depuis plus de 30 ans, ce qui est plus que l’âge moyen des troupes – ayoye. Meilleur boursier dans les pools de hockey de l’histoire de Nmédia (bien en avant de Ced)

</p>

</article>

Voir la page

 

Vous vous rappelez notre résultat de recherche qui ne montrait rien de vraiment intéressant par rapport à notre sujet de recherche? Et bien, voici ce qu’aurait l’air une recherche de page divisée avec des métadonnées.

 

Résultat de recherche avec microdonnées

 

On remarque l’item identifié comme « image » qui apparaît au premier plan ainsi que les informations de l’adresse et le titre du poste occupé. Si vous voulez mon avis, ce résultat est bien plus professionnel et attrayant!

Pour de plus amples informations sur les métadonnées, je vous suggère fortement de consulter ce site : diveintohtml5.org.