Pourquoi les étoiles des rich snippets n'apparaissent pas

Lorsqu’elles s’affichent dans les résultats de recherche, les étoiles des rich snippets augmentent généralement de façon appréciable le taux de clics depuis Google. Pourtant, faire apparaître ces petites étoiles jaunes dans les résultats de recherche s’est révélé assez difficile pour de nombreux domaines. En effet, une étude de Raven Tools d’octobre 2015 indique que 80 % des sites n’utilisent pas de balisage SchemaS'ouvre dans une nouvelle fenêtre.

Ces dernières années, l’équipe SEO de Bazaarvoice a travaillé avec des centaines de domaines pour identifier et résoudre les problèmes qui empêchent Google d’afficher les étoiles dans les rich snippets. Ces problèmes ne sont pas difficiles à comprendre, mais trouver le problème précis peut parfois relever du défi.

Définitions clés à connaître :

• Nœud HTML – dans le code HTML, un nœud désigne une balise HTML ouvrante, une balise HTML fermante et tous les éléments qui se trouvent entre les deux. Par exemple, voici un nœud de paragraphe HTML complet avec l'id foo : <p id="foo">This sentence is part of the node.</p>

• Nœuds HTML imbriqués – les nœuds HTML peuvent être placés les uns dans les autres. Par exemple, voici un nœud de paragraphe HTML complet où un mot est mis en gras avec un nœud de gras : <p id="foo">This sentence is <b>part</b> of the node.</p>

• Itemscope – un attribut itemscope de schema.org peut être ajouté à un nœud HTML pour identifier le sujet traité au sein du nœud.

• Type Itemscopes – quelques itemscopes sont spéciaux et nous les appelons généralement type itemscopes. Ces itemscopes servent à identifier les grands sujets d’un site web. Product, LocalBusiness, Store, Recipe, Hotel, Article et WebPage sont quelques-uns des Type Itemscopes les plus courants pour lesquels les avis sont pertinents.

• Itemprop – un attribut itemprop de schema.org peut être ajouté à un nœud HTML pour identifier le type de données précis au sein de l’itemscope. Il est souvent utile de considérer les itemprops comme une étiquette cachée.Dans la phrase suivante, l’itemprop author est ajouté à un nœud en gras : <p id="foo">This sentence was written by <b itemprop="author">Newman</b>

Problème n° 1 : Absence d’imbrication

Le problème le plus courant que nous rencontrons est l’absence d’imbrication correcte des éléments de balisage schema.org. Le principe de base de l’imbrication est que le code HTML doit indiquer quand la page web commence et cesse de traiter un sujet donné.

Les clients de Bazaarvoice doivent utiliser WebPage comme type itemscope le plus externe sur toutes les pages, sauf la page d’accueil. WebSite est le type itemscope approprié pour la page d’accueil d’un domaine. Nous recommandons d’inclure ces attributs sur le nœud body, comme le montre l’exemple ci-dessous.

Lorsqu'une page a une entité principale, ce qui est généralement le cas des pages de détail (Product, Recipe, Hotel, LocalBusiness, Store, etc.), l'itemprop mainEntity doit être ajouté en plus de l'itemscope du type de l'entité principale. (voir la ligne 2 dans le bon exemple ci-dessous)

Il est acceptable que les pages comportent plusieurs itemscopes de types différents, ce qui convient aux pages de liste et de grille, ainsi qu’aux pages de détail avec recommandations de produits. S’il n’y a pas d’entité principale sur la page, n’incluez pas d’itemprop mainEntity.

Tous les attributs liés à chaque entité (chaque nœud HTML de type itemscope) doivent être imbriqués dans le nœud HTML. Il est très fréquent que les nœuds HTML soient fermés prématurément. (voir la ligne 4 dans le mauvais exemple, la ligne 8 dans le bon exemple, ci-dessous)

Imbriquer correctement le code de cette manière indique à Google que l’intégralité du contenu situé dans le type itemscope, comme le prix, la disponibilité, les notes, les avis et d’autres éléments CGC, est lié à cette entité. Google sait alors qu’il doit afficher les étoiles d’un produit dans les résultats de recherche.

Il est également judicieux de désigner chaque entité par un nom strictement identique sur toute la page. Par exemple, si l'itemprop name est défini comme « yellow scarf » et les itemprops itemReviewed comme « yellow fringed scarf », Google peut croire que la page contient des données sur deux produits.

Il est également judicieux de s'assurer que le nom du produit indiqué en haut et en bas de la page est strictement identique. Utiliser le terme « écharpe jaune » en haut de la page et « écharpe jaune à franges » en bas de la page déroutera Googlebot.

Problème n° 2 : Balises HTML non fermées

Lorsque vous écrivez du code HTML, chaque nœud HTML doit être ouvert et fermé – le caractère barre oblique (/) indique la fermeture d’un nœud HTML. Les exemples suivants montrent un nœud typique qui utilise des balises d’ouverture et de fermeture distinctes.

Mauvais : <div>Ceci est un nœud non fermé

