Le balisage Schema.org Product permet à Google d'afficher le prix, les avis et la disponibilité de votre produit ou service directement dans les résultats de recherche. Un levier puissant pour améliorer le taux de clic sur vos pages commerciales. Sandro, cofondateur de l'agence Webflow Gemeos, vous explique comment l'implémenter.

Prérequis

Une page produit ou service sur votre site Webflow
Un prix défini (ou une fourchette de prix)
Idéalement des avis clients avec note chiffrée

1. Créez le script JSON-LD Product

Voici le template complet. Adaptez chaque valeur à votre produit ou service. Pour un service sans prix fixe, utilisez le champ "description" uniquement et omettez "offers".

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Nom de votre produit ou service",
  "description": "Description courte du produit.",
  "image": "https://votresite.com/image-produit.jpg",
  "brand": {
    "@type": "Brand",
    "name": "Votre marque"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "24"
  },
  "offers": {
    "@type": "Offer",
    "price": "1500",
    "priceCurrency": "EUR",
    "availability": "https://schema.org/InStock"
  }
}
</script>

2. Collez le script dans les paramètres de la page

Dans Webflow Designer, ouvrez la page produit concernée. Accédez aux paramètres de page (engrenage), puis "Custom Code". Collez dans "Before </body> tag". Publiez le site.

3. Vérifiez avec le Rich Results Test

Testez l'URL de votre page dans le Rich Results Test. Vérifiez que le type "Product" est bien détecté et qu'aucun champ obligatoire n'est manquant. Les erreurs les plus fréquentes : image manquante, currency mal formatée, ratingValue hors de la plage 1-5.

Champ	Obligatoire	Format attendu
name	Oui	Texte libre
image	Recommandé	URL absolue
offers.price	Recommandé	Nombre sans symbole (ex: 1500)
offers.priceCurrency	Recommandé	Code ISO 4217 (EUR, USD...)
aggregateRating.ratingValue	Optionnel	Nombre entre 1 et 5
aggregateRating.reviewCount	Si rating présent	Nombre entier

Conclusion

Le rich snippet Product est particulièrement efficace sur les pages de services avec tarification et sur les pages de produits physiques. Il augmente la confiance avant même le clic.

Cas d'usage 1 : page de prestation d'agence avec fourchette tarifaire affichée dans Google
Cas d'usage 2 : page produit SaaS avec note moyenne des utilisateurs
Cas d'usage 3 : page formation avec prix et nombre d'inscrits en rich snippet

Comment ajouter un rich snippet Product (Schema.org) dans Webflow ?

Prérequis

1. Créez le script JSON-LD Product

2. Collez le script dans les paramètres de la page

3. Vérifiez avec le Rich Results Test

Conclusion

Tutoriels similaires

Comment créer un rich snippet FAQ avec Schema.org dans Webflow ?

Comment ajouter un rich snippet Article (Schema.org) dans Webflow ?

Comment gérer les balises hreflang sur un site multilingue Webflow ?

Prêt à faire décoller
votre activité ?

Prérequis

1. Créez le script JSON-LD Product

2. Collez le script dans les paramètres de la page

3. Vérifiez avec le Rich Results Test

Conclusion

Tutoriels similaires

Comment créer un rich snippet FAQ avec Schema.org dans Webflow ?

Comment ajouter un rich snippet Article (Schema.org) dans Webflow ?

Comment gérer les balises hreflang sur un site multilingue Webflow ?

Prêt à faire décoller votre activité ?

Prêt à faire décoller
votre activité ?