Nos dossiers

Rôle des microdonnées pour le référencement naturel de votre site internet

La sémantique : donnez du sens à votre contenu.

Le graphisme échappe (encore ?) aux robots

Votre page web n'est pas une simple succession de mots. Elle se compose d'articles découpés en paragraphes, titres et sous-titres, de liens de navigation parfois regroupés en menus, le tout répondant à une hiérarchie bien précise.

Vous avez certainement soigné l'ergonomie de votre site et peaufiné la mise en page de vos textes pour que vos visiteurs humains se repèrent du premier coup d'oeil. Parfait ! Mais avez-vous pensé aux robots ?

Les moteurs de recherche se servent de robots (sortes d'internautes automatisés) pour analyser vos pages. Jusqu'à très récemment, ces derniers ignoraient totalement l'aspect graphique que chaque mot aurait à l'écran. Si cela tend à évoluer, ils doivent malgré tout se baser en priorité sur d'autres indices pour "comprendre" la hiérarchie de votre page. C'est là qu'intervient la sémantique.

La sémantique html5

Dans le web, la sémantique consiste à indiquer explicitement le rôle de chaque texte au sein de votre page, et ce par différents moyens. Le choix des balises html est un bon exemple : <h1> représentera un titre, <h2> un sous-titre, <p> un paragraphe, <strong> un mot important etc... La sémantique est décorrélée du graphisme dont la responsabilité revient à un autre langage : le CSS (les styles). C'est le CSS qui définira par exemple la taille et la couleur des balises <h1> (titre).

Si les premières versions du langage html n'allaient pas très loin dans la sémantique, le html5 apporte de nouvelles balises plus riches: <nav> pour le menu de navigation, <article> pour différencier les différents textes indépendants de votre page, eux-mêmes découpés en <section>, <aside> pour les contenus annexes etc...

Mais si les moteurs savent ainsi que votre page contient un article de trois sections, ils ignorent encore qu'il s'agit d'un produit en stock vendu 99 euros.

Schema.org : les microdatas de Bing, Google et Yahoo!

Microformat, microdata, RDFa...

Puisque c'est le html qui intéresse les robots, l'idée serait donc de s'en servir pour indiquer le sens de chaque mot. On aimerait indiquer lequel correspond à un nom propre, un prénom, un code postal, un prix, une date... Il faudrait aussi définir quel ensemble d'éléments forme un produit, une personne, un évènement etc...

Différentes normes cohabitent. Certaines comme les microformats "détournent" le rôle des classes du langage html pour définir un catalogue de classes ayant chacune un sens. Par exemple, un code postal se note <span class="postal-code">75001</span>. Inconvéniant : cela peut engendrer des conflits avec les classes utilisées pour la mise en page via le CSS.

Le html5 définie une nouvelle norme : les microdata, ou microdonnées. Elle permet une gestion plus simple, puisqu'elle utilise de nouveaux attributs de balise dédiés à cet usage, comme "itemtype". Elle prévoit également l'imbrication, c'est à dire la possibilité d'indiquer qu'un élément comme une organisation peut être composée d'un titre, d'un téléphone, mais aussi de sous-élements comme une adresse postale, elle-même composée d'une rue, d'un code postal et d'une ville.

Si le html5 définit cette norme, il n'impose pas la liste des éléments sémantiques utilisables, qui restait donc à définir.

Quand Bing (Microsoft), Google et Yahoo! se serrent la main

Bien que concurrents, les principaux moteurs de recherche savent bien qu'en proposant chacun un catalogue de microdonnées concurrents, cela freinerait considérablement leur adoption. Ils se sont donc réunis pour définir une norme commune : schema.org.

Elle prévoit toute une liste d'éléments comme un évènement, une organisation, une personne, un lieu (place). Chacun peut être composés d'autres éléments, par exemple une organisation "Agence Web Conseil" peut avoir un lieu "Centre de production" à Tremblay-En-France" et un lieu "Siège social" à St-Brice-Sous-Forêt.

Certains éléments sont déclinables en éléments plus précis. Par exemple une école (school) est une organisation, elle en reprend donc les données (nom, adresse, lieu...) et en ajoute de nouveaux (élèves...).

Si l'on joue le jeu et que l'on apport de la sémantique à notre page via les microdonnées, reste à savoir quels usages vont en faire les moteurs de recherche.

La bonne idée de google : les rich snippets (extraits enrichis)

Le snippet

Le snippet, ou extrait, et le petit paragraphe qui apparaît sous le titre dans un résultat de recherche. Il dépend de la recherche et permet à l'internaute de vérifier la pertinence du résultat. Il se compose par exemple d'un extrait de phrase contenant le mot tapé, ou d'un résumé de la page.

Voir le prix d'un produit ou la note d'une recette depuis les résultats de recherche

Si la page contient des données enrichies, comme des microdonnées (présentées plus haut), les rich snippets de google peuvent en afficher certaines données dans les résultats de recherche. Le prix et la disponibilité d'un produit, le nombre d'avis et la note d'une recette, la photo et le métier d'une personne dans le cas d'un CV etc.. Vous pouvez tester les nombreux exemples de résultats de recherche fourni par google sous son outil de test des rich snippets.

L'expertise Agence Web Conseil

Quelle que soit la structure html de votre site internet, nous pouvons apporter de la sémantique à votre page en y intégrant des microdonnées. Cette opération s'effectue sans risque de "casser" son graphisme ou son fonctionnement, et permettra aux résultats google concernant vos pages de s'afficher sous forme de "rich snippet".

On peut imaginer bien d'autres usages à la sémantique et aux microdonnées, d'autant que les 3 principaux moteurs respectent la même norme.

Sur quel usage révolutionnaire seriez-vous prêt à parier ?

Jean Marie, Ingénieur chef de projet 
Agence Web Conseil
Web Agency de Paris