Juin
8

Comment mettre en place les rich snippets

Nous avons vu qu’il existe plusieurs type de snippets (affichage d’un résultat Google). Voyons maintenant comment les coder à la main ou quels sont les plugins pour les CMS qui le permettent.

Rich snippets

Format

Il existe 3 formats permettant le codage des pages web pour que les données soient détectées par les moteurs de recherches et éventuellement affichées dans leurs résultats.

Les trois langages disponibles sont les microformats, les microdatas et le RDFa.

Je ne vais pas énoncer dans cet articles les avantages des uns et des autres. Celui qui fait consensus auprès des moteurs de recherches principaux que sont Google, Yahoo et Bing est le microdata sachant qu’ils supportent aussi les autres formats.

C’est donc le microdata que je vais utiliser ici.

Schéma

Ensuite nous avons besoin d’un dictionnaire qui détermine quel est le vocabulaire qu’il est possible d’utiliser dans les snippets.
On appellera ce dictionnaire Schéma.

Par exemple, si l’on veut définir une adresse email, il faut dire aux moteurs de recherche quel dictionnaire nous avons utilisé pour qu’il sache que la façon dont on l’a écrite est conforme à ce dictionnaire.

Dans le présent article je prend en compte celui qui est défini sur schema.org. Il en existe d’autres.

Codage des rich snippets

Prenons l’exemple d’une auberge pour mettre en place un snippet pour entreprise (pour les autres types consultez la liste des snippets définis par Google).

On peut écrire le code HTML suivant qui est tout ce qu’il y’a de plus basique :

<div>
L'Auberge du Poney qui tousse
15, Rue du canard boiteux
99999 BOULGOURVILLE
tel :  01 23 45 67 89
</div>

Il faut tout d’abord écrire de quel type de snippet il va s’agir. Il nous faut donc commencer par la ligne suivante qui détermine un élément de type « Entreprise ou Organisation » comme suit, puis refermer la balise:

<div itemscope itemtype="http://schema.org/Organization">
</div>

Dans l’attribut itemtype, nous indiquons dans quel dictionnaire se trouve la définition de l’Organisation qui se trouve, comme vu précédemment sur http://schema.org. Celui-ci doit être précédé de itemscope

Suivant le type de snippet que l’on souhaite on remplacera le mot Organization par Review (avis), AggregateRating (avis global), Person (personne), Product (produit), Offer (offre), AggregateOffer (Offre globale), Recipe (recette), Event (événement), MusicRecording (musique).

Type simple

Ensuite nous avons besoin de définir les propriétés de l’entreprise.
Pour ce faire il faut inclure l’attribut itemprop dans une balise span ou div et spécifier, pour chaque propriété que l’on souhaite faire apparaître, de laquelle nous parlons .

Donc pour le nom de la société il faut dire que l’itemprop vaut name de la façon suivante :

<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">L'auberge du poney qui tousse</span>
</div>

Bien sûr on ne peut pas écrire n’importe quelle valeur pour itemprop.
Vous allez donc me demander comment je sais que le nom de la société doit s’écrire name et non pas nameofcompany ou organizationname ou que sais-je encore ?

Pour ça il faut se rendre sur le site schema.org puis dans la section 2a. schema.org types and properties et cliquer sur le type de snippet que vous souhaitez mettre en place.
Dans le cas présent il s’agit de Organization.

Vous avez donc accès à un tableau listant les attributs autorisés pour le type choisi.
Le champ name est bien présent et est défini par The name of the item qui doit être écrit en texte comme indiqué dans la colonne Expected type.
La valeur à donner à l’attribut itemprop est celle qui est indiquée dans la colonne Property.

Type spécifique

Maintenant passons à l’adresse et c’est là que ça se complique.
Regardez le tableau de schema.org et recherchez la ligne address.
Ici, dans la colonne Expected Type, le format attendu n’est pas du texte mais une PostalAddress.

Il va donc d’abord falloir écrire que nous voulons une adresse en donnant à itemprop la valeur indiquée dans la colonne property à savoir address, de la même façon que précédemment.
Mais comme le Expected Type n’est pas un type basique nous devons écrire que la suite va être un élément (itemscope) et que cet élément est une adresse (PostalAddress).

