google-rich-snippets-examples-fr - Revision history

ChristopheDucamp: [fr: sync'd to be reviewed]

2009-08-30T09:21:03Z

[fr: sync'd to be reviewed]

← Older revision		Revision as of 09:21, 30 August 2009
Line 4:		Line 4:
	== Avis ==		== Avis ==
	=== Exemple Avis Microformat ===		=== Exemple Avis Microformat ===
	==== Google ~~review~~ exemple 2009-05-12 ====		==== Google exemple avis le 2009-05-12 ====
	Google ~~exemple~~ du 2009-05-12 extrait de http://google.com/support/webmasters/bin/answer.py?answer=146645		Exemple Google du 2009-05-12 extrait de http://google.com/support/webmasters/bin/answer.py?answer=146645

	<div style="border:2px dashed red;display:inline-block">		<div style="border:2px dashed red;display:inline-block">
Line 98:		Line 98:
	Erreurs communes remarquées :		Erreurs communes remarquées :
	* nom de classe mal capitalisé : faux :hReview-aggregate. bon : hreview-aggregate.		* 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~~)		* les valeurs numériques ne devraient pas inclure quelque groupage spécifiquement local (c.a.d. "," après le chiffre des milliers)

	== Personnes ==		== Personnes ==
Line 125:		Line 125:

	==== exemple de personne amélioré ====		==== exemple de personne amélioré ====
	Pas de véritable ~~problèmes n'ont~~ été trouvé dans le <em>code</em> exemple des personnes chez Google du 2008-05-12, néanmoins quelques améliorations peuvent être produites :		Pas de véritable problème na été trouvé dans le <em>code</em> 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 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"		* Les liens vers la page d'accueil d'un utilisateur devraient être aussi hyperliés avec rel="me"
Line 332:		Line 332:
	* '''(X)HTML non-bien-formé (invalide).''' par ex. </div> utilisé pour fermer </span>		* '''(X)HTML non-bien-formé (invalide).''' par ex. </div> utilisé pour fermer </span>
	** attrapée avec le validateur W3C		** attrapée avec le validateur W3C
	* '''~~misordered close tags~~ (~~invalid~~) in (X)HTML.''' ~~e.g~~. <code><nowiki><p><span>...</p></span></nowiki></code> instead of <code><nowiki><p><span>...</span></p></nowiki></code>		* '''balises de fermetures mal ordonnées (invalide) en (X)HTML.''' par ex. <code><nowiki><p><span>...</p></span></nowiki></code> instead of <code><nowiki><p><span>...</span></p></nowiki></code>
	** ~~caught by~~ W3C ~~Validator~~		** via Validateur W3C
	* '''disallowed (X)HTML nesting''', ~~e.g~~. ~~putting a~~ <code><p></code> ~~inside a~~ <code><span></code>		* '''disallowed (X)HTML nesting''', par ex. placer un <code><p></code> dans un <code><span></code>
	** ~~caught by~~ W3C Validator		** par W3C Validator
	* '''<code><img></code> ~~tag missing~~ <code>alt</code> ~~attribute~~.'''		* '''<code><img></code> attribut de balise <code>alt</code> manquant.'''
	** ~~caught by~~ W3C Validator		** par W3C Validator
	* '''mixed use of XHTML and HTML4 empty elements.''' ~~e.g~~. ~~using both~~ <code><img ... /></code> ~~and~~ <code><br></code>.		* '''mixed use of XHTML and HTML4 empty elements.''' par ex. en utilisant à la fois <code><img ... /></code> et <code><br></code>.
	** ~~might be caught by~~ HTML ~~validator~~ - ~~results depend on~~ DOCTYPE ~~used~~.		** pourrait être repéré par le validateur HTML - les résultats dépendent du DOCTYPE utilisé.
	* '''~~unecessary empty paragraph element~~.''' ~~e.g~~. <code><nowiki><p><p>...</p></nowiki></code> ~~instead of simply~~ <code><nowiki><p>...</p></nowiki></code>		* '''élément paragraphe vide non nécessaire.''' par ex. <code><nowiki><p><p>...</p></nowiki></code> au lieu de simplement <code><nowiki><p>...</p></nowiki></code>
	** ~~warning provided by~~ HTML ~~validator~~		** avertissement fourni par le validateur HTML
	* '''missing http in URL attribute value.''' ~~e.g~~. <code>www.~~example~~.com</code> ~~instead of~~ <code>http://www.~~example~~.com</code>		* '''missing http in URL attribute value.''' par ex. <code>www.exemple.com</code> au lieu de <code>http://www.exemple.com</code>
	** ~~could be caught by an~~ HTML ~~validator that checked for unlikely relative~~ URL ~~starting with~~ "www." ~~with directory name ending in~~ ".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 ===		=== erreurs nom de classe microformats ===
	* '''class name miscapitalized.''' e.~~g. wrong~~: hReview hReview-aggregate. ~~right~~: hreview hreview-aggregate.		* '''class name miscapitalized.''' par ex. faux: hReview hReview-aggregate. bon: 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~~.		** 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: ~~this is probably worth adding to~~ Optimus - ~~to check for mis-capitalized~~ microformats ~~root and property class names~~.		** 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 ===		=== 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~~)		* '''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 ~~could also validate the values of numeric properties~~		** TODO Optimus : Optimus pourrait aussi valider les valeurs des propriétés numériques


	== feedback implicite sur microformats ==		== 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.		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 [[hreview-issues-fr\|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.:		* '''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.:

