--- title: "Fiche produit e-commerce : l’anatomie d’une page qui vend" description: "Fiche produit e-commerce : rédiger titre et description, soigner photos, prix, livraison et avis, optimiser SEO et mobile. L’anatomie d’une page qui vend." canonical_url: "https://studiofogg.fr/journal/fiche-produit-e-commerce-qui-vend" --- > Index of every page on this site: [llms.txt](https://studiofogg.fr/llms.txt) Une fiche produit e-commerce qui vend répond, dans l’ordre, aux questions de l’acheteur : qu’est-ce que c’est, est-ce que cela me convient, combien cela coûte vraiment, quand vais-je le recevoir, puis-je faire confiance au vendeur ? Elle assemble pour cela dix blocs : un titre et une description utiles, des photos fidèles, un prix et des frais transparents, le stock et la date de livraison, des conditions de retour claires, des avis authentiques, une réassurance sobre, un bouton d’achat accessible sur mobile, des données structurées, et une page rapide et accessible. Voici comment construire chacun d’eux. Ce guide fait partie de [nos articles pour convertir les visites en ventes](https://studiofogg.fr/journal/rubrique/design-conversion-ecommerce). ## Titre et description : écrire pour l’acheteur et pour le SEO Le titre nomme le produit comme vos clients le cherchent : le type de produit, ce qui le distingue, puis la déclinaison. « Plaid en laine mérinos 130 × 170 cm, gris ardoise » informe ; « Le Cocon » oblige à cliquer pour comprendre. Gardez les noms de gamme pour l’accroche, pas pour le titre. La description répond aux questions qu’un vendeur entendrait en boutique : - **à quoi sert le produit, et pour qui**, en deux ou trois phrases, avant tout détail technique ; - **ses caractéristiques** (dimensions, matières, composition, entretien, compatibilité), dans une liste ou un tableau faciles à parcourir ; - **les réponses aux hésitations fréquentes** : la taille, l’usage, ce qui est inclus ou non. Écrivez des textes propres à votre boutique plutôt que de reprendre la description du fabricant, que d’autres sites affichent déjà mot pour mot. Une balise title et une meta description uniques pour chaque produit complètent le travail. Les principes de notre guide pour [écrire des textes de site sans bourrage de mots-clés](https://studiofogg.fr/journal/rediger-les-textes-de-son-site-internet) s’appliquent aussi aux fiches produits. Certaines catégories imposent enfin leurs propres mentions, par exemple les ingrédients et allergènes d’une denrée alimentaire ou l’étiquette énergie d’un appareil électroménager. Vérifiez celles de votre secteur avant d’écrire. ## Photos et textes alternatifs : montrer le produit tel qu’il est En ligne, la photo remplace la main qui prend le produit. Prévoyez : - plusieurs vues : de face, de dos, en détail, en situation ; - une indication d’échelle, avec le produit porté, tenu ou posé près d’un objet familier ; - des couleurs fidèles, sur un fond homogène d’une fiche à l’autre ; - une courte vidéo quand le mouvement, la texture ou le montage comptent. Chaque image porte un texte alternatif qui la décrit dans son contexte : il sert aux personnes qui utilisent un lecteur d’écran et aide Google à comprendre l’image. Google le présente comme [l’attribut le plus important pour décrire une image](https://developers.google.com/search/docs/appearance/google-images) et déconseille d’y entasser des mots-clés. « Plaid gris ardoise plié sur un fauteuil en rotin » vaut mieux que « plaid laine plaid mérinos plaid gris ». Côté technique, servez des images aux formats modernes (WebP, AVIF), en plusieurs tailles selon l’écran, avec des dimensions déclarées pour que la page ne « saute » pas au chargement. Nommez vos fichiers de façon descriptive : `plaid-merinos-gris-ardoise.jpg` plutôt que `IMG_0423.jpg`. ## Prix, livraison, stock, retours : tout dire avant le panier Les mauvaises surprises au moment de payer font abandonner les paniers. Elles peuvent aussi coûter cher, car l’information due au consommateur avant la commande est encadrée par le Code de la consommation ; la fiche de Service Public Entreprendre sur [les règles du commerce en ligne](https://entreprendre.service-public.gouv.fr/vosdroits/F23455) les résume. ### Le prix, toutes taxes comprises et sans ambiguïté Affichez le prix TTC pour les particuliers, le prix au kilo ou au litre pour les produits vendus au poids ou au volume, et les frais de livraison dès la fiche, ou au moins un lien vers leur barème. Pour une promotion, le prix de référence affiché doit être le prix le plus bas pratiqué au cours des trente jours précédant la réduction (article L112-1-1 du Code de la consommation), comme le rappelle [la DGCCRF](https://www.economie.gouv.fr/dgccrf/les-fiches-pratiques/annonces-de-reduction-de-prix-ce-que-vous-devez-savoir). ### Le stock et la date de livraison Indiquez clairement si le produit est disponible, déclinaison par déclinaison : découvrir au panier que sa taille est épuisée est une déception évitable. N’affichez une rareté (« plus que 2 ») ou un compte à rebours que s’ils sont réels ; une fausse urgence relève des pratiques commerciales trompeuses. Pour le délai, une date parle davantage qu’une durée : « livré entre le 6 et le 8 novembre » plutôt que « 3 à 5 jours ouvrés ». Vous devez de toute façon indiquer une date ou un délai de livraison avant la commande ; à défaut, la livraison doit intervenir au plus tard trente jours après celle-ci. ### Les retours et le droit de rétractation Précisez le délai de retour, qui paie le renvoi et sous quel délai vous remboursez. Le consommateur dispose de quatorze jours pour se rétracter à compter de la réception du bien et, depuis le 19 juin 2026, les sites marchands doivent proposer une fonctionnalité gratuite pour exercer ce droit en ligne ([article L221-21 du Code de la consommation](https://www.legifrance.gouv.fr/codes/article_lc/LEGIARTI000032226834)). Rappeler ces règles sur la fiche, plutôt que de les réserver aux conditions générales, rassure au moment de décider. Pour la fonctionnalité elle-même, notre article sur [le bouton de rétractation devenu obligatoire](https://studiofogg.fr/journal/bouton-de-retractation-obligatoire) détaille les libellés imposés, l’accusé de réception et l’endroit où la placer. La loi impose de donner ces informations avant la commande. Les afficher dès la fiche produit évite les mauvaises surprises au moment de payer, et les abandons de panier qui vont avec. ## Avis clients : authentiques, datés, contrôlés Les avis répondent à la question que la fiche ne peut pas trancher seule : d’autres acheteurs ont-ils été satisfaits ? Ils ne servent que s’ils sont crédibles : - affichez-les sur la fiche avec leur date, avis mitigés compris, et répondez aux critiques ; - indiquez comment ils sont collectés et contrôlés, par exemple s’ils proviennent uniquement d’acheteurs vérifiés ; - sollicitez-les après la livraison, par un simple e-mail, plutôt que de les acheter ou de les récompenser sans le dire. Le cadre légal est précis. Toute entreprise qui collecte, modère ou publie des avis en ligne doit expliquer clairement comment ils sont publiés et traités, et préciser s’ils font l’objet d’un contrôle ([article L111-7-2 du Code de la consommation](https://www.legifrance.gouv.fr/codes/article_lc/LEGIARTI000049571119)). Affirmer que des avis viennent d’acheteurs réels sans avoir pris les mesures pour le vérifier, ou publier de faux avis, sont des pratiques commerciales réputées trompeuses ([article L121-4](https://www.legifrance.gouv.fr/codes/article_lc/LEGIARTI000044563107)). Google, de son côté, exige que les avis balisés soient visibles sur la page et proviennent directement des utilisateurs, et [ses consignes sur les avis](https://developers.google.com/search/docs/appearance/structured-data/review-snippet) proscrivent les faux avis comme les avis incités non signalés. ## Réassurance et bouton d’achat : lever le dernier doute sur mobile ### Une réassurance sobre et vraie Près du bouton d’achat, quelques lignes suffisent : les moyens de paiement acceptés, le seuil de livraison offerte s’il existe, le délai de retour, un moyen de joindre une personne et ses horaires. Trois informations exactes valent mieux que dix pictogrammes. N’affichez un label, une garantie ou une origine (« fabriqué à Nantes ») que si vous pouvez le prouver. ### Un bouton d’achat toujours à portée de pouce Sur mobile, le bouton « Ajouter au panier » doit se trouver sans chercher : sous le prix, puis rappelé dans une barre fixe quand le visiteur fait défiler la description. Quelques règles simples : - le choix des déclinaisons (taille, couleur) se fait avant le bouton, avec la disponibilité de chacune ; - un message d’erreur dit en toutes lettres ce qui manque, sans se reposer sur la seule couleur ; - la zone cliquable mesure au moins 24 × 24 pixels CSS selon le [critère 2.5.8 des WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html), et 44 × 44 pixels, seuil du critère 2.5.5 de niveau AAA, est un meilleur repère pour le bouton principal ; - l’ajout se confirme sans quitter la page, avec un accès direct au panier. Ces arbitrages se testent sur prototype, avant le développement : c’est l’objet de notre [démarche de conception UX/UI](https://studiofogg.fr/services/webdesign-ux-ui-nantes), appliquée ici au parcours d’achat. ## Données structurées Product : aider Google à lire votre offre Les [données structurées](https://studiofogg.fr/glossaire#donnees-structurees) décrivent votre produit dans un format que les moteurs de recherche lisent sans ambiguïté : nom, prix, disponibilité, avis. Elles rendent la fiche éligible aux affichages enrichis de Google (prix, stock, note), sans garantie d’affichage. Voici les propriétés du balisage `Product` décrites dans [la documentation de Google sur les fiches marchand](https://developers.google.com/search/docs/appearance/structured-data/merchant-listing) :
Propriété Ce qu’elle décrit Statut
name Le nom du produit Obligatoire
image Une ou plusieurs photos Obligatoire
offers ( price , priceCurrency ) Le prix et la devise Obligatoire
availability (dans offers ) La disponibilité : en stock, en précommande… Recommandée
brand , gtin , sku La marque et les identifiants du produit Recommandées
shippingDetails (dans offers ) Les frais et délais de livraison Recommandée
hasMerchantReturnPolicy (dans offers ) La politique de retour Recommandée
aggregateRating , review La note moyenne et les avis Recommandées
Google recommande de déclarer une fois pour toutes la politique de livraison et de retour au niveau de l’organisation, et de ne la préciser produit par produit qu’en cas d’exception. Shopify, WooCommerce et PrestaShop génèrent une partie de ce balisage, plus ou moins complète selon le thème et les extensions : vérifiez le vôtre avec l’outil de test des résultats enrichis de Google. Si vous hésitez encore sur la plateforme, prenez le temps de [comparer Shopify, WooCommerce et PrestaShop](https://studiofogg.fr/journal/shopify-woocommerce-prestashop-quelle-solution-choisir) avant de trancher. ## Vitesse et accessibilité : les fondations invisibles Sur une fiche produit, la photo principale est souvent l’élément qui détermine l’indicateur LCP des [Core Web Vitals](https://developers.google.com/search/docs/appearance/core-web-vitals) : chargez-la en priorité, différez les images suivantes et limitez les applications qui ajoutent des scripts (chat, widgets d’avis, recommandations). Visez un affichage du contenu principal en moins de 2,5 secondes sur mobile. Si vos fiches restent lentes malgré ces réglages, [notre service d’optimisation de la vitesse de site web](https://studiofogg.fr/services/optimisation-vitesse-site-web-nantes) mesure la vitesse vécue par vos visiteurs, repère ce qui la freine et chiffre les correctifs. L’accessibilité, elle, n’est plus une option. Depuis le 28 juin 2025, le commerce électronique fait partie des services soumis à des exigences d’accessibilité ([décret n° 2023-931 du 9 octobre 2023](https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000048178349)) ; les microentreprises de services, moins de dix personnes et au plus 2 millions d’euros de chiffre d’affaires ou de bilan annuel, en sont dispensées. Notre article sur [l’accessibilité des boutiques en ligne depuis l’European Accessibility Act](https://studiofogg.fr/journal/european-accessibility-act-ce-qui-change-pour-votre-site) détaille ces obligations. Concrètement, sur une fiche produit : textes alternatifs, contrastes suffisants, sélecteurs de déclinaisons utilisables au clavier et compréhensibles par les lecteurs d’écran, messages d’erreur explicites, focus visible. ## Exemple avant/après : la fiche produit d’un plaid en laine Reprenons le plaid cité plus haut, un produit imaginaire vendu par une boutique fictive. Voici le haut de sa fiche avant réécriture : > **Le Cocon** > > Douceur, chaleur et élégance pour vos soirées d’hiver. Un produit de qualité premium, à découvrir sans attendre ! > > 89 € · En stock · Livraison rapide > > Photo : une seule vue, fichier `IMG_0423.jpg`, sans texte alternatif > > Bouton : « Acheter », sous trois paragraphes de description L’acheteur ne sait ni ce qu’il achète exactement, ni ce qu’il paiera une fois livré, ni quand il recevra sa commande. Chaque question sans réponse est une raison de quitter la page. Après réécriture : > **Plaid en laine mérinos 130 × 170 cm, gris ardoise** > > Un plaid chaud et léger pour le canapé ou le pied du lit, qui passe en machine. > > - Dimensions : 130 × 170 cm > - Composition : 100 % laine mérinos > - Entretien : lavage à 30 °C, programme laine > > 89 € TTC · Livraison 4,90 €, offerte dès 80 € d’achat > > Couleur : gris ardoise · sable · bleu nuit (épuisé) > > En stock · Livré entre le 12 et le 14 novembre · Retour gratuit sous 14 jours > > Photos : cinq vues (plié, déplié, détail de la maille, sur un fauteuil, sur les épaules) ; texte alternatif de la première : « Plaid gris ardoise plié sur un fauteuil en rotin » > > Avis : datés, issus d’acheteurs vérifiés, avis mitigés et réponses compris > > Bouton : « Ajouter au panier », sous le prix, puis rappelé dans une barre fixe sur mobile Ce qui a changé : - **le titre** nomme le produit comme on le cherche : type de produit, matière, taille, couleur ; « Le Cocon » peut rester en accroche ; - **la description** dit d’abord à quoi sert le plaid, puis remplace les adjectifs par des caractéristiques vérifiables ; - **le prix** s’affiche TTC, avec les frais de livraison et le seuil de gratuité, bien avant le panier ; - **la disponibilité** se lit couleur par couleur, et **la livraison** donne une date plutôt qu’une promesse de rapidité ; - **les retours** sont annoncés sur la fiche, au moment où l’on hésite ; - **les photos** montrent l’échelle et la matière, avec un texte alternatif qui décrit l’image ; - **les avis** sont datés et leur origine est indiquée ; - **le bouton** reste à portée de pouce, après le choix de la couleur. Ce que le visiteur ne voit pas a changé aussi : une balise title et une meta description propres au produit, un nom de fichier parlant pour chaque photo, et un balisage `Product` qui reprend le nom, les photos, le prix et la disponibilité. Une fiche produit se conçoit comme un gabarit : pensée avec soin une fois, elle profite à tout le catalogue. C’est ce que nous construisons avec vous lors de [la conception de votre boutique en ligne à Nantes](https://studiofogg.fr/services/creation-site-e-commerce-nantes), de la maquette au balisage, avec une démonstration de l’avancement chaque vendredi. ## Sitemap See the full [sitemap](https://studiofogg.fr/sitemap.md) for all pages.