Ce qui nous donne :

<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">L'auberge du poney qui tousse</span>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"></span>
</div>

Voilà nous avons écrit l’élément qui permet de dire que ce qui est compris entre les balises span est une adresse.
Maintenant remplissons cette adresse.
Nous aurons besoin de :

  • la rue : 15, Rue du canard boiteux
  • la ville : BOULGOURVILLE
  • le code postal : 99999
  • le téléphone : 01 23 45 67 89

Sur schema.org recherchez PostalAddress dans la case prévue à cet effet en haut à droite et cliquez sur le résultat contenant PostalAddress pour voir la liste des propriétés que l’on peut utiliser dans une addresse.

Nous trouvons donc que l’adresse s’écrit streetAddress, la ville s’écrit addressLocality, le code postal s’écrit postalCode et le téléphone s’écrit telephone.

Au passage, dans la colonne Expected Type, toutes les propriétés qui nous intéressent sont en texte donc nous n’avons pas besoin de redéfinir un itemtype.

Ce qui nous donne :

<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">L'auberge du poney qui tousse</span>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
     <span itemprop="streetAddress">15, Rue du canard boiteux</span>
     <span itemprop="postalCode">99999</span>
     <span itemprop="addressLocality">BOULGOURVILLE</span>
     <span itemprop="telephone">01 23 45 67 89</span>
</span>
</div>

Test

Pour vérifier que votre code est valide vous pouvez utiliser Rich Snippets Testing Tool fourni par Google.

Cependant il s’agit d’un outil en version bêta, vous n’aurez donc pas d’aperçu en version française même si le code est bon.
Vous pouvez seulement vérifier que Google détecte bien qu’il y’a des données pouvant être exploitées (Extracted rich snippet data from the page )

CMS

Si vous utilisez un CMS, il y’a probablement un plugin qui vous permet de ne pas coder à la main.

Pour WordPress vous pouvez utiliser GD Star Rating.
Pour Joomla vous avez Rich snippets vote.
Pour Drupal un plugin possible est Google Rich Snippets.

Patience

Voilà, votre code peut désormais être traité comme un snippet.

Attention, ce n’est pas parce que le code est présent et valide sur votre page que les moteurs de recherche vont accepter de l’afficher dans les résultats.
Comme toujours il faut que ça corresponde aux critères des moteurs de recherche pour que ça soit accepté.

Articles similaires :

