google-rich-snippets-examples-fr

Jump to: navigation, search

Contents

intro

Le 2009-05-12, Google a lancé une fonctionnalité "rich snippets" dans son moteur de recherche qui affiche une information supplémentaire dans ses résultats de recherche basée sur l'information indexée provenant de hCard, hReview, hReview aggregate et hProduct. Faisant partie de ce lancement, Google a documenté son support avec des exemples de marquage de microformats. Cette page documente ces exemples avec des corrections et points d'amélioration (dans l'espoir que Google incorporera les corrections).

Avis

Exemple Avis Microformat

Google exemple avis le 2009-05-12

Exemple Google du 2009-05-12 extrait de http://google.com/support/webmasters/bin/answer.py?answer=146645

<div class="hReview">
   <span class="item">
     <span class="fn">L'Amourita Pizza</span>
   </span>
   <span class="rating">3.5</span>
   <span class="reviewer">Ulysses Grant</div>
   <span class="dtreviewed">2009-01-06</span>
   <span class="summary">"Delicious, tasty pizza in Eastlake."</span>
</div>

exemple avis corrigé

<div class="hreview">
   <span class="item">
     <span class="fn">L'Amourita Pizza</span>
   </span>
   <span class="rating">3.5</span>
   <span class="reviewer">Ulysses Grant</span>
   <span class="dtreviewed">2009-01-06</span>
   <span class="summary">"Delicious, tasty pizza in Eastlake."</span>
</div>

Erreurs communes nettoyées :

plus d'information sur l'exemple d'avis

Cet exemple démontre les fonctionnalités supplémentaires de hReview avec hCard qui fournit les mêmes fonctionnalités et caractéristiques que le second exemple RDFa, avec de la donnée visible (par ex. propriété category, un hyperlien pour le critique) plutôt que de la métadonnée invisible (attribut 'typeof', attribut 'about').


<span class="hreview">
   <span class="item vcard">
      <span class="fn org">Komala Vilas</span>
      (<span class="category">Restaurant</span>)
   </span>
   <span class="reviewer vcard">
      <a class="fn url" href="http://example.com/person/meenakshi_ammal"> 
        Meenakshi Ammal
      </a>
   </span>
   <span class="rating">3.7</span>
   <span class="dtreviewed">2005-04-01</span>
   <span class="summary">Best south Indian vegetarian food in the bay area</span>
</span>

Exemple d'avis agrégé

Google exemple d'avis 2008-05-12

Exemple Google le 2008-05-12 extrait de http://google.com/support/webmasters/bin/answer.py?answer=146645

<div class="hReview-aggregate">
   <div class="item">
      <span class="fn">L'Amourita Pizza</span>
   </div>
   <div class="rating">
      <span class="average">4.4</span>
   </div> 
   <span class="count">1,313</span>
</div>

exemple d'avis agrégé corrigé

<div class="hreview-aggregate">
   <div class="item">
      <span class="fn">L'Amourita Pizza</span>
   </div>
   <div class="rating">
      <span class="average">4.4</span>
   </div> 
   <span class="count">1313</span>
</div>

Erreurs communes remarquées :

Personnes

Personnes Exemple Microformat XFN

Google exemple de personne le 2008-05-12

Google exemple le 2008-05-12 extrait de http://google.com/support/webmasters/bin/answer.py?answer=146646

<div class="vcard">
   <div class="fn">John Smith</div>
   <span class="nickname">Smithy</span>
   <span class="url">http://www.example.com</span>
   <span class="org">ACME</span>
   <span class="adr">
     <span class="locality">Albuquerque</span>
   </span>
   <span class="title">Engineer</span>
   <a href="http://darryl-blog.example.com/" rel="friend">Darryl</a>
</div>
Note : Nous accepterons aussi class="friend". La propriété friend est importée à partir de XFN.

exemple de personne amélioré

Pas de véritable problème na été trouvé dans le code exemple des personnes chez Google du 2008-05-12, néanmoins quelques améliorations peuvent être produites :

Et le commentaire suivant l'exemple est défectueux, parce que XFN ne définit uniquement que des valeurs rel, pas des valeurs class, de ce fait class="friend" est invalide et ne devrait pas être explicitement supporté.

<div class="vcard">
   <a class="fn url" rel="me" href="http://john-smith.example.com/">
    John Smith
   </a>
   "<span class="nickname">Smithy</span>"
   <span class="url"></span>
   <span class="org">ACME</span>
   <span class="adr">
     <span class="locality">Albuquerque</span>
   </span>
   <span class="title">Engineer</span>
   <a href="http://darryl-blog.example.com/" rel="friend">Darryl</a>
</div>
Remarque : Les valeurs rel de "me" et "friend" sont toutes les deux tirées de XFN.

plus d'information sur l'exemple de la personne

Pour les geeks des données structurés ici, vous pouvez aussi utiliser la capacité de hCard pour exprimer une structure additionnelle utilisation l'imbrication.

<div class="vcard">
   <a class="fn url" rel="me" href="http://john-smith.example.com/">
    John Smith
   </a>
   <span class="nickname">Smithy</span>
   <span class="org vcard">
      <a class="fn org url" href="http://en.wikipedia.org/wiki/Acme_Corporation">
       ACME
      </a>
   </span>
   <span class="adr">
     <span class="locality">Albuquerque</span>
   </span>
   <span class="title">Engineer</span>
   <span class="vcard">
     <a class="fn url" href="http://darryl-blog.example.com/" rel="friend">
      Darryl
     </a> 
   </span>
</div>


Produits

Exemple Microformats Produits

Google exemple produit 2009-05-12

Exemple Google le 2009-05-12 provenant de http://google.com/support/webmasters/bin/answer.py?answer=146750

<div class="hProduct">
   <span class="brand">ACME</span>
   <span class="category">Heavy objects</span>
   <span class="fn">Large all-purpose anvil</span>
   <span class="description">If you need an object to drop from a height, the classic 
A23859 anvil from ACME is the way to go.</span>
   <span class="url">http://anvil.example.com</span>
</div>

exemple produit corrigé

<div class="hproduct">
   <span class="brand">ACME</span>
   <span class="category">Heavy objects</span>
   <span class="fn">Large all-purpose anvil</span>
   <span class="description">
     If you need an object to drop from a height, the classic 
     A23859 anvil from ACME is the way to go.</span>
   <span class="url">http://anvil.example.com</span>
</div>

Erreurs communes remarquées :

Entreprises et organisations

Microformats : exemples d'entreprises

Google exemple entreprise le 2009-05-12

Exemple Google le 2009-05-12 extrait de http://google.com/support/webmasters/bin/answer.py?answer=146861

<div class="vcard">
   <span class="fn org">L'Amourita Pizza</span>
   <span class="tel">(206) 555-7242</span>
   <div class="adr">
     <span class="street-address">2040 Any Street</span>
     <span class="locality">Springfield</span>
     <span class="region">WA</span>
     <span class="postal-code">98102</span>
   </div>
</div>

Cet exemple n'a pas de problèmes connus.

A propos des microformats

Marquer la donnée en utilisant les microformats

Google exemple hCard 2009-05-12

Google exemole le 2009-05-12 extrait de http://google.com/support/webmasters/bin/answer.py?answer=146897

<div class="vcard">
   <img class="photo" src="www.example.com/bobsmith.jpg" /><p>
   <p><strong class="fn">Bob Smith</strong></p>
   <p><span class="title">Senior editor</span> at <span class="org">ACME Reviews</span></p>
   <p><span class="adr">
      <span class="street-address">200 Main St</span><br>
      <span class="locality">Desertville</span>, <span class="region">AZ</span> 
      <span class="postcode">12345</span></p>
   </span>
</div>

hCard exemple corrigé

<div class="vcard">
   <img class="photo" src="http://www.example.com/bobsmith.jpg" alt="Photo of Bob">
   <p><strong class="fn">Bob Smith</strong></p>
   <p><span class="title">Senior editor</span> at <span class="org">ACME Reviews</span></p>
   <p class="adr">
       <span class="street-address">200 Main St</span><br>
       <span class="locality">Desertville</span>, <span class="region">AZ</span> 
       <span class="postcode">12345</span>
   </p>
</div>

Erreurs communes notées :

Exemple de microformats imbriqués

Google exemple de microformats imbriqués 2009-05-12

Google exemple du 2009-05-12 provenant de http://google.com/support/webmasters/bin/answer.py?answer=146897

<div class="hreview">
   <p><span class="item"><strong>Blast 'Em Up Review</strong></span></p>
   <p>by <span class="reviewer vcard">
      <p>by <span class="fn">Bob Smith</span>, <span class="title">Senior Editor</span> 
      at <span class="org">ACME Reviews</span>
   </span><p>
   <p><span class="description">This is a great game. I enjoyed it from the 
   opening battle to the final showdown with the evil aliens.</span></p>
   <p><span class="rating">4.5</span></p>
</div>

exemple imbriqué corrigé

<div class="hreview">
   <p><span class="item">
        <strong class="fn">Blast 'Em Up Review</strong></span>
   </p>
   <p>by <span class="reviewer vcard">
      <span class="fn">Bob Smith</span>, 
      <span class="title">Senior Editor</span> 
      at <span class="org">ACME Reviews</span>
   </span><p>
   <p><span class="description">This is a great game. I enjoyed it from the 
   opening battle to the final showdown with the evil aliens.</span></p>
   <p><span class="rating">4.5</span></p>
</div>

Erreurs communes remarquées :

erreurs communes

Ces erreurs ont été notées à partir d'exemples de Google mais ont été presque toutes vues dans les exemples de documentation ou marquage sur d'autres sites. Quelques-uns de ces items devraient être incorporés dans les outils-de-debogage comme le validateur microformats Optimus. Cette section pourrait probablement être migrée vers son propre article. Tantek 08:48, 19 May 2009 (UTC)

Erreurs en anglais

Erreurs HTML

erreurs nom de classe microformats

erreur valeur de propriété microformats


feedback implicite sur microformats

A partir de l'analyse des exemples fournis par Google, les améliorations suivantes pourraient être faites pour les microformats. Celles-ci devraient être enregistrées en outre dans les problématiques hReview + hreview-aggregate-issues, être résolues et incorporées dans les pages de spécification.

voir aussi

google-rich-snippets-examples-fr was last modified: Sunday, August 30th, 2009

Views