Implementing Structured Data on Shopify for Rich Results

Step-by-step guide to implementing Product, Review, FAQ, and BreadcrumbList schema markup on Shopify to earn rich results and improve click-through rates.

E
ECOSIRE Research and Development Team
|19 mars 202614 min de lecture3.2k Mots|

Implémentation de données structurées sur Shopify pour des résultats riches

Les résultats riches (évaluations des produits, affichages des prix, listes déroulantes de FAQ et fils d'Ariane dans les résultats de recherche) capturent 20 à 30 % de clics en plus que les liens bleus standard. Pour les commerçants Shopify, les données structurées sont le mécanisme qui débloque ces formats améliorés, et l'écart de mise en œuvre entre les magasins qui disposent des bons résultats et ceux qui ne les ont pas se traduit directement en revenus.

Ce guide couvre tous les types de schémas pertinents pour les boutiques Shopify : comment le mettre en œuvre correctement, les erreurs courantes qui vous disqualifient des résultats enrichis et comment valider votre mise en œuvre sur l'ensemble de votre catalogue.

Points clés à retenir

  • Le schéma de produit avec AggregateRating obtient des notes par étoiles dans les SERP – généralement une augmentation du CTR de 15 à 25 %
  • Les prix et la disponibilité dans le schéma doivent correspondre exactement aux valeurs affichées, sinon Google supprime l'éligibilité aux résultats enrichis.
  • Le schéma BreadcrumbList peut remplacer le chemin de l'URL dans les résultats de recherche par des étiquettes de navigation lisibles
  • Le schéma FAQPage double votre espace SERP pour les requêtes informationnelles et commerciales
  • JSON-LD est le format préféré de Google et le seul format pris en charge pour l'injection dynamique de données
  • Les erreurs de données structurées dans la Search Console peuvent prendre 2 à 4 semaines pour être résolues après la correction.
  • Le thème par défaut de Shopify inclut un schéma minimal — un travail de mise en œuvre important reste à faire  – Le flux de données produit Merchant Center et le schéma sur la page doivent être cohérents pour éviter les pénalités.

Comment fonctionnent les données structurées sur Shopify

Les données structurées sont des métadonnées lisibles par machine intégrées dans le HTML de votre page qui indiquent précisément aux moteurs de recherche quel type de contenu se trouve sur la page. Sans cela, Google déduit le contenu de votre page à partir du texte, des liens et des signaux – un processus flou. Grâce à des données structurées précises, Google peut présenter votre produit en toute confiance dans des formats de résultats riches.

Le thème Dawn par défaut de Shopify comprend le schéma de base Product avec name, description, image et offers.price. Cela vous donne une base mais manque des propriétés critiques qui débloquent l'éligibilité complète aux résultats riches :

  • AggregateRating (notes par étoiles dans les résultats)
  • brand de type Organization ou Brand
  • offers.availability comme URL schema.org
  • offers.priceCurrency (code de devise explicite)
  • offers.shippingDetails
  • BreadcrumbList (bloc de schéma séparé)

Chaque propriété supplémentaire que vous implémentez augmente la probabilité que Google présente votre fiche dans des formats riches.

JSON-LD vs microdonnées vs RDFa

JSON-LD (JavaScript Object Notation for Linked Data) est la méthode de mise en œuvre recommandée par Google et l'approche la plus maintenable. Contrairement aux microdonnées, qui nécessitent d'encapsuler des éléments HTML avec des attributs de schéma, JSON-LD est un bloc de script autonome qui peut être injecté sans modifier le balisage de votre page. Utilisez toujours JSON-LD pour les nouvelles implémentations de Shopify.


Schéma du produit : mise en œuvre complète

Le schéma de produit constitue la base des données structurées du commerce électronique Shopify. Voici un modèle de schéma de produit complet et prêt pour la production :

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "{{ product.title | escape }}",
  "description": "{{ product.description | strip_html | truncate: 300 | escape }}",
  "url": "{{ shop.url }}{{ product.url }}",
  "sku": "{{ product.selected_or_first_available_variant.sku | escape }}",
  "mpn": "{{ product.selected_or_first_available_variant.barcode | escape }}",
  "image": [
    {% for image in product.images limit: 5 %}
      "{{ image | image_url: width: 1200 }}"{% unless forloop.last %},{% endunless %}
    {% endfor %}
  ],
  "brand": {
    "@type": "Brand",
    "name": "{{ product.vendor | escape }}"
  },
  "offers": {
    "@type": "Offer",
    "url": "{{ shop.url }}{{ product.url }}",
    "priceCurrency": "{{ cart.currency.iso_code }}",
    "price": "{{ product.selected_or_first_available_variant.price | money_without_currency | remove: ',' }}",
    "priceValidUntil": "{{ 'now' | date: '%Y' | plus: 1 }}-12-31",
    "availability": "{% if product.available %}https://schema.org/InStock{% else %}https://schema.org/OutOfStock{% endif %}",
    "itemCondition": "https://schema.org/NewCondition",
    "seller": {
      "@type": "Organization",
      "name": "{{ shop.name | escape }}"
    }
  }
  {% if product.metafields.reviews.rating %}
  ,"aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "{{ product.metafields.reviews.rating.value }}",
    "reviewCount": "{{ product.metafields.reviews.rating_count }}",
    "bestRating": "5",
    "worstRating": "1"
  }
  {% endif %}
}

