Validateur Schema.org pour afficher les rich-snippet sur votre site internet

Schema.org vient d’annoncer la disponibilité d’un nouveau validateur de contenus enrichi, pour tester si le balisage remplit les conditions pour afficher les rich-snippet dans google. Pour s’afficher les rich-snippet doivent être balisé correctement. Je vous ai mis en bas d’article le mindmap de schema.org

Qu’est-ce qu’un Rich-snippet ?

En 2015, Google a annoncé que les rich-snippets seraient désactivés sur tous les sites qui utilisent un type de balisage incomplet ou incorrect. Les rich-snippets sont des petites descriptions qui apparaissent lorsque vous effectuez une recherche sur google et ils peuvent avoir beaucoup à voir avec votre taux de conversion. La validation du balisage schema.org est donc très importante pour vos pages web afin d’obtenir ce type d’information pertinente et utile. Le rich-snippet est un rendu des données formatées pour être affichés, mais les contenus doivent être balisé. Je modère ma phrase précédente en précisant que parfois google peut afficher des rich-snippet alors qu’il n’y a aucun balisage. Exemple : tapez évènements à venir à paris.

A l’origine du format normalisé schema.org, il y a eu chez les grand acteurs du web le besoin de cartographier les choses et de les normaliser, de classifier les choses et d’établir un lien avec les autres choses. Je ne vais pas vous faire de cours sur les entités nommées/relations, mais vous avez le concept.

Une personne est une chose, un endroit est une chose… mais elle est en relation avec qui ou quoi ? Le Knowledge Graph

Cela a donné naissance a des protocoles comme « open graph protocol » de Facebook par exemple. J’en parle dans cet article sur l’open-graph et le social commerce Mais ce qu’il faut en retenir, c’est que moins un moteur de recherche a besoin d’aller fouiller pour extraire du contenu pertinent pour l’aider à classifier ou a formater du contenu, et plus il essaiera de le mettre en avant. Avant google pouvait utiliser le protocol data-vocabulary, mais c’est terminé.

Schema.org, c’est la même chose, c’est un mapping qui met en relation les choses avec d’autres choses en décrivant la dépendance et les propriété complémentaires qui permettent de les caractériser. C’est l’affichage du knowledge Graph affiché sur le côté droit d’une recherche souvent.

Si je cherche Omar Sy, google m’indique que c’est un acteur, il m’affiche les films dans lequel son nom apparaît

Si je demande qui est la femme d’omar sy, google me renvoie directement l’information, Hélène sy, on voit bien la dépendance (google s’est appuyé sur wikipedia entre autre pour cette partie)

Rich-snippet et SEO

Les Plans seo avec les rich-snippets morts

Comme en SEO on balance les plans quand ils sont mort, voilà ma petite sélection perso

Les votes avec étoiles avec data vocabulary

On pouvait faire afficher des étoiles plus facilement en utilisant le protocol data-vocabulary qu’en utilisant schema.org, avec un vote simple plutôt qu’un aggregate rating.

Le fil d’ariane avec data-vocabulary

Parfois on voulais faire ressortir le fil d’ariane en plus des infos produits stock, disponibilité, avis client, prix, mais google n’affichait que l’un ou l’autre, et la technique était de mixer entre schema.org et data-vocabulary. Mais voilà c’est mort aussi.

Les étoiles plein les serp

Mettre des étoiles dans sa page d’avis, même si le rating est fait par un site tiers indépendant de recueil d’avis, ça aussi c’est mort. L’argument « oui c’est bon pour votre SEO » ça va afficher des étoiles, ça va le faire sur leur site, pas sur le votre… (l’aspect backlink lui est bon à prendre, jdcjdr)

Les rich-snippet du point de vu d’un SEO comme moi, c’est d’avoir un résultat qui sorte du lot par une singularité. Avoir des étoiles qui apparaissent au dessous de son lien dans le moteur de recherche, même si vous êtes en milieu de page, ça attire l’attention. Oui, je raisonne en visibilité et pas qu’en positionnement pur. Donc comme dit la pub pour les parfums Axe, plus t’en met, plus t’en as. Donc mieux vous baliserez vos contenus, et plus vous sortirez de manière différente sur une requête donnée.

Les rich-snippet qui peuvent vous valoir une pénalité manuelle si mal utilisé