17 Comments to “Comment mettre en place les rich snippets”

  • Martin 8 juillet 2012 à 21 h 09 min

    Merci pour cet article, je vais essayer de mettre cela en place sur mon site.
    J’ai deja essayer les rich snippets, mais depuis quelques semaines, j’attends toujours mon logo sur les serp google.

  • Arnaud 9 juillet 2012 à 16 h 35 min

    Moi aussi j’attends toujours sur un de mes sites.
    On est tributaires du bon vouloir de Google quoiqu’il arrive ;)

  • Gîtes de France 13 août 2012 à 6 h 43 min

    Merci pour votre article, bon petit tuto.
    Je suis en train de l’installer sur un nouveau site « from scratch ». C’est pénible tout de même de devoir attendre des semaines voir des mois.

    Sur un autre site, je les ai installé, j’ai été validé pour le bredcrumb et la description mais pas pour les prix et le stock… C’est tout de même étrange sachant que webmaster tools dit bien que j’ai respecté la syntaxe !

    Vive google et la blackbox :)
    Gîtes de France Articles récents..Passer un petit week-end en amoureux dans un gite en BelgiqueMy Profile

  • Arnaud 13 août 2012 à 8 h 03 min

    Hé oui, Google est seul maître à bord :)

    Le lien vers ton article ne marche pas au fait.

  • Arnaud 15 août 2012 à 8 h 13 min

    Tiens, un article d’Olivier Duffez qui peut t’intéresser :
    WRI données structurées dans GWT

  • Daming 19 août 2012 à 4 h 48 min

    Très intéressant, par contre j’ai une question :
    – Ces rich snippets sont à ajouter dans la balise meta ? A chaque page un rich snippet différent à coder (fastidieux) ? Ou alors un seul pour tout le site ?
    Merci
    Daming Articles récents..Top 10 de nos voyages en ChineMy Profile

  • Arnaud 19 août 2012 à 16 h 38 min

    Ca se met dans le body, pas dans les métas.

    Il en faut un par page, c’est certes fastidieux mais imaginons que tu ais un catalogue de produits, c’est beaucoup plus intéressant d’avoir des détails précis de chaque article afin que chacun d’entre eux apparaisse avec ses propres caractéristiques.

  • Daming 20 août 2012 à 1 h 19 min

    Merci pour ton retour. Ok je comprends mieux le principe et l’intégration, c’est effectivement fastidieux et le plugin pour Joomla passe pas sur mon site Grrr… Bon et bien je vais faire un test sur un de mes sites et je verrai ce que cela donne. Je vais donc suivre le tuto à la lettre ;)
    Daming Articles récents..Top 10 destination en Chine à découvrirMy Profile

  • Jon from Tottenham Betting 28 août 2012 à 12 h 17 min

    Pouvez-vous les ajoutez à la section de tête aussi?
    Jon@Tottenham Betting Articles récents..Predictions undone by wasteful Spurs and last minute Baggies equaliserMy Profile

  • agrumeprod 28 août 2012 à 15 h 55 min

    Dans quel but ?

  • Jon from Mega Fortune 3 septembre 2012 à 15 h 36 min

    Pour une raison quelconque mon wordpress ne me laisse pas ajouter le code dans la section body de la CMS
    Jon@Mega Fortune Articles récents..Play Mega Fortune for freeMy Profile

  • Arnaud 3 septembre 2012 à 20 h 41 min

    Si tu met le code dans la partie « HTML » d’un article, pas dans la partie « Visuel » ça doit fonctionner.
    Je viens d’essayer et en éditant le code source je vois bien le code correspondant.

    Ca s’efface lorsque tu publies ?
    Arnaud Articles récents..Plus de 50 sites de thèmes premium pour WordPress, Drupal, JoomlaMy Profile

  • Affiliation rencontre 14 octobre 2012 à 20 h 34 min

    Cela fonctionne ici par exemple : https://www.google.fr/search?q=site%3Asoflirt.com

    Avec le plugin GD Star Rating.

    Par contre :
    – Configuration complexe pour GD Star Rating.
    – Bien penser à décocher l’option Snippet will be renedered hidden on the page (style display set to none).
    – Il faut un peu de temps pour voir apparaître les étoiles de son site dans les serps.
    – Et puis difficile de générer de vrais votes quand on lance un site.
    Affiliation rencontre Articles récents..Pourquoi se lancer dans l’affiliation rencontre ?My Profile

  • Pierre from projet d'entreprise 15 décembre 2012 à 15 h 10 min

    Bonjour,
    je voulais savoir si les pages google adresse ne référencent pas mieux que les rich-snippets, et quel est la véritable fonction des ces codes! merci
    Pierre@projet d’entreprise Articles récents..Un accompagnement pour bien débuter votre sociétéMy Profile

  • Arnaud 16 décembre 2012 à 14 h 42 min

    Google Adresses sert surtout au niveau géographique.
    Par exemple si tu tapes « Restaurant à Petaouchnok les bains » tu trouveras tout les restaurants proches de cette ville avec une carte du secteur.

    Les rich snippets servent juste à faire apparaître des données plus riches et plus pertinentes, rien de plus à priori.

  • Location Camping-car 21 janvier 2013 à 11 h 31 min

    Merci pour cet article,
    Je vais essayer de le mettre en place.
    Il y a encore la solution plus simple au cas ou ça marche pas de mettre des étoiles en html dans son snippet mais bon !
    Location Camping-car Articles récents..Camping car à louer ( Geneve suisse )My Profile

  • rap game 27 avril 2013 à 14 h 15 min

    Ah excellent, grâce à cet article et à votre site en général je vais pouvoir optimiser ma communication web notamment en utilisant les techniques google. Excellent merci de nous faire découvrir ce type d’astuce.
    rap game Articles récents..XXL Freshmen 2013 Cypher: EP 2My Profile