Implémentation dans Shopify

Ajoutez ce bloc de script à votre fichier product.liquid ou product-template.liquid à l'intérieur d'une balise <script type="application/ld+json">. Placez-le dans la section <head> ou immédiatement avant </body> — Google traite les deux positions de la même manière.

Champs critiques et pourquoi ils sont importants :

PropriétéPourquoi c'est importantErreur courante
priceObligatoire pour l'affichage des prix dans les résultatsY compris le symbole monétaire ou les virgules
priceCurrencyCode ISO 4217 (USD, EUR, GBP)Utiliser "$" au lieu de "USD"
availabilityURL Schema.org requise, pas de chaîne de texteUtiliser « En stock » au lieu de l'URL
imageTableau préféré ; plusieurs images améliorent l'éligibilitéUtiliser des URL relatives
skuObligatoire pour la correspondance Google Merchant CenterLaisser vide pour les produits sans SKU

AggregateRating : obtenir des notes par étoiles dans les résultats de recherche

Les notes par étoiles sont le résultat riche le plus visible pour les pages de produits Shopify. Ils nécessitent un schéma AggregateRating imbriqué dans votre schéma Product.

Conditions d'éligibilité au classement par étoiles :

  1. La notation doit être basée sur de vrais avis de clients – et non attribués de manière éditoriale
  2. ratingValue doit être compris entre 1 et la valeur bestRating
  3. reviewCount doit correspondre au nombre d'avis que vous affichez réellement sur la page
  4. Les avis doivent être visibles par les utilisateurs sur la même page

Applications d'évaluation Shopify populaires et compatibilité des schémas :

ApplicationSortie du schémaRemarques
Juge.moiProduit JSON-LD + AggregateRatingSortie de schéma de premier ordre
OkendoÉvaluation globale JSON-LDNécessite l'activation dans les paramètres
YotpoJSON-LD, mais souvent incompletVérifier les champs de prix et de disponibilité
LooxRevues de photos avec schéma limitéPeut nécessiter un supplément de schéma personnalisé
Estampillé.ioJSON-LD, configurableActiver les données structurées dans les paramètres de l'application

Vérification que le schéma d'évaluation est actif

Utilisez le test de résultats enrichis de Google sur une page de produit contenant des avis. Si le test montre AggregateRating avec un ratingValue et un reviewCount valides, vous êtes éligible au classement par étoiles. Remarque : l'éligibilité ne garantit pas l'affichage : Google détermine quand afficher les résultats enrichis de manière algorithmique.


Schéma BreadcrumbList pour le contexte de navigation

Le schéma BreadcrumbList indique à Google la hiérarchie de navigation de votre site pour une page donnée. Lorsque Google affiche cela dans les résultats de recherche, il remplace l'URL complète par des étiquettes de fil d'Ariane lisibles, ce qui améliore le CTR en rendant les résultats plus organisés et plus navigables.

