Publié le 1 mars 2011 par eroan dans Développement, HTML 5, Référencement | 8 commentaires »

Cela fait des mois que Google est capable de détecter dans le code html et de traiter ce que l'on appelle les breadcrumbs, encore baptisés fils d'ariane ou fils de navigation. Souvent affichés en haut des pages des sites, ces éléments de navigation permettent aux visiteurs de savoir instantanément où ils se trouvent dans l'arborescence d'un site en affichant les pages parentes.

S'ils sont utiles sur un site en lui-même, ils peuvent également être affichés dans les résultats des recherches (SERPs) pour apporter une information supplémentaire à l'internaute qui recherche un contenu. En prenant la place de l'url des pages, ils permettent d'augmenter le nombre de liens vers le site, et donc le taux de clics... Pourquoi alors ne pas tout mettre en oeuvre pour qu'ils soient correctement détectés et traités ?

Si l'algorithme de Google comprend un moteur chargé de traiter automatiquement les breadcrumbs, sachez qu'il est possible de lui forcer la main afin qu'il les prenne en compte très rapidement. Pour ce faire, nous allons aborder les microformats (ou Rich Formats), et notamment le système RDFa qui est l'un des plus utilisés actuellement. Il s'agit d'une couche qui vient de greffer sur le code html pour le rendre intelligible.

Pour aider les webmasters à mettre en place cette fonctionnalité, Google a publié une rubrique d'aide très complète. Un technicien y explique de façon simple quelles sont les propriétés prises en compte par le moteur et de quelle façon les implémenter sur une trame html existante. Nous vous invitons à consulter cette rubrique d'aide. Une fois les consignes suivies, vous devriez obtenir un code html assez proche de notre exemple ci-dessous :

<div id="breadcrumb" xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a href="http://www.site.com" rel="v:url" property="v:title">Accueil</a></span> &gt;
<span typeof="v:Breadcrumb"><a href="http://www.site.com/categorie/" rel="v:url" property="v:title">Catégorie</a></span> &gt;
<span typeof="v:Breadcrumb"><a href="http://www.site.com/categorie/contenu.html" rel="v:url" property="v:title">Contenu</a></span>
</div>

Quand le balisage est mis en place dans le code html de votre site, l'étape suivante consiste à vérifier que Google détecte bien votre fil d'ariane en RDFa. Utilisez pour cela l'outil de test des Rich Snippets. Vous devriez voir apparaître autant de lignes "Breadcrumb" qu'il y a d'éléments dans votre fil d'ariane, chacune étant accompagnée d'un title et d'une url. N'hésitez pas à tester différentes url comme votre page d'accueil, les pages de catégories et les contenus les plus profonds.

Si tout est correctement détecté et extrait par Google, vous pouvez finaliser vos travaux en soumettant vos modifications au moteur de recherche. Utilisez pour cela le formulaire de déclaration des Rich Snippets, en prenant soin de bien remplir tous les champs. Pour le data type, cochez "other" et indiquez "Breadcrumb" en dessous. Indiquez enfin que vous avez déjà mis en place le balisage et donnez 4 exemples de pages.

À partir de là, Google mettra quelques heures à prendre en compte votre fil d'ariane dans ses SERPs. Les pages nouvellement crawlées apparaîtront avec leur fil d'ariane tant que le balisage RDFa sera présent sur votre site. Du côté des inconvénients, on peut noter que vos pages ne seront plus valides au niveau du code html, le formulaire du W3C indiquant que les balises de microformats n'ont rien à faire ici... mais qu'importe !

---