{"id":1946,"date":"2012-02-13T08:16:51","date_gmt":"2012-02-13T07:16:51","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1946"},"modified":"2015-01-18T16:15:07","modified_gmt":"2015-01-18T15:15:07","slug":"creer-systeme-notation-referencement-google","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/creer-systeme-notation-referencement-google","title":{"rendered":"Cr\u00e9er un syst\u00e8me de notation r\u00e9f\u00e9renc\u00e9 par Google"},"content":{"rendered":"

Google affiche un certain nombre d’informations dans ces r\u00e9sultats de recherche. Un aper\u00e7u du site, un titre, une description et l’URL r\u00e9f\u00e9renc\u00e9e est un assemblage assez classique. Des choses peuvent \u00eatre rajout\u00e9es dans l’affichage, dont un syst\u00e8me de notation (ou vote). Voyons voir comment proc\u00e9der.<\/p>\n

Pour motiver Google \u00e0 afficher un certain type d’informations, il faut apprendre \u00e0 lui parler, devenir son ami et passer un pacte avec le diable<\/del>.<\/p>\n

Syntaxe basique<\/h2>\n

Il va nous falloir user d’une syntaxe pr\u00e9cise dont voici une d\u00e9monstration tr\u00e8s simple. <\/p>\n

Score : <span class=\"rating\">4.5<\/span><\/code><\/pre>\n
Sans information contraire, Google partira du principe que vous attribuez une note sur 5 (5 \u00e9toiles), vous pouvez donc parfaitement utiliser des pourcentages : 50% correspondra pour lui \u00e0 une note de 2.5.
\nC’est l’exemple le plus simple explicit\u00e9 par Google (1)<\/a>.<\/p>\n
Syst\u00e8me de notation sous forme d’\u00e9toiles<\/h2>\n
Le plus souvent repr\u00e9sent\u00e9 sous forme d’\u00e9toiles (5 \u00e9toiles g\u00e9n\u00e9ralement), le syst\u00e8me de notation propos\u00e9 au visiteur doit respecter une syntaxe pr\u00e9cise pour que Google le prenne en compte dans ses r\u00e9sultats de recherche.<\/p>\n
\"\"
Affichage fonctionnel sur le site Geekeries<\/a><\/small><\/p>\n
La m\u00e9thode microdata<\/h3>\n
Cette m\u00e9thode consiste \u00e0 utiliser des attributs sp\u00e9cifique.
\nSi vous utilisez une image simple par quantit\u00e9 de vote (exemple : une image toutes les demi-\u00e9toile), il convient d’utiliser l’attribut itemprop=\"rating\"<\/code> directement sur l’image. L’attribut alt servant \u00e0 expliciter la note.<\/p>\n
<img itemprop=\"rating\" src=\"\/img\/rating_star_4.gif\" alt=\"4 \u00e9toiles : recommand\u00e9\" \/><\/code><\/pre>\n
Si vous pr\u00e9f\u00e9rez une technique CSS diff\u00e9rente, comme celle des sprites par exemple, il est tout \u00e0 fait possible d’\u00e9crire quelque chose dans ce sens :<\/p>\n
<span class=\"rating-foreground\" style=\"width:90%\">\r\n   <meta itemprop=\"rating\" content=\"4.5\" \/>\r\n<\/span><\/code><\/pre>\n
En utilisant la meta<\/code> au sein du bloc HTML, on rend possible l’affichage des \u00e9toiles dans les r\u00e9sultats de recherche, la valeur de content<\/code> servant \u00e0 d\u00e9terminer leur nombre.<\/p>\n
La m\u00e9thode microformat<\/h3>\n
Cette m\u00e9thode consiste \u00e0 utiliser des classes bien pr\u00e9cises pour mettre en place un ensemble logique d’informations.
\nEn reprenant les exemples pr\u00e9c\u00e9dents, voici comment rendre visible un r\u00e9sultat de vote pour Google :<\/p>\n
<img class=\"rating\" src=\"\/img\/rating_star_4.gif\" alt=\"4 \u00e9toiles : recommand\u00e9\" \/><\/code><\/pre>\n
En reprenant le second exemple, il est possible d’avoir une structure comme celle-ci :<\/p>\n
<span class=\"rating-foreground\" style=\"width:90%\">\r\n   <span class=\"value-title\" title=\"4.5\"><\/span>\r\n<\/span><\/code><\/pre>\n
La classe value-title<\/code> est une invitation \u00e0 prendre comme valeur la valeur de l’attribut title<\/code>.<\/p>\n
La m\u00e9thode RDFa<\/h3>\n
La m\u00e9thode RDFa<\/a> permet, par l’utilisation des attributs property<\/code>, typeof<\/code> et rel<\/code>, de faire la m\u00eame chose que pr\u00e9c\u00e9demment.
\nReprenons les deux exemples :<\/p>\n
<img property=\"v:rating\" src=\"\/img\/rating_star_4.gif\" alt=\"4\" \/><\/code><\/pre>\n
et<\/p>\n
<span class=\"rating-foreground\" style=\"width:90%\" property=\"v:rating\" content=\"4.5\"><\/span><\/code><\/pre>\n
Syst\u00e8me de notation plus riche<\/h2>\n
Pour cr\u00e9er un syst\u00e8me de notation avec beaucoup plus de pr\u00e9cision (nombre d’intervenants, syst\u00e8me de vote non bas\u00e9s sur une note sur 5, etc.), il faut pr\u00e9venir Google que vous sortez du cas classique.
\nPrenons un unique exemple riche pour chaque m\u00e9thode, microdata, microformat et RDFa.<\/p>\n
M\u00e9thode riche en microdata<\/h3>\n
<span itemscope itemtype=\"http:\/\/schema.org\/Review\">  \r\n   <span itemprop=\"itemReviewed\">Juiz Smart Mobile Admin<\/span>\r\n   <span itemprop=\"rating\" itemscope itemtype=\"http:\/\/schema.org\/AggregateRating\">     \r\n         Note de : \r\n         <span itemprop=\"ratingValue\">90<\/span> sur\r\n         <span itemprop=\"bestRating\">100<\/span>\r\n      bas\u00e9e sur\r\n      <span itemprop=\"ratingCount\">35<\/span> votes.\r\n   <\/span>\r\n<\/span><\/pre>\n
<\/code><\/p>\n
M\u00e9thode riche en microformat<\/h3>\n
<span class=\"hreview-aggregate\">  \r\n   <span class=\"item\">\r\n      <span class=\"fn\">Juiz Smart Mobile Admin<\/span>\r\n   <\/span>\r\n   <span class=\"rating\">     \r\n         Note de : \r\n         <span class=\"average\">90<\/span> sur\r\n         <span class=\"best\">100<\/span>\r\n   <\/span>\r\n   bas\u00e9e sur\r\n   <span class=\"count\">35<\/span> votes.\r\n<\/span><\/pre>\n
<\/code><\/p>\n
M\u00e9thode riche RDFa<\/h3>\n
<span xmlns:v=\"http:\/\/rdf.data-vocabulary.org\/#\" typeof=\"v:Review\">  \r\n   <span property=\"v:itemreviewed\">Juiz Smart Mobile Admin<\/span>\r\n   <span rel=\"v:rating\">\r\n      <span typeof=\"v:Rating\">\r\n         Note de : \r\n         <span property=\"v:average\">90<\/span> sur\r\n         <span property=\"v:best\">100<\/span>\r\n      <\/span>\r\n   <\/span>\r\n   bas\u00e9e sur\r\n   <span property=\"v:count\">35<\/span> votes.\r\n<\/span><\/pre>\n
<\/code><\/p>\n
En r\u00e9sum\u00e9<\/h2>\n
Les syntaxes sont diff\u00e9rentes mais globalement les mots clefs et le rendu sont les m\u00eames pour le moteur de recherche.
\n\u00c0 vous de voir ce qui correspond le mieux \u00e0 votre interface.<\/p>\n
La syntaxe microdata propos\u00e9e sur http:\/\/schema.org<\/code> est issue d'une entente entre Bing, Google et Yahoo, il conviendrait donc de favoriser celle-ci combin\u00e9e \u00e0 un DOCTYPE HTML5.<\/p>\n
Pour tester comment peut s'afficher votre page dans les r\u00e9sultats de recherche de Google, utilisez le Rich Snippets Tools<\/a>.<\/p>\n
\n
Sources et liens utiles<\/h2>\n