Structure du fil d'Ariane de la page produit Shopify :

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ shop.url }}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ collection.title | escape }}",
      "item": "{{ shop.url }}{{ collection.url }}"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "{{ product.title | escape }}",
      "item": "{{ shop.url }}{{ product.url }}"
    }
  ]
}

Note d'implémentation : lorsqu'un produit appartient à plusieurs collections, le fil d'Ariane doit refléter la collection à partir de laquelle l'utilisateur a saisi. Dans Shopify Liquid, collection est disponible lorsque le produit est accessible via une URL de collection. Gérez le cas où collection est nul (accès direct à l'URL /products/) en incluant conditionnellement le fil d'Ariane de la collection.


Schéma de page FAQ pour les guides d'achat et les pages de produits

Le schéma FAQPage permet des listes déroulantes FAQ extensibles dans les résultats de recherche, doublant ainsi l'espace vertical occupé par votre annonce dans le SERP. Ceci est particulièrement précieux pour :

  • Pages produits avec les questions courantes des clients
  • Articles de blog du guide d'achat
  • Pages de collection avec FAQ au niveau des catégories
  • Pages de services et de politiques

Modèle de schéma FAQPage :

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What size should I order?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "We recommend sizing up if you are between sizes. See our size guide for measurements."
      }
    },
    {
      "@type": "Question",
      "name": "What is your return policy?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "We accept returns within 30 days of delivery for unused items in original packaging. Free return shipping is included."
      }
    }
  ]
}

Règles pour le schéma FAQPage :

  1. Les questions et réponses doivent être visibles sur la page – n'incluez pas de contenu masqué ou réduit
  2. Les réponses doivent être complètes (2 à 5 phrases) pour apporter une réelle valeur ajoutée
  3. N'utilisez pas le schéma FAQ pour le contenu promotionnel ou le texte d'appel à l'action déguisé en réponses
  4. Maximum de 10 éléments de FAQ par page pour un rendu net
  5. Les réponses ne doivent pas contenir de balisage HTML dans le champ du schéma text

Organisation et schéma du site Web

Ces schémas établissent l'entité de votre marque et activent le champ de recherche de liens annexes dans les résultats Google.

Schéma de l'organisation (à placer dans la page d'accueil <head>) :

{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "{{ shop.name | escape }}",
  "url": "{{ shop.url }}",
  "logo": {
    "@type": "ImageObject",
    "url": "{{ settings.logo | image_url: width: 200 }}"
  },
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-XXX-XXX-XXXX",
    "contactType": "customer service"
  },
  "sameAs": [
    "https://www.instagram.com/yourstore",
    "https://www.facebook.com/yourstore",
    "https://twitter.com/yourstore"
  ]
}

Schéma du site Web avec SearchBox de liens annexes :

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "{{ shop.name | escape }}",
  "url": "{{ shop.url }}",
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "{{ shop.url }}/search?q={search_term_string}"
    },
    "query-input": "required name=search_term_string"
  }
}

Le schéma SearchAction peut activer un champ de recherche dans votre liste Google SERP pour les recherches de marque, permettant aux utilisateurs de rechercher votre boutique directement à partir de la page de résultats.


Schéma vidéo pour les démonstrations de produits

Si vos pages de produits incluent des vidéos de démonstration, le schéma VideoObject peut générer des carrousels vidéo dans les résultats de recherche, ce qui est particulièrement utile pour les produits très prisés.

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "{{ product.title }} - Product Demo",
  "description": "Watch how {{ product.title }} works in this demonstration.",
  "thumbnailUrl": "{{ product.featured_image | image_url: width: 1280 }}",
  "uploadDate": "{{ product.created_at | date: '%Y-%m-%dT%H:%M:%S+00:00' }}",
  "contentUrl": "https://www.youtube.com/watch?v=YOUR_VIDEO_ID",
  "embedUrl": "https://www.youtube.com/embed/YOUR_VIDEO_ID"
}

Imbibez VideoObject dans votre schéma Product en utilisant la propriété subjectOf pour une richesse sémantique maximale.