Il y eu une époque ou pour une même page je voulais afficher un peu plus d’informations que ce que permettait le format, pour un produit par exemple. Utiliser un format recette permettait mieux de faire ressortir l’image du produit, et de mettre d’autres informations. Du coup on pouvait être plus inventif sur les accroches 😉

Mais ça google il ne rigole plus du tout avec ça. Je pense être un des 1er a avoir eu une péna manuel au rich-snippet, le site n’a pas été dévalué car sur un seul article, mais google devient plus virulent.

Comment être plus visible dans les résultats naturel avec le balisage microdonnées ?

Afficher un bloc avec image et un lien vers son contenu, c’est de la visibilité et des concurrent qui sont poussé plus bas dans la page. Obtenir la position 0, oui tout ça google peut le mettre en avant quand il trouve le contenu pertinent, mais c’est quand même plus sûr d’aider le hazard que de laisser google se dépatouiller avec des milliard de contenus à analyser. Quand vous avez une masse d’information, comment vous y prenez-vous ? Vous allez d’abord faire un pré-tri.

Générateur de rich snippet

Avant de parler en détail les différentes possibilité de balisage de contenu et leur affichage dans les serp, voici quelques générateurs de rich-snippet utilisables en ligne.

https://www.internetmarketingninjas.com/tools/free-tools/category/schema-generators

https://technicalseo.com/tools/schema-markup-generator/

Générateur rich-snippet wordpress

Pour ceux qui ont wordpress, il existe des plugins spécifiques pour baliser des contenus, mais la plupart du temps c’est géré par les thèmes ou les plugin, par exemple en utilisant woocommerce le balisage pour les produits est inclus dans le plugin.

https://wordpress.org/plugins/search/rich+snippet/

Le balisage rich snippet, lequel choisir en 2021 ?

Les rich-snippet peuvent être balisé dans un contenu dans 3 formats différents :

• Microdonnées
• Json-ld
• RDF-a

Les microdonnées

Vous allez utiliser des balises pour indiquer certains éléments dans votre code html avec un attribut itemprop

• Pour créer un objet, on utilise l’attribut itemscope
• Pour ajouter une propriété, on utilise l’attribut itemprop sur l’un des descendants.

On sait que cela consomme beaucoup plus de temps à google d’aller analyser le contenu de vos pages, et parfois vous avez du code additionnel qui s’ajoute dans votre contenu et qui peut invalider votre code. Par exemple lorsque je faisais des thèmes magento, le balisage fonctionnait bien, mais si on changeait pour afficher la tva, ou un bloc promo, cela modifiait la hiérarchie et du coup ça ne marchait plus.

Balisage rich-snippet avec json-ld

Si google ne devait choisir qu’un seul format à garder aujourd’hui, ce serait json-ld. Il s’agit d’un balisage via javascript. L’avantage, c’est que google n’a pas à se taper tout le contenu avant de se faire une idée de ce qu’il va trouver dans la page. Ca ressemble à ça. Lorsque l’on regarde la doc de google pour amp, il ne parlent que de json-ld. L’avantage, c’est que l’on évite la contrainte de balisage hiérarchique html. On choisi un type de schéma et on renseigne les informations.

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00"
    }
    </script>

https://json-ld.org/

Les types de rich-snippet

Il existe plusieurs types de rich-snippet que google affiche dans les résultats de la page de recherche. Le balisage permet d’en faciliter la détection et l’affichage. Voici les rich-snippet courant qui peuvent améliorer votre visibilité en bénéficiant d’un affichage enrichi et qui sont disponibles en France (oui y’en a qui ne sont dispo qu’aux US)

Rich-snippet article

Google peut afficher un contenu balisé avec le schema « article » dans les top story. il s’agit d’article d’actualité, sportif ou de blog qui seront affiché dans le carrousel « À la une » et accompagné de fonctionnalités disponibles dans les résultats enrichis, telles que le texte du titre et des images plus grandes que des vignettes, et un horodatage de l’information

Rich-snippet Breadcrumb (fil d’ariane)

Google affichera le fil d’ariane au niveau de l’url un fil d’ariane, cela permet à l’utilisateur de cliquer directement dans une sous-catégorie.

Rich-snippet Carroussel

En fait il ne s’agit pas d’un type de contenu balisé en particulier, mais d’un type d’affichage. Dedans on peut y afficher des rich-snippet film, recette, restaurant

Rich-snippet Recette

Là on a un exemple de recette en caroussel, il affiche le nom de la recette, le temps de préparation et combien de calories, ainsi

