Comment intégrer des Rich Snippets (Extraits Enrichis) sur Webflow ?

Vous souhaitez augmenter votre visibilité ou augmenter votre taux de clic dans les résultats de recherche Google ? Découvrez comment ajouter des Rich Snippets facilement sur Webflow.

Blog
SEO
Comment intégrer des Rich Snippets (Extraits Enrichis) sur Webflow ?

Qu'est-ce que les Rich Snippets ?

Définition

Les Rich Snippets ou Extraits Enrichis en français, sont des contenus (textes ou images) de votre site, qui viendront s'afficher directement dans les résultats de recherche Google. Ces résultats enrichis permettent de compléter un résultat de recherche (comme les étoiles de notation) ou de présenter un extrait de votre contenu.

Voici un exemple d'extrait enrichis dans les résultats de recherche Google lorsque l'on renseigne "recette crêpe".

exemple de rich snippets (extraits enrichis) dans les résultats de recherche google
Illustration des Rich Snippets dans les résultats de recherche Google sur la requête "recette crêpe"

Dans cet exemple, on observe que le second lien du site Marmiton, présente un extrait enrichi des notations, du nombre d'avis, du temps de préparation et des liens d'accès.

En dessous de ce lien, on remarque qu'il y a un espace dédié aux recettes.
Les 3 recettes présentées sont issues des Rich Snippets.

Les différents types d'extraits enrichis (Rich snippets)

Il existe de nombreux Rich snippets que vous pouvez consulter sur le site Schema.org si vous souhaitez approfondir le sujet.

Vous pouvez également consulter la galerie de la recherche google pour vous illustrer les différents extraits.

Parmi les Rich Snippets les plus utilisés, on retrouve :

  • Recipe : pour des recettes de cuisine
  • Event : pour des événements comme une pièce de théâtre
  • FAQ : Foire aux questions
  • How-to : Décrire les étapes d'un processus
  • Article : pour un article de presse ou de blog
  • Product : pour un produit physique
  • Book : pour un livre
  • Job posting : des offres d'emploi
  • Local Business : informations sur une entreprise
  • Carrousel : Affiche une galerie de contenus (recette, cours, restaurant ou un Film)

Conseils d'utilisation

Avant d'intégrer sur votre site des Rich Snippets, sachez qu'ils ne vous garantissent pas d'apparaitre dans les résultats de recherche. Google reste le seul à décider de mettre en avant ou non vos résultats enrichis.

Lorsque vous intégrez des extraits enrichis, vous devez vous assurer que les contenus balisés, apparaissent également sur votre page.

Veillez à bien spécifier l'ensemble des propriétés d'un résultat enrichi. Si par exemple vous utilisez le snippet Recipies pour afficher une recette et vous oubliez de renseigner la mention obligatoire du temps de préparation, vos résultats n'apparaitront pas.

Attention, les résultats enrichis ne doivent pas être utilisés si votre contenu ne correspond pas avec l'objet du Rich snippets. Par exemple, si vous souhaitez mettre en avant vos services en utilisant l'extrait enrichi Produit, vous risquez de recevoir une pénalité de Google comme il est indiqué dans les consignes relatives à l'utilisation du balisage des Produits.

Si vous souhaitez en savoir plus sur les consignes de Google en matière d'utilisation des Rich snippets, n'hésitez pas à consulter cette page.

Intégrer des Rich Snippets sur Webflow

Sur Webflow, vous pouvez intégrer des extraits enrichis de deux manières : en dynamique ou en statique. Dans un cas, comme dans l'autre, la méthode pour les ajouter sur webflow est la même.

Voici comment ajouter des extraits enrichis sur votre site webflow :

  1. Préparer le code des données structurées
  2. Intégrer le code dans Webflow
  3. Vérifier la conformité de vos Rich snippets

1 - Préparer le code des données structurées

Dans un premier temps, vous devez importer dans Webflow, les propriétés du Rich Snippets que vous souhaitez utiliser pour vos contenus. Ces propriétés, sont accessibles sur le site Schema.org. Si vous n'êtes pas à l'aise, vous pouvez utiliser des générateurs de données structurées comme celui-ci. Avec ce générateur, vous n'aurez qu'à renseigner vos contenus puis à copier le code pour l'insérer dans la balise <head> de votre page.

Exemple d'un générateur de données structurées
Générateur de données structurées

Dans l'exemple d'un extrait enrichi d'une recette, voici le code à intégrer avec les propriétés :

rich snippet ou extrait enrichi d'une recette de cuisine
Données structurées pour une recette de crêpes

2 - Intégrer le code dans Webflow

Une fois que vous aurez copié les propriétés du Rich snippets que vous souhaitez utiliser, importez les dans le head de votre page sur Webflow.

Rich snippets générés avec des données statiques

Si vos données ne sont pas générées par un une collection, vous devez les intégrer en statiques.

extrait enrichi avec des données statiques sur webflow
Extrait enrichi de données statiques

Rich Snippets générés avec des données dynamiques

Si vos données sont générés par une collection CMS, utilisez cette méthode pour l'appliquer à toutes vos pages d'un coup.

extrait enrichi avec des données dynamiques sur webflow
Extrait enrichi de données dynamiques

3 - Vérifier que vos extraits enrichis soient conformes

Pour vérifier la conformité de ses données structures, vous pouvez utiliser cet outil de Google, spécialement conçu à cet effet.

Un projet ?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Louis Santoni
Content Manager