Nous utilisons les cookies afin de fournir les services et fonctionnalités proposés sur notre site et afin d’améliorer l’expérience de nos utilisateurs. Pour plus d'informations nous vous invitons à consulter notre Politiques sur les cookies ainsi que notre Politique de confidentialité.

Rich Snippet pour une fiche produit

Rich Snippet pour une fiche produit avec microdonnées

Les rich snippets permettent d'améliorer l'affichage des pages produits dans les résultats de recherche en fournissant des informations détaillées sous forme de données structurées.

Ce tutoriel explique comment implémenter un rich snippet pour une fiche produit en utilisant le format microdonnées de Schema.org.

1. Structure de base

Nous utilisons l'élément <div> avec l'attribut itemscope et itemtype="https://schema.org/Product" pour définir notre produit.

<div itemtype="https://schema.org/Product" itemscope>

2. Informations essentielles sur le produit

Chaque produit possède un nom, une description, un identifiant unique (MPN) et plusieurs images.

<meta itemprop="mpn" content="925872" /> <!-- Numéro de pièce du fabricant -->
<meta itemprop="name" content="My product" /> <!-- Nom du produit -->
<link itemprop="image" href="https://example.com/photos/16x9/photo.jpg" />
<meta itemprop="description" content="My product description" /> <!-- Description du produit -->

3. Offre et prix

Le produit peut être lié à une offre commerciale avec un prix, une disponibilité et des conditions.

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <link itemprop="url" href="https://example.com/myproduct" /> <!-- Lien vers la fiche produit -->
    <span itemprop="priceCurrency" content="EUR">€</span>
    <meta itemprop="itemCondition" content="https://schema.org/UsedCondition" /> <!-- État du produit -->
    <span itemprop="price" content="50">50</span> <!-- Prix du produit -->
    <link itemprop="availability" href="http://schema.org/InStock" /> <!-- Disponibilité -->
    <div itemprop="priceSpecification" itemscope itemtype="http://schema.org/PriceSpecification">
        <meta itemprop="priceCurrency" content="EUR">
        <meta itemprop="price" content="100">
        <meta itemprop="valueAddedTaxIncluded" content="true"> <!-- TVA incluse -->
        <meta itemprop="validFrom" content="2024-01-01T00:00:00+01:00"> <!-- Date de début de validité -->
        <meta itemprop="validThrough" content="2024-12-31T23:59:59+01:00"> <!-- Date de fin de validité -->
    </div>
</div>

4. Notes et avis

Ajouter une note moyenne et le nombre d'avis permet d'afficher des étoiles dans les résultats Google.

<div itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope>
    <meta itemprop="reviewCount" content="89" /> <!-- Nombre total d'avis -->
    <meta itemprop="ratingValue" content="4.4" /> <!-- Note moyenne -->
</div>

Un avis détaillé peut être ajouté avec une notation individuelle.

<div itemprop="review" itemtype="https://schema.org/Review" itemscope>
    <div itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope>
        <meta itemprop="ratingValue" content="4" /> <!-- Note attribuée -->
        <meta itemprop="bestRating" content="5" /> <!-- Note maximale -->
    </div>
</div>

5. Informations supplémentaires

Nous pouvons également inclure le SKU (référence produit chez le marchand) et la marque du produit.

<meta itemprop="sku" content="myreference34535" /> <!-- Référence produit chez le marchand -->
<div itemprop="brand" itemtype="https://schema.org/Brand" itemscope>
    <meta itemprop="name" content="mybrand" /> <!-- Nom de la marque -->
</div>

Conclusion

Ce rich snippet bien structuré permet d'améliorer la visibilité de votre produit sur Google. Pensez à tester votre balisage avec l'outil de test des résultats enrichis de Google pour vérifier qu'il est bien interprété !

Code complet du rich snippet produit

<div itemtype="https://schema.org/Product" itemscope>
    <meta itemprop="mpn" content="925872" />
    <meta itemprop="name" content="My product" />
    <link itemprop="image" href="https://example.com/photos/16x9/photo.jpg" />
    <meta itemprop="description" content="My product description" />
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <link itemprop="url" href="https://example.com/myproduct" />
        <span itemprop="priceCurrency" content="EUR">€</span>
        <meta itemprop="itemCondition" content="https://schema.org/UsedCondition" />
        <span itemprop="price" content="50">50</span>
        <link itemprop="availability" href="http://schema.org/InStock" />
        <div itemprop="priceSpecification" itemscope itemtype="http://schema.org/PriceSpecification">
            <meta itemprop="priceCurrency" content="EUR">
            <meta itemprop="price" content="100">
            <meta itemprop="valueAddedTaxIncluded" content="true">
            <meta itemprop="validFrom" content="2024-01-01T00:00:00+01:00">
            <meta itemprop="validThrough" content="2024-12-31T23:59:59+01:00">
        </div>
    </div>
    <div itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope>
        <meta itemprop="reviewCount" content="89" />
        <meta itemprop="ratingValue" content="4.4" />
    </div>
    <div itemprop="review" itemtype="https://schema.org/Review" itemscope>
        <div itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope>
            <meta itemprop="ratingValue" content="4" />
            <meta itemprop="bestRating" content="5" />
        </div>
    </div>
    <meta itemprop="sku" content="myreference34535" />
    <div itemprop="brand" itemtype="https://schema.org/Brand" itemscope>
        <meta itemprop="name" content="mybrand" />
    </div>
</div>
Vous désirez un site internet pour vous ou votre entreprise ? contactez-nous !
Haut de la page