google-rich-snippets-examples-fr

From Microformats Wiki
Revision as of 09:04, 30 August 2009 by ChristopheDucamp (talk | contribs) ([fr: First french draft translation - sync'd ok - translation to be achieved and reviewed])
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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 review exemple 2009-05-12

Google exemple 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 "locale-specific digit grouping" (c.a.d. "," after thousands digit)

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èmes n'ont é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
  • misordered close tags (invalid) in (X)HTML. e.g. <p><span>...</p></span> instead of <p><span>...</span></p>
    • caught by W3C Validator
  • disallowed (X)HTML nesting, e.g. putting a <p> inside a <span>
    • caught by W3C Validator
  • <img> tag missing alt attribute.
    • caught by W3C Validator
  • mixed use of XHTML and HTML4 empty elements. e.g. using both <img ... /> and <br>.
    • might be caught by HTML validator - results depend on DOCTYPE used.
  • unecessary empty paragraph element. e.g. <p><p>...</p> instead of simply <p>...</p>
    • warning provided by HTML validator
  • missing http in URL attribute value. e.g. www.example.com instead of http://www.example.com
    • could be caught by an HTML validator that checked for unlikely relative URL starting with "www." with directory name ending in ".com".

erreurs nom de classe microformats

  • class name miscapitalized. e.g. wrong: hReview hReview-aggregate. right: hreview hreview-aggregate.
    • microformats class names are always all lower case, (apparent) words separated with dash characters, e.g. "family-name", per Semantic XHTML naming principles.
    • TODO Optimus: this is probably worth adding to Optimus - to check for mis-capitalized microformats root and property class names.

erreur valeur de propriété microformats

  • integer values with punctuation. numerical values should not include any locale-specific digit grouping (e.g. "," after thousands digit)
    • TODO Optimus: Optimus could also validate the values of numeric properties


feedback implicite sur microformats

From analyzing the examples provided by Google, the following improvements could be made to microformats. These should be recorded additionally in hreview-issues + hreview-aggregate-issues, resolved accordingly and incorporated into the specification pages.

  • 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=40518"