Du particulier au général (des microdonnées à la structure)

Microdonnées

Jusqu'à présent la date d'un article, s'écrivait ainsi en HTML :

  • <span>la date</span>

Span est une balise générique utilisée pour tout et n'importe quoi. Oui, la date est bien affichée sur votre page au format voulu mais n'est pas bien lue par les robots des moteurs de recherche.

En HTML5, on passe à :

  • <time datetime="date format iso" itemprop="datePublished">date format défini</time>

Ici, on donne beaucoup plus d'infos. Google, Yahoo et Bing, les principaux moteurs de recherche se sont entendus sur des normes d'écriture.

  • La balise <time> indique qu'on va écrire une date

  • datetime permet de donner la date complète : ex : "2013-01-21T12:19:43+01:00"

  • Itemprop indique avec datePublished que l'on écrit la date de publication

  • Et on affiche la date au format voulu, pour les visiteurs : ex : 21.01.2013

De même, le titre ou le nom de l'auteur peuvent être clairement identifiés avec de nouveaux attributs :

  • <h1 itemprop="name">le titre</h1>
  • <time datetime="date format iso" itemprop="datePublished">date format défini</time>
  • <span itemprop="author">auteur</span>

Il s'agit de microdonnées, de plus en plus utilisées avec HTML5, qui commencent à remplacer d'autres formats ( du type microformats et RDFA). Google les recommande 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." Pour les blogs présentant des produits ou des recettes, ils sont incontournables.

Structure

Toutes ces infos pourraient être englobées comme avant dans un bloc div. Si vous regardez le code source d'une page avant HTML5, vous y trouverez un paquet de div qui sont avant tout utilisés pour des questions de style. HTML permet de donner plus de sens en utilisant des balises qui en ont, contrairement à div.

Ainsi, pour les informations d'un article, on utilise l'en-tête header

  • <header class = "post-title">
  • <h2 itemprop="name">le titre</h2>
  • <time datetime="date format iso" itemprop="datePublished">date format défini</time>
  • <span itemprop="author">auteur</span>
  • </header>

De même, un article est délimité avec une balise... "article" qui comprend donc un en-tête (header) et aussi un pied de page (footer). Ce qui est vrai pour un article est vrai pour le blog en entier : dès que c'est possible on utilise des balises qui ont une valeur sémantique.

Exemple de structure HTML5

Exemple de structure HTML5

Ce qui change pour vous

Vous devez tout de même bien choisir votre thème car certains ne sont pas en HTML5.

Si vous développez des thèmes, il va falloir vous poser des questions si vous n'utilisez que des balises div. La transition n'étant pas facile. Mais tout le monde y passera !

Si cela vous intéresse, je vous recommande quelques sites :

Pour tester si votre site contient des "données structurelles", Google a mis en place un outil de test simple : http://www.google.com/webmasters/tools/richsnippets

Voir aussi le site du zéro :