Outils pour les webmasters

<div>
   <img src="www.example.com/pierredumoulin.jpg" />
   
   <strong>Pierre Dumoulin</strong>
   
   Ingénieur chez Tartampion
   
   12 rue des plantes
   
   Villeperdue, XY 12345

</div>

Vous trouverez ci-dessous le même contenu HTML balisé à l'aide du microformat hCard (personne).

<div class="vcard">
   <img class="photo" src="www.example.com/pierredumoulin.jpg" />
   
   <strong class="fn">Pierre Dumoulin</strong>
   
   <span class="title">Ingénieur</span> chez <span class="org">Tartampion</span>
   
   <span class="adr">
      <span class="street-address">12 rue des plantes</span>
      
      <span class="locality">Villeperdue</span>, <span class="region">XY</span>
      
      <span class="postal-code">12345</span>
   
   </span>
</div> 

Description de l'exemple

• Sur la première ligne, class="vcard" indique que le code HTML inclus dans la balise <div> décrit une personne. Le microformat utilisé pour décrire une personne est nommé hCard. Le code HTML correspondant est vcard. Il ne s'agit pas d'une erreur.
• L'exemple décrit les propriétés de la personne (photo, nom, fonction, entreprise et adresse). Pour associer des libellés aux propriétés relatives à la personne décrite par vcard, chaque élément contenant l'une de ces propriétés, telles que <span>, <img>, ou <title>) comporte un attribut class indiquant une propriété. Par exemple, fn décrit le nom d'une personne et title sa fonction. L'article d'aide correspondant à chaque type d'information inclut la liste complète des propriétés reconnues.
• Les propriétés peuvent contenir d'autres propriétés. Dans l'exemple ci-dessus, la propriété adr décrit l'adresse de la personne et inclut les sous-propriétés suivantes : street-address, locality, region et postal-code.

Microformats imbriqués

Il arrive souvent qu'un microformat (un avis, par exemple) en contienne un autre (les coordonnées de l'auteur de l'avis, par exemple). L'exemple ci-dessous contient des informations sur la fonction et l'employeur de Pierre Dumoulin.

<div>
   <strong>Blast 'Em Up - Avis sur le jeu</strong>
   
   Par Pierre Dumoulin, Ingénieur chez Tartampion
   
   Note : 4,5 sur 5
   
   Ce jeu est génial.  Je l'ai adoré du début à la fin,
   notamment la bataille avec les méchants aliens.
</div>

Vous trouverez ci-dessous un exemple de code HTML balisé à l'aide des microformats hReview (avis) et hCard (personne). Pour représenter les informations concernant Pierre, l'auteur de l'avis, le microformat hCard (Person) est imbriqué dans le microformat hReview (avis).

<div class="hreview">
   <span class="item">
      
      <strong class="item"><span class="fn">Blast 'Em Up</span> - Avis sur le jeu</strong>
   
   </span>
   <span class="reviewer vcard">
      
      Par <span class="fn">Pierre Dumoulin</span>, <span class="title">Ingénieur</span>
      
      chez <span class="org">Tartampion</span>
   
   </span>
   Note : <span class="rating">4,5</span> sur 5
   
   <span class="description">Ce jeu est génial.  Je l'ai adoré du début à la fin,
   notamment la bataille avec les méchants aliens.
</div>

Description de l'exemple

• Les avis sont décrits par le microformat hReview, représenté par : class="hreview". Dans la mesure où il s'agit d'un avis, tout le bloc HTML est inclus dans la propriété div avec l'attribut class="hreview".
• Pour identifier l'auteur de l'avis, vous pouvez utiliser span class="reviewer". Toutefois, dans ce cas, nous souhaitons ajouter des informations supplémentaires à l'aide du microformat vcard (personne). Pour ce faire, il vous suffit d'ajouter reviewer et vcard sur la même ligne, en les séparant par un espace comme suit : <span class="reviewer vcard">. Les propriétés vcard, fn, title et org décrivent le nom de Pierre, sa fonction, et l'entreprise pour laquelle il travaille.

Pour obtenir davantage d'exemples, consultez l'article Éléments imbriqués.

Contenu masqué

En règle générale, le contenu masqué n'est pas affiché dans les pages Google. En d'autres termes, n'essayez pas d'afficher du contenu pour les visiteurs de cette manière. Utilisez plutôt le texte masqué pour baliser des informations séparément à l'attention des moteurs de recherche et des applications Web. Nous vous conseillons de baliser le texte qui est effectivement visible par vos visiteurs lorsqu'ils consultent vos pages Web.

Toutefois, il peut parfois être intéressant de fournir des informations plus détaillées aux moteurs de recherche, même si vous ne souhaitez pas que ces informations puissent être visibles sur votre page. Par exemple, si vous indiquez la latitude et la longitude d'un lieu, vous permettez à Google de le situer correctement sur le plan. De même, si vous fournissez la date d'un événement au format de date ISO vous permettez à Google d'afficher ces données sans erreur dans les résultats de recherche. Dans ce cas, vous pouvez utiliser les microformats value class pattern. Considérez l'exemple suivant :

<span class="dtstart">
   <span class="value-title" title="2009-10-15T19:00-08:00" />

15 octobre, 19 h

</span>

Si vous ajoutez <span class="value-title" title="2009-10-15T19:00-08:00" /> dans le bloc libellé class="dtstart", vous indiquez que l'analyseur d'extraits enrichis doit utiliser la valeur dans l'attribut title pour obtenir la date de début de l'événement. La date contenue dans l'attribut title peut être représentée au format de date ISO sans que cela n'affecte la manière dont elle apparaît sur vos pages Web.

Pour consulter le vocabulaire et des exemples spécifiques, reportez-vous aux articles suivants :

• Avis
• Personnes
• Produits
• Établissements et entreprises
• Recettes
• Événements
• Vidéos (Bien que Google accepte le balisage des vidéos, nous l'utilisons actuellement dans le seul but d'optimiser nos résultats de recherche de vidéos.)

Pour vérifier votre balisage, utilisez l'outil de test des données structurées.