Et là un rich-snippet recette en ligne

Rich-snippet Event (évènements, concerts,festivals, salons, séminaires)

C’est un rich-snippet qui s’affiche pour des évènements, c’est adapté pour les sites qui organisent ou relaient des évènements comme des concerts, des festivals, des pièces de théatre. Ils affichent le nom de l’évènement, la date de début et de fin, et le lieu, une photo d’illustration.

Rich-snippet produit

C’est celui qui est le plus courant, le st graal pour les e-commerçant, et pour lequel google a fait pas mal d’effort pour les mettre en avant par rapport à des contenus de blog ou autre. Cela ne vous garanti pas d’être bien placé, vous pouvez avoir un rich snippet et être en 100ème page d’une requête, mais google affichera plus d’informations:

Le nom du produit, le fil d’ariane, la notation moyenne, le nombre de vote, le prix et si le produit est en stock.

Rich-snippet FAQ

Les rich-snipet faq font apparaitre des blocs différencié sous le résultat naturel du site.

Exemple :

<html>
  <head>
    <title>Example Site - Frequently Asked Questions(FAQ)</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [{
        "@type": "Question",
        "name": "What is the return policy?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Most unopened items in new condition and returned within <strong>90 days</strong> will receive a refund or exchange. Some items have a modified return policy noted on the receipt or packing slip. Items that are opened or damaged or do not have a receipt may be denied a refund or exchange. Items purchased online or in-store may be returned to any store.<br /><p>Online purchases may be returned via a major parcel carrier. <a href=http://example.com/returns> Click here </a> to initiate a return.</p>"
        }
      }, {
        "@type": "Question",
        "name": "How long does it take to process a refund?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "We will reimburse you for returned items in the same way you paid for them. For example, any amounts deducted from a gift card will be credited back to a gift card. For returns by mail, once we receive your return, we will process it within 4–5 business days. It may take up to 7 days after we process the return to reflect in your account, depending on your financial institution's processing time."
        }
      }, {
        "@type": "Question",
        "name": "What is the policy for late/non-delivery of items ordered online?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Our local teams work diligently to make sure that your order arrives on time, within our normaldelivery hours of 9AM to 8PM in the recipient's time zone. During  busy holiday periods like Christmas, Valentine's and Mother's Day, we may extend our delivery hours before 9AM and after 8PM to ensure that all gifts are delivered on time. If for any reason your gift does not arrive on time, our dedicated Customer Service agents will do everything they can to help successfully resolve your issue. <br/> <p><a href=https://example.com/orders/>Click here</a> to complete the form with your order-related question(s).</p>"
        }
      }, {
        "@type": "Question",
        "name": "When will my credit card be charged?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "We'll attempt to securely charge your credit card at the point of purchase online. If there's a problem, you'll be notified on the spot and prompted to use another card. Once we receive verification of sufficient funds, your payment will be completed and transferred securely to us. Your account will be charged in 24 to 48 hours."
        }
      }, {
        "@type": "Question",
        "name": "Will I be charged sales tax for online orders?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text":"Local and State sales tax will be collected if your recipient's mailing address is in: <ul><li>Arizona</li><li>California</li><li>Colorado</li></ul>"}
        }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

Rich-snippet How-to (idéal pour créer des tutoriaux)

Le balisage How-to et un balisage qui permet de faire apparaître les rich-snippet de plusieurs façon : Un caroussel, une liste de bullet point. Pour moi le how-to lorsqu’il apparaît peut être une bonne source de trafic si vous mettez plus d’étape que ce que google peut en afficher 😉

Rich-snippet local business (établissement local)

SI il y a un rich-snippet a optimiser c’est bien celui-ci qui servira pour le référencement local. Mais en général c’est plus efficace de le remplir via Google my business plutôt que d’attendre que celui-ci soit pris en compte. On a parlé des étoiles de remonté d’avis, celle en haut de la fiche sont celles de google, mais plus bas, elle peuvent afficher des avis récupéré par facebook. J’ai un annuaire pour le local qui peuvent remonter dessus, je vous tien au courant dès que j’ai corrigé les bugs.

Est-ce que google va afficher mon rich-snippet ?

Testez votre site avec le validateur de rich-snippet de schema.org, vous pourrez vérifier qu’il ne manque pas d’informations obligatoire dans votre schema.

Mindmap complet Schema.org : Les types de choses (Things)