Correct : <div>This is a closed node</div>

Certains éléments HTML (<img>, <meta>, etc.) n’utilisent pas de balise de fermeture distincte. Dans ces cas, une seule balise est utilisée, qui contient la barre oblique de fermeture.

Mauvais : <img src="image.gif">

Correct : <img src="image.gif" />

Si les balises HTML ne sont pas fermées, l’interpréteur de données structurées de Google peut avoir du mal à comprendre la hiérarchie et, par conséquent, mal interpréter l’imbrication mentionnée dans le problème n° 1.

Problème n° 3 : Plusieurs itemprops aggregateRating

Comme indiqué plus haut, chaque entité doit être définie à l’aide d’un itemscope de type. Cependant, il ne doit y avoir qu’un seul itemprop aggregateRating pour chaque itemscope de type. Même si l’affichage inclut une note agrégée à plusieurs endroits, le balisage ne doit être étiqueté avec un itemprop aggregateRating qu’une seule fois par itemscope de type. Plusieurs itemprops aggregateRating perturberont Google et aucune étoile ne s’affichera.

Problème n° 4 : Itemprop aggregateRating manquant

Parfois, la note affichée par les rich snippets ne correspond pas à la note moyenne des avis de votre page web – c’est un indice important sur ce qui peut clocher. Si aucun itemprop aggregateRating n’est présent, Google recherchera alors le premier itemprop review et affichera la note d’une seule personne, et non la note moyenne de tous les auteurs d’avis.

Problème n° 5 : Types de données structurées mélangés

Le vocabulaire Schema.org peut être utilisé avec de nombreux encodages différents, notamment RDFa, Microdata et JSON-LD. Bazaarvoice recommande et prend en charge Microdata. Dans tous les cas, un seul de ces types de données structurées peut être utilisé dans une même page web. Mélanger JSON-LD et Microdata dans la même page empêchera l’affichage correct des rich snippets.

Problème n° 6 : Entité principale non définie

Google recherchera un aggregateRating du premier itemscope de type qu'il rencontre dans le DOM (Document Object Model). Si une page contient plusieurs itemscopes de type, veillez à ce que l'entité principale soit étiquetée avec l'itemscope mainEntity, comme indiqué au point 1 ci-dessus.

Problème n° 7 : Utilisation de schema.org/Organization

Organization est aussi un itemscope de type Type. Cependant, nous n’avons pas trouvé de cas où Google affiche des étoiles en rich snippet pour Organization. Nous avons constaté de nombreux cas où l’itemscope Organization était placé dans l’en-tête autour d’informations générales sur l’organisation, comme des numéros de téléphone et des coordonnées. Dans tous les cas où notre équipe SEO a trouvé l’itemscope de type Organization sur des pages produits, il a empêché l’affichage des étoiles en rich snippet. Pour toute page sur laquelle vous souhaitez voir apparaître des rich snippets dans les résultats de recherche, n’incluez pas l’itemscope Organization.

Problème n° 8 : Contenu d’avis justificatif manquant

Google a affiché des étoiles en rich snippet dans quelques cas où il n'y avait pas d'avis sur la même page. Toutefois, l'affichage des étoiles dans ce scénario est au mieux sporadique, car Google peut interpréter l'absence de texte d'avis sur une page comme un indice que l'aggregateRating pourrait être une fausse donnée. Nous vous recommandons d'inclure toujours 8 avis sur la même page que celle où vous affichez un aggregateRating.

Problème n° 9 : Authenticité du contenu douteuse

Si Google ne fait pas confiance à un domaine, ou au contenu qu’il héberge, il est peu probable que les étoiles des rich snippets s’affichent dans les résultats de recherche. C’est généralement un problème pour les domaines récents qui n’ont pas encore une bonne réputation. Le CGC de Bazaarvoice inclut de précieux indices d’authenticité, comme les pseudonymes des auteurs et la date de création du contenu, ce qui améliore la réputation. Ils signalent que l’activité sociale qui se déroule sur votre domaine est légitime et améliorent votre réputation.

Problème n° 10 : Balisage de code incohérent entre le côté serveur et Inspect Element

C’est un domaine où le secteur s’adapte encore aux changements annoncés par Google en octobre 2014. Depuis, Googlebot explore le JavaScript ainsi que les éléments de page côté serveur. Nous aborderons ces changements plus en détail ensuite, mais lorsque vous dépannez des problèmes de rich snippets, gardez à l’esprit qu’il est très important d’auditer à la fois la version côté serveur, « Afficher la source », de votre code et la version HTML rendue que l’on trouve via « Inspecter l’élément », afin de s’assurer que les deux versions contiennent le contenu et le balisage prévus. Nous verrons en détail ci-dessous comment mener ce double audit.

Si les versions du code affichées dans chaque outil sont incohérentes, Google peut lui aussi afficher les étoiles des rich snippets de façon incohérente. Pour des résultats optimaux, les deux versions doivent respecter tous les principes décrits dans cet article.