google-rich-snippets-examples-fr

From Microformats Wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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 :

  • (X)HTML pas-bien-formé (invalide) par ex. utilisé pour fermer
  • nom de classe racine avec une lettre en capitale c.a.d. faux : hReview. bon : hreview.

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 :

  • nom de classe mal capitalisé : faux :hReview-aggregate. bon : hreview-aggregate.
  • les valeurs numériques ne devraient pas inclure quelque groupage spécifiquement local (c.a.d. "," après le chiffre des milliers)

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 :

  • Les noms d'hyperliens pour un marché plus typique et concis. En pratique les noms de personnes sont souvent hyperlés vers les pages qui les représentent.
  • Les liens vers la page d'accueil d'un utilisateur devraient être aussi hyperliés avec rel="me"

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 :

  • nom de classe mal capitalisé. c.a.d. faux : hProduct. bon : hproduct.

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 :

  • balises de fermeture mal ordonnées (invalide) en (X)HTML. par ex. <p><span>...</p></span> au lieu de <p><span>...</span></p>
  • élément de paragraphe vide non nécessaire par ex. <p><p>...</p> au lieu de simplement <p>...</p>
  • balise <img> manquant de l'attribut alt.
  • usage mixé d'éléments vides de XHTML et HTML4 par ex. en utilisant à la fois <img ... /> et <br>.
  • Au lieu d'utiliser un élément supplémentaire span pour emballer adr, la classe peut simplement être placée sur l'élément contenant le paragraphe.

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 :

  • mots dupliqués. par ex. "by by"
  • disallowed (X)HTML nesting, e.g. putting a <p> inside a <span>

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

  • mots dupliqués. par ex. "by by" ou "the the", souvent à travers un saut de ligne ou dans deux éléments adjacent ou parent/premier-enfant.

Erreurs HTML

  • (X)HTML non-bien-formé (invalide). par ex. utilisé pour fermer
    • attrapée avec le validateur W3C
  • balises de fermetures mal ordonnées (invalide) en (X)HTML. par ex. <p><span>...</p></span> instead of <p><span>...</span></p>
    • via Validateur W3C
  • disallowed (X)HTML nesting, par ex. placer un <p> dans un <span>
    • par W3C Validator
  • <img> attribut de balise alt manquant.
    • par W3C Validator
  • mixed use of XHTML and HTML4 empty elements. par ex. en utilisant à la fois <img ... /> et <br>.
    • pourrait être repéré par le validateur HTML - les résultats dépendent du DOCTYPE utilisé.
  • élément paragraphe vide non nécessaire. par ex. <p><p>...</p> au lieu de simplement <p>...</p>
    • avertissement fourni par le validateur HTML
  • missing http in URL attribute value. par ex. www.exemple.com au lieu de http://www.exemple.com
    • pourrait être détecté par un validateur HTML qui vérifierait les URL relatives démarrant par "www." avec le nom de répertoire terminant par ".com".

erreurs nom de classe microformats

  • class name miscapitalized. par ex. faux: hReview hReview-aggregate. bon: hreview hreview-aggregate.
    • Les noms de classes des microformats sont toujours en bas de casse, les mots (apparents) séparés par des tirets, par ex. "family-name", selon les principes de nommage du XHTML sémantique.
    • TODO Optimus : cela vaut probablement la peine d'ajouter ça à Optimus - vérifier les noms de classe racine et propriété microformats mal capitalisés.

erreur valeur de propriété microformats

  • intégrer les valeurs avec la ponctuation. les valeurs numériques ne devraient pas inclure quelque chiffre pour du groupage local spécifique (par ex. "," après le chiffre des milliers)
    • TODO Optimus : Optimus pourrait aussi valider les valeurs des propriétés numériques


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.

  • Even simpler is better. In the common case where the entirety of the "item" of an hReview (or hReview aggregate) is its "fn", then perhaps the "fn" subproperty markup could be omitted, e.g.:
    • interpret <span class="item">L'Amourita Pizza</span> as:
    • <span class="item"><span class="fn">L'Amourita Pizza</span></span>
  • Permit human friendlier values when possible. In some cases the type of a property is sufficiently constrained as to permit the use of punctuation that makes the values more human readable, better matching existing content. e.g. for the count property which is a whole number:
    • interpret <span class="count">1,313</span>
    • or <span class="count">1.313</span>
    • as <span class="count">1313</span>

voir aussi

Retrieved from "http://microformats.org/wiki/index.php?title=google-rich-snippets-examples-fr&oldid=40521"