Gestion des variantes de produits dans le schéma

Les produits Shopify avec plusieurs variantes (tailles, couleurs, matériaux) nécessitent une gestion minutieuse du schéma. Google recommande un schéma Product par page de produit (et non un par variante), mais doit refléter le prix et la disponibilité de la variante actuellement sélectionnée.

Stratégie de schéma de variantes dynamiques :

  1. Rendre le schéma côté serveur (via Liquid) en utilisant product.selected_or_first_available_variant pour le chargement initial de la page
  2. Utilisez JavaScript pour mettre à jour les valeurs price, availability et sku dans le JSON-LD lorsqu'une variante est sélectionnée
  3. Mettez à jour l'URL dans offers.url pour inclure le paramètre d'ID de variante : ?variant=XXXXXXXX

Alternativement, pour les vitrines utilisant beaucoup de JavaScript, utilisez un type de schéma ProductGroup distinct qui représente le produit avec toutes ses options de variantes. Il s'agit d'une recommandation plus récente de Google pour les produits à plusieurs variantes.


Workflow de validation et de surveillance

La mise en œuvre de données structurées nécessite une validation systématique, pas seulement au lancement, mais en continu.

Étape 1 : Validation au niveau de la page

Testez chaque type de schéma à l'aide du test de résultats enrichis de Google sur search.google.com/test/rich-results. Saisissez l'URL de votre produit, l'URL de votre collection et l'URL de votre article de blog. Vérifiez : toutes les propriétés requises sont présentes, aucune erreur (seuls les avertissements sont acceptables), l'éligibilité des résultats riches est confirmée.

Étape 2 : Validation groupée

Pour les magasins proposant des milliers de produits, la validation page par page n’est pas pratique. Utilisez ces méthodes groupées :

  • Google Search Console > Améliorations > vérifiez les sections Produit, Examen et FAQ pour les erreurs à l'échelle du site
  • Screaming Frog avec la fonction "Extraire" pour extraire tous les JSON-LD des pages explorées
  • API de validation Schema.org (scriptable pour la validation en masse)

Étape 3 : Cohérence de Merchant Center

Si vous exécutez Google Shopping, assurez-vous que votre flux de données produit Merchant Center correspond à votre schéma sur la page. Les écarts de prix, de disponibilité ou de GTIN entre le flux et le schéma déclenchent des « refus automatiques d'articles ».

Étape 4 : Surveillance mensuelle de la Search Console

Dans GSC, accédez à la section « Améliorations ». Chaque type de schéma que vous implémentez apparaîtra ici avec le nombre d'éléments valides, le nombre d'avertissements et le nombre d'erreurs. Corrigez les erreurs dans les 48 heures suivant leur détection : elles suppriment l’éligibilité aux résultats enrichis jusqu’à leur résolution.

Erreurs de données structurées courantes dans Shopify :

ErreurParce queCorriger
"Champ 'prix' manquant"Rendu liquide prix videAjouter une solution de secours : `product.price
"Valeur invalide dans le champ 'disponibilité'"Utiliser du texte au lieu de l'URL schema.orgUtilisez https://schema.org/InStock
"Valeur mal formatée dans le champ 'ratingValue'"Valeur de notation en dehors de la plage 1-5Valider la plage correcte des sorties de l'application
"Champ en double"Plusieurs scripts de schéma injectant le même typeSupprimer les sources de schéma en double
"La page n'a pas de résultat enrichi éligible"Schéma valide mais page en dessous du seuil de qualitéAméliorer la qualité du contenu des pages

Questions fréquemment posées

Les données structurées améliorent-elles directement mon classement dans les recherches ?

Les données structurées n'influencent pas directement les classements de recherche : il ne s'agit pas d'un signal de classement au sens traditionnel du terme. Cependant, des résultats riches (qui nécessitent des données structurées précises) améliorent les taux de clics de 15 à 30 %, ce qui est un signal comportemental qui peut influencer indirectement les classements au fil du temps. Plus directement, les résultats riches augmentent votre volume de trafic à partir de la même position moyenne, multipliant ainsi la valeur de vos performances SEO existantes.

Combien de temps après la mise en œuvre des données structurées les résultats enrichis apparaîtront-ils dans Google ?

Google réanalyse et traite généralement les données structurées dans un délai d'une à quatre semaines après la mise en œuvre. Après le traitement, l'éligibilité des résultats enrichis dépend des signaux de qualité de la page, de l'authenticité des données d'examen et des décisions algorithmiques de Google concernant le moment où afficher les formats enrichis. Vous pouvez voir les résultats dans le test de résultats enrichis de Google (qui traite en temps réel) tandis que la mise à jour de votre apparence SERP prend des semaines supplémentaires.

Puis-je utiliser une application Shopify pour gérer des données structurées au lieu de modifier des fichiers de thème ?

Des applications telles que SEO Manager, JSON-LD pour le référencement et Schema Plus pour le référencement injectent des données structurées sans édition de thème. Celles-ci fonctionnent pour la plupart des magasins et constituent une approche valable. Cependant, le schéma implémenté manuellement dans les fichiers de thème vous donne plus de contrôle sur les valeurs des propriétés, élimine le risque de dépendance des applications et évite le retard de rendu JavaScript introduit par certaines applications. Pour les magasins d’entreprise, une implémentation au niveau du thème est recommandée.

Que se passe-t-il si mes données structurées comportent des erreurs ?

Les erreurs mineures (avertissements) n'empêchent généralement pas l'affichage des résultats enrichis, mais peuvent limiter les formats enrichis affichés par Google. Les erreurs critiques (champs obligatoires manquants, valeurs non valides) rendent le schéma concerné totalement inéligible aux résultats enrichis. Les erreurs de schéma n'entraînent pas de pénalités de classement : Google ignore simplement les balises non valides. Corrigez les erreurs rapidement pour restaurer l’éligibilité des résultats enrichis.

Dois-je implémenter un schéma sur chaque page ou uniquement sur les pages de produits ?

Implémentez le schéma partout où il apporte une valeur réelle : le schéma de produit sur toutes les pages de produits, les pages de collection peuvent utiliser le schéma ItemList, les articles de blog doivent avoir le schéma Article + FAQPage (le cas échéant), la page d'accueil obtient le schéma Organisation + Site Web et les pages de stratégie peuvent utiliser le schéma de page Web. Le schéma de fil d'Ariane doit apparaître sur chaque page, à l'exception de la page d'accueil. Plus votre schéma décrit le contenu de la page avec précision, mieux c'est.

Comment implémenter un schéma pour les produits en vente avec les prix d'origine et les prix soldés ?

Utilisez la propriété priceSpecification pour fournir les deux prix : un ListPrice pour le prix d'origine et un Offer.price pour le prix de vente. Vous pouvez également utiliser offers.price pour le prix de vente actuel et offers.priceValidUntil pour indiquer la date de fin de la vente. Les directives de Google Shopping exigent que le prix de vente reflète ce que les utilisateurs paient réellement : n'affichez jamais un prix plus élevé dans le schéma que le prix affiché sur la page.


Prochaines étapes

La mise en œuvre de données structurées complètes dans une boutique Shopify – en particulier avec la gestion dynamique des variantes, l'intégration des avis et la cohérence de Merchant Center – nécessite une expertise technique en matière de modèles Liquid, de spécification JSON-LD et de directives de recherche de Google.

Les services Shopify SEO d'ECOSIRE incluent la mise en œuvre complète de données structurées pour tous les types de schémas, la validation de l'ensemble de votre catalogue de produits, la synchronisation Merchant Center et une surveillance continue via la Search Console. Nos implémentations obtiennent systématiquement des résultats riches en éligibilité dans les 4 à 6 semaines suivant le déploiement.

Contactez notre équipe Shopify SEO pour auditer vos données structurées actuelles et mettre en œuvre une stratégie complète de résultats riches.

E

Rédigé par

ECOSIRE Research and Development Team

Création de produits numériques de niveau entreprise chez ECOSIRE. Partage d'analyses sur les intégrations Odoo, l'automatisation e-commerce et les solutions d'entreprise propulsées par l'IA.

Discutez sur WhatsApp