ChristopheDucamp: [fr: First french draft translation - sync'd ok - translation to be achieved and reviewed]

2009-08-30T09:04:25Z

[fr: First french draft translation - sync'd ok - translation to be achieved and reviewed]

New page

== intro ==
Le 2009-05-12, Google a lancé une fonctionnalité "rich snippets" dans son [[google-search-fr|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-fr|hCard]], [[hreview-fr|hReview]], [[hreview-aggregate-fr|hReview aggregate]] et [[hproduct-fr|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 style="border:2px dashed red;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>

==== exemple avis corrigé ====

<div style="border:2px solid lime;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>

Erreurs communes nettoyées :
* (X)HTML pas-bien-formé (invalide) par ex. </div> utilisé pour fermer </span>
* 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é <code>category</code>, un hyperlien pour le critique) plutôt que de la métadonnée invisible (attribut 'typeof', attribut 'about').

<source lang=html4strict>
<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>
</source>

=== 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 style="border:2px dashed red;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>

==== exemple d'avis agrégé corrigé ====

<div style="border:2px solid lime;display:inline-block">
<source lang=html4strict>
<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>
</source>
</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 style="border:2px dashed red;display:inline-block">
<source lang=html4strict>
<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>
</source>
<blockquote>
Note : Nous accepterons aussi class="friend". La propriété friend est importée à partir de XFN.
</blockquote>
</div>

==== exemple de personne amélioré ====
Pas de véritable problèmes n'ont été trouvé dans le <em>code</em> 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 <code>rel</code>, pas des valeurs <code>class</code>, de ce fait class="friend" est invalide et ne devrait pas être explicitement supporté.

<div style="border:2px solid lime;display:inline-block">
<source lang=html4strict>
<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>
</source>
<blockquote>
Remarque : Les valeurs rel de "me" et "friend" sont toutes les deux tirées de [[xfn-fr|XFN]].
</blockquote>
</div>

==== 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.

<source lang=html4strict>
<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>
</source>

== 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 style="border:2px dashed red;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>

==== exemple produit corrigé ====

<div style="border:2px solid lime;display:inline-block">
<source lang=html4strict>
<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>
</source>
</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

<source lang=html4strict>
<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>
</source>

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 style="border:2px dashed red;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>

==== hCard exemple corrigé ====
<div style="border:2px solid lime;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>
Erreurs communes notées :
* balises de fermeture mal ordonnées (invalide) en (X)HTML. par ex. <code><nowiki><p><span>...</p></span></nowiki></code> au lieu de <code><nowiki><p><span>...</span></p></nowiki></code>
* élément de paragraphe vide non nécessaire par ex. <code><nowiki><p><p>...</p></nowiki></code> au lieu de simplement <code><nowiki><p>...</p></nowiki></code>
* balise <code><img></code> manquant de l'attribut <code>alt</code>.
* usage mixé d'éléments vides de XHTML et HTML4 par ex. en utilisant à la fois <code><img ... /></code> et <code><br></code>.
* Au lieu d'utiliser un élément supplémentaire <code>span</code> pour emballer <code>adr</code>, 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 style="border:2px dashed red;display:inline-block">
<source lang=html4strict>
<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>
</source>
</div>

==== exemple imbriqué corrigé ====

<div style="border:2px solid lime;display:inline-block">
<source lang=html4strict style="background:EFE">
<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>
</source>
</div>

Erreurs communes remarquées :
* mots dupliqués. par ex. "by by"
* disallowed (X)HTML nesting, e.g. putting a <code><p></code> inside a <code><span></code>

== 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 [[debugging-tools-fr|outils-de-debogage]] comme le [[validator-fr|validateur]] microformats [[optimus-fr|Optimus]]. Cette section pourrait probablement être migrée vers son propre article. [[User:Tantek|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. </div> utilisé pour fermer </span>
** attrapée avec le validateur W3C
* '''misordered close tags (invalid) in (X)HTML.''' e.g. <code><nowiki><p><span>...</p></span></nowiki></code> instead of <code><nowiki><p><span>...</span></p></nowiki></code>
** caught by W3C Validator
* '''disallowed (X)HTML nesting''', e.g. putting a <code><p></code> inside a <code><span></code>
** caught by W3C Validator
* '''<code><img></code> tag missing <code>alt</code> attribute.'''
** caught by W3C Validator
* '''mixed use of XHTML and HTML4 empty elements.''' e.g. using both <code><img ... /></code> and <code><br></code>.
** might be caught by HTML validator - results depend on DOCTYPE used.
* '''unecessary empty paragraph element.''' e.g. <code><nowiki><p><p>...</p></nowiki></code> instead of simply <code><nowiki><p>...</p></nowiki></code>
** warning provided by HTML validator
* '''missing http in URL attribute value.''' e.g. <code>www.example.com</code> instead of <code>http://www.example.com</code>
** 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 <code><nowiki><span class="item">L'Amourita Pizza</span></nowiki></code> as:
** <code><nowiki><span class="item"><span class="fn">L'Amourita Pizza</span></span></nowiki></code>
* '''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 <code>count</code> property which is a whole number:
** interpret <code><nowiki><span class="count">1,313</span></nowiki></code>
** or <code><nowiki><span class="count">1.313</span></nowiki></code>
** as <code><nowiki><span class="count">1313</span></nowiki></code>

== voir aussi ==
* [[google-search-fr|google-recherche]]
* [[search-engines-fr|moteurs de recherche]]
* [[implementations-fr|implémentations]]