Intégrer les avis clients produit de Prestashop en Json-Ld pour les données structurées

C’est un sujet très important mais assez complexe à mettre en place. Les données structurées vont permettre l’affichage des avis dans les résultats de recherche. Aujourd’hui, il est recommandé par Google d’utiliser Json-Ld. Je vous explique comment j’ai pu l’installer dans un Prestashop 1.7 et valider ainsi les problèmes dans Search Console.

Avant ce projet, je n’avais jamais intégré de script de ce type. Peut-être qu’il y aurait des choses à améliorer. Alors n’hésitez pas à partager en commentaire, des retours et des infos complémentaires qui pourraient aider la communauté 🙂

Pourquoi utiliser les données structurées pour les avis client ?

Elles permettent notamment à Google de capter les informations de votre site pour afficher ces informations dans les résultats de recherche.

Dans le cadre de cet article, cela va nous permettre de bien faire remonter les avis sous vos métas. Sous le résultat d’un produit, dans la serp, l’affichage des avis sera un élément de réassurance supplémentaire.

Voici le rendu qui va être possible :

Je vais me concentrer sur les avis mais si vous voulez en savoir plus sur les données structurées, je vous invite à lire ceci : Comprendre le fonctionnement des données structurées.

Doit-on gérer les données structurées via Json-Ld dans Prestashop ?

Si j’écris cet article, c’est parce que j’ai rencontré ce problème. Pour un de mes projets Prestashop réalisé sur-mesure, je suis parti avec comme base, le thème Classic Rocket.

Ce thème intègre les données structurées en json/ld dans un fichier tpl.

Cependant, ce n’est pas le cas de tous les thèmes, peut-être que le votre utilise le format microdonnées. Il faut s’adapter à la structure de votre thème.

Vous pouvez si vous le souhaitez, modifier tout votre thème pour passer de microdonnées à json/ld, c’est juste un peu plus de boulot !

Google recommande ce format et mon thème l’utilise donc génial ! Mais… La plupart des modules Prestashop ne le sont pas.

Dans ce projet, j’ai utilisé le module d’avis client : Commentaires avancés avec photos + Google rich snippets.

Pour le coup, il est adapté au Rich snippets mais il n’utilise pas les même données structurées que mon thème. Le module utilise les microdonnées HTML et cela ne fonctionnait pas. Le template Classic Rocket optimise les données produits en format Json-LD.

PS : J’ai fait remonter mon travail au développeur du module et du coup, j’espère qu’il le mettra à jour !

Utiliser les microdonnées html pour les données structurées dans Prestashop

Vous avez la possibilité d’utiliser les metas pour permettre d’optimisé votre fiche produit.

En plus des éléments de l’avis client pour corriger « offers », « aggregateRating », ou « review », vous devez aussi prendre en compte, « sku », « name », « price » etc

Pour le gérer en HTML dans Prestashop, je vous recommande de voir l’article et la vidéo de Webbax qui explique tout ça très bien : Prestashop 1.7 – SEO – Données structurées fiche produit (ép. 33)

Erreur d’extrait d’avis et champ itemReviewed manquant sur Search Console

Je continue à vous détailler mon aventure en vous montrant les erreurs que j’avais dans la console Google.

Les produits avec un avis, généraient une erreur dans l’outil. En plus de cela, la donnée itemReviewed n’était pas présente dans le Prestashop.

Je ne comprenais pas pourquoi j’avais cette erreur. C’est le développeur du module d’avis qui m’a expliqué que le thème gérait cela en json-ld et que ce n’était pas compatible.

J’ai donc commencé à réfléchir à comment corriger cela. D’ailleurs, merci à Adonis de Presta Rocket de m’avoir mis sur une piste d’ailleurs !

Application des avis clients en json-ld dans Prestashop

J’ai fait pas mal de recherches et j’ai aussi suivi les recommandations Google à partir de cette page : Google Extrait d’avis.

C’est très bien expliqué mais j’avais 2 problèmes pour avoir un script optimisé :

• Les avis sont générés depuis un module non natif à Prestashop
• Il faut créer un loop pour afficher les différents avis dans le script (et ne pas créer autant de script que d’avis)

J’ai donc placé mon script json-ld dans un fichier tpl que j’appelle ainsi dans le module comme ceci :

{block name='page_content'}
    {include file="themes/nomdevotretheme/templates/_partials/product-microdata-jsonld.tpl"}   
{/block}  

Voici ce que j’ai utilisé ci-dessous dans un de mes fichiers du module.

Ligne 37 : J’affiche les données structurées uniquement aux produits qui disposent d’un avis.
Ligne 47 : J’ai le début de mon foreach pour permettre l’affichage de tous les avis à la suite.
Ligne 64 : J’utilise @last en smarty pour ne pas avoir de virgule au dernier élément du foreach. Dans le script, si vous laissez la virgule au dernier avis, vous aurez une erreur dans search console.

Attention certaines variables sont uniques à ce module et donc pas valables pour votre site Prestashop peut-être (ligne 37 à 71).

{if isset($product) && $page.page_name == 'product'}
    <script type="application/ld+json">
    {
    "@context": "http://schema.org/",
    "@type": "Product",
    "name": "{$product.name}",
    "description": "{$page.meta.description}",
    "category": "{$product.category_name}",
    {if isset($product.cover)}"image" :"{$product.cover.bySize.home_default.url}",{/if}
    {if $product.reference}"sku": "{$product.reference}",{/if}
    {if $product.ean13}
      "gtin13": "{$product.ean13}",
    {else if $product.upc}
      "gtin13": "0{$product.upc}",
    {else if $product.isbn}
      "isbn": "{$product.isbn}",
    {else if $product.reference}
      "mpn": "{$product.reference}",
    {/if}
    {if $product_manufacturer->name OR $shop.name}"brand": {
        "@type": "Thing",
        "name": "{if $product_manufacturer->name}{$product_manufacturer->name|escape:'html':'UTF-8'}{else}$shop.name{/if}"
    },{/if}
    {if isset($nbComments) && $nbComments && $ratings.avg}"aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "{$ratings.avg|round:1|escape:'html':'UTF-8'}",
        "reviewCount": "{$nbComments|escape:'html':'UTF-8'}"
    },{/if}
    {if isset($product.weight) && ($product.weight != 0)}
    "weight": {
        "@context": "https://schema.org",
        "@type": "QuantitativeValue",
        "value": "{$product.weight}",
        "unitCode": "{$product.weight_unit}"
    },{/if}
    
    {*{if empty($combinations)}*}
    {if $comments}
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "{if isset($ratings.avg)}{$ratings.avg|round:1|escape:'html':'UTF-8'}{else}{$averageReview|round:1|escape:'html':'UTF-8'}{/if}",
            "ratingCount": "{$nbReviews|escape:'htmlall':'UTF-8'}",
            "bestRating": "5",
            "worstRating": "1"
        },
        "review": [
        {foreach from=$comments item=comment} 
            {if $comment.content}
                {

                    "@type": "Review",
                    "author": {
                        "@type": "Person",
                        "name": "{$comment.customer_name|escape:'html':'UTF-8'}"
                    },
                    "datePublished": "{$comment.date_add|escape:'html':'UTF-8'|substr:0:10}",
                    "reviewRating": {
                        "@type": "Rating",
                        "description": "{$comment.content|nl2br nofilter}",
                        "ratingValue": "{$comment.grade|escape:'html':'UTF-8'}",
                        "bestRating": "5",
                        "worstRating": "1"
                }
                {if $comment@last}
                    }
                {else}
                    },
                {/if}  
            {/if}
        {/foreach}
        ],
    {/if}
  {if $product.show_price}
    "offers": {
        "@type": "Offer",
        "priceCurrency": "{$currency.iso_code}",
        "name": "{$product.name|strip_tags:false}",
        "price": "{$product.price_amount}",
        "url": "{$product.url}",
        "priceValidUntil": "{($smarty.now + (int) (60*60*24*15))|date_format:"%Y-%m-%d"}",
        {if $product.images|count > 0}
        "image": {strip}[
        {foreach from=$product.images item=p_img name="p_img_list"}
        "{$p_img.large.url}"{if not $smarty.foreach.p_img_list.last},{/if}
        {/foreach}
        ]{/strip},
        {/if}
        {if $product.ean13}
        "gtin13": "{$product.ean13}",
        {else if $product.upc}
        "gtin13": "0{$product.upc}",
        {else if $product.isbn}
          "isbn": "{$product.isbn}",
        {else if $product.reference}
          "mpn": "{$product.reference}",
        {/if}
        "sku": "{$product.reference}",
        {if $product.condition == 'new'}"itemCondition": "http://schema.org/NewCondition",{/if}
        {if $product.show_condition > 0}
        {if $product.condition == 'used'}"itemCondition": "http://schema.org/UsedCondition",{/if}
        {if $product.condition == 'refurbished'}"itemCondition": "http://schema.org/RefurbishedCondition",{/if}
        {/if}
        "availability":{if $product.quantity > 0 || $product.allow_oosp > 0} "http://schema.org/InStock"{else} "http://schema.org/OutOfStock"{/if},
        "seller": {
            "@type": "Organization",
            "name": "{$shop.name}"
        }
    }
    {/if}
}


    </script>
{/if}

Un outil de test d’URL des données structurées en direct

Tout au long de mon intervention j’ai travaillé avec un outil Google qui permet de vérifier depuis une URL si tout est ok au niveau des données.

Cela est très utile avant de lancer une correction depuis Search console qui peut s’avérer inutile.

Voici le lien de l’outil : Test des résultats enrichis

Erreur d’analyse : Symboles “,” ou “}” manquants sur Prestashop

Il est important d’utiliser cet outil de test au dessus pour ne pas avoir cette erreur au moment de lancer une validation par Google.

S’il est apparaît, cela veut dire qu’aucune donnée ne va remonter dans la search console parce qu’il y a un problème de script.

Il faut faire très attention aux virgules et aux accolades. Chercher l’erreur peut vous rendre fou !

C’est pour cela que j’expliquais plus haut que j’avais mis une condition smarty pour ne pas avoir de virgule à la fin de ma loop. Sans ça, j’avais une erreur dans mon script.

Vérifiez ligne par ligne votre script pour trouver l’erreur. N’hésitez pas à supprimer certains éléments, re-tester sur l’outil, remettre les éléments etc.

Une fois corrigé, demandez une nouvelle validation :

Résultat après la correction d’extrait d’avis Prestashop dans Google

En utilisant l’outil au-dessus, j’ai pu constater que l’ensemble des données étaient ok.

Le but est de ne plus avoir d’erreurs. Les avertissements ne posent pas de problème pour votre SEO. Dans le cadre du screenshot ci-dessous, c’est parce que les produits ne disposent pas de référence / sku, d’où ces avertissements.

Voici le résultat :

Dans extraits d’avis, j’ai autant de ligne que d’avis sur le produit.

J’espère en tout cas que c’est la bonne méthode.

S’il y a des experts SEO qui passent par là et qui savent bien gérer les données structurées, dites moi votre avis en commentaire. Cela me permet de répondre, mettre à jour l’article et échanger avec les utilisateurs.