Jusqu’à peu, j’avais un souci dans Google+ avec les liens vers les articles de mon blog. La description détectée automatiquement par google était complètement pourrie : il détectait le contenu du menu à la place du contenu des articles !

J’ai tenté d’utiliser un balisage HTML5 plus sémantique dans le code source de mon blog. J’ai utilisé notamment la balise article pour délimiter le contenu des articles, la balise nav pour le menu supérieur et aside pour la colonne de droite.

La balise article permet de délimiter les différents articles de la page, c’est à dire le vrai contenu, pour le différencier d’éléments de navigations (délimités par nav) ou d’autres éléments se rapportant au site (balise aside). Je pensais que ça suffirait, mais il semble que google se fiche complètement de cette sémantique.

Finalement, j’ai trouvé comment arriver à mes fins avec les microformats documentés sur le site de www.schema.org. Ça donne un code qui ressemble au suivant.

<article itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">
    <a itemprop="url" href="article.htm">Titre de l'article</a>
  </h1>
  <div itemprop="description">
    <p>Contenu ou résumé de l'article ici</p>
    <p>...</p>
  </div>
</article>

Ce qu’il faut retenir:

• La balise HTML qui contient un élément complet doit être identifiée par l’attribut itemscope
• Le type de contenu doit être identifié avec l’attribut itemtype dont la valeur est une url décrivant le type. La liste des types peut être trouvée sur le site schema.org.
• Le titre de l’article doit être identifié avec l’attribut itemprop="name"
• Le contenu de l’article doit être identifié avec l’attribut itemprop="description"

Il semble que cet ensemble constitue le minimum vital pour avoir des microdonnées correctes, et interprétées par google plus.

Démonstration en images.

Description détectée par google plus

Puis après avoir ajouté l’image et l’attribut itemprop="image" (sans cette image, il n’utilisait pas le logo google+ comme description, même avec le bon attribut, je ne sais pas pourquoi).

Description et image détectées dans google plus