Mieux vendre vos produits avec des données riches et structurées

Openweb.eu.org > Articles  > Mieux vendre vos produits avec des données riches et structurées

Abstract

Les technologies du Web sémantique (Linked Data) sont bien souvent perçues comme un rêve de laboratoire. Nous allons dans ce deuxième article à propos de RDFa vous donner une utilisation concrète de ces technologies afin d’améliorer les ventes de produits. Cette technologie est aujourd’hui utilisée par de grandes marques en ligne.

Article

Dans l’article Fructifions nos données sur le Web, nous avions découvert comment utiliser une licence CreativeCommons dans vos pages Web en utilisant RDFa. Ces licences vous permettent de faire vivre légalement votre marque hors du territoire de votre site Web sans en perdre le contrôle. Votre écosystème s’élargit et s’enrichit avec plus d’interactions. Elles sont utilisées par des moteurs de recherche comme Google afin de trouver le contenu disponible avec une licence particulière.

Exemple : voici des images de forêts que les utilisateurs peuvent reprendre à condition de noter l’attribution de l’image (Licence CreativeCommons BY).

En favorisant la réutilisation de l’information autour de vos pages produits, vous allez améliorer vos ventes. D’autres personnes et compagnies pourront construire des applications hors de votre domaine. BestBuy, la chaîne américaine de distribution, encourage les utilisateurs à créer leurs propres magasins à partir de leur catalogue de produits. Ce catalogue de produits contient les descriptions des produits sous forme de données descriptives : le prix, le poids, la couleur, les matériaux, le type d’objet, etc.

Qu’est-ce qui définit un produit ?

Prenons un exemple concret d’un magasin en ligne en France pour l’appareil photo Panasonic Lumix DMC-GF1 [1]. Dans cette page, nous pouvons découvrir une offre spécifique contenant des données particulières à propos du produit.

L'appareil photographique en contexte

Cette page décrivant le produit comprend quelques informations telles que : 

  • titre : Panasonic Lumix DMC-GF1 KEG-K Noir + Obj. Lumix Micro 4/3 stabilisé 14 - 45 mm f/3.5 - 5.6
  • description technique préliminaire : Capteur Live MOS : 12,1 millions de pixels effectifs ; Résolution maxi : photo 4000 x 3000, Vidéo HD1280x 720 ; Boîtier Compact numérique à objectifs interchangeables ; Systéme anti-poussière : filtre à vagues supersoniques ; Ecran LCD 3 ’’ (460 000 points) ; Support d’enregistrement : SD, SDHC.
  • prix : 599 € (comprenant la valeur et l’unité monétaire)
  • url de la page produit : http://www.fnac.com/a2761344/w-4 (l’URL donné par défaut par la FNAC est long. En enlevant petit à petit, les paramètres manuellement, nous obtenons finalement un URL plus court. Donner des identifiants simples pour vos pages Web en facilite le partage.)

Que manque-t-il ?

Certaines informations sont manquantes. Les données doivent pouvoir être utilisées efficacement à l’extérieur du domaine de la FNAC.

  • EAN UCC-13 : Le code barre de référence du produit. Ex : 037988263875
  • méthode de paiement : Le site actuellement ne divulgue pas, sur la page du produit, quels sont les moyens de paiements (Visa, paypal, etc.).

Avec l’ensemble de ces informations, nous pouvons commencer à réfléchir à une stratégie de partage des informations produits.

GoodRelations, un vocabulaire pour les produits

En août 2009, BestBuy a publié l’ensemble de son catalogue sous forme de données structurées riches. GoodRelations est un ensemble de paramètres structurés, un vocabulaire commun permettant de décrire les produits et entités commerciales sur le Web, tout comme CreativeCommons dans le domaine des licences.

Reprenons notre produit le Panasonic Lumix. Le magasin vend (Offering) un produit qui possède un titre (label), un commentaire descriptif (comment), une image (depiction), avec un code barre (hasEAN_UCC-13), qui coûte un prix (hasPriceSpecification) en Euros (hasCurrency) avec une valeur de 599 (hasCurrencyValue), dont l’information est décrite dans une page Web (page) et qu’il est possible d’acheter (acceptedPaymentMethods) avec, par exemple, une carte de crédit.

Chaque mot entre parenthèse est un élément structuré pour décrire les produits selon le vocabulaire GoodRelations ainsi que quelques éléments empruntés à d’autres vocabulaires.

Les mains dans le code

Le code HTML pour une page décrivant le produit mentionné précédemment peut être relativement simple.

<h1><a href="http://www.fnac.com/a2761344/w-4">
   Panasonic Lumix DMC-GF1 KEG-K Noir + Obj. Lumix
   Micro 4/3 stabilisé 14 - 45 mm f/3.5 - 5.6
   </a>
</h1>

<p id="prodimage">
   <img
   src="http://multimedia.fnac.com/multimedia/images_produits/zoom/0/5/9/5025232544950.jpg"
   alt="Panasonic Lumix GF1" />
</p>

<p class="description">Capteur Live MOS: 12,1 millions
   de pixels effectifs ; Résolution maxi : photo 4000
   x 3000, Vidéo HD1280x 720 ; Boîtier Compact
   numérique à objectifs interchangeables ; Système
   anti-poussière : filtre à vagues supersoniques ;
   Ecran LCD 3 '' (460 000 points) ; Support
   d'enregistrement : SD, SDHC.</p>

<p>EAN : <span id="ean">037988263875</span></p>
<p>Prix :
   <span id="prixvaleur">599</span>
   <span id="prixunite">€</span>
</p>

<p id="paiement">Paiements : <span id="visa">Visa</span></p>    

Dans l’article Fructifions nos données sur le Web, nous avons vu comment utiliser les URLs afin de raccourcir les références aux vocabulaires. Nous utiliserons de nouveau l’attribut xmlns dans le code HTML suivant. Si vous avez un système de gabarit vous pouvez ajouter à votre élément body ou html (au choix) les informations suivantes :

xmlns:gr="http://purl.org/goodrelations/v1#"
xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:xsd="http://www.w3.org/2001/XMLSchema#"

Note : Ces URIS compacts sont appelés CURIE (comme dans Compact URI). Vous pouvez lire plus en détails à propos des CURIEs dans le document du W3C RDFa Syntax. Les CURIEs ne sont pas un strict équivalent des URIs.

Ces références contenues dans l’entête du fichier html donnent la liste des vocabulaires que nous allons utiliser dans notre code au fur et à mesure. Commençons à enrichir les données de cette page en précisant qu’il s’agit d’une offre commerciale à propos de cet appareil photographique. Le vocabulaire de GoodRelations (gr) contient le terme Offering.

gr:Offering

Ainsi nous obtenons :

<div typeof="gr:Offering" about="http://www.fnac.com/a2761344/w-4">
<h1><a href="http://www.fnac.com/a2761344/w-4">
   Panasonic Lumix DMC-GF1 KEG-K Noir + Obj. Lumix
   Micro 4/3 stabilisé 14 - 45 mm f/3.5 - 5.6
   </a>
</h1>

</div>

Dorénavant, les outils RDFa qui analyseront la page auront une référence unique à ce produit qui est commercial sous la forme d’un URL. Nous pouvons aider les outils à donner une étiquette significative (label) à présenter aux utilisateurs en indiquant que le produit est un "Panasonic Lumix DMC-GF1 KEG-K Noir + Obj. Lumix Micro 4/3 stabilisé 14 - 45 mm f/3.5 - 5.6".

<div typeof="gr:Offering" about="http://www.fnac.com/a2761344/w-4">
<h1><a property="rdfs:label" href="http://www.fnac.com/a2761344/w-4">
   Panasonic Lumix DMC-GF1 KEG-K Noir + Obj. Lumix
   Micro 4/3 stabilisé 14 - 45 mm f/3.5 - 5.6
   </a>
</h1>

</div>

Comme une image vaut mille mots, nous associons également une image qui décrit le produit en question. Le vocabulaire FOAF contient la propriété depiction pour associer une image représentative d’un élément.

<div typeof="gr:Offering" about="http://www.fnac.com/a2761344/w-4">

<p id="prodimage" rel="foaf:depiction">
   <img
   src="http://multimedia.fnac.com/multimedia/images_produits/zoom/0/5/9/5025232544950.jpg"
   alt="Panasonic Lumix GF1" />
</p>

</div>

Ajoutons le texte de la description en utilisant la propriété comment.

<div typeof="gr:Offering" about="http://www.fnac.com/a2761344/w-4">

<p class="description" property="rdfs:comment">
   Capteur Live MOS: 12,1 millions
   de pixels effectifs ; Résolution maxi : photo 4000
   x 3000, Vidéo HD1280x 720 ; Boîtier Compact
   numérique à objectifs interchangeables ; Système
   anti-poussière : filtre à vagues supersoniques ;
   Ecran LCD 3 '' (460 000 points) ; Support
   d'enregistrement : SD, SDHC.</p>

</div>

Nous avons presque fini. Ajoutons les références de catalogue ainsi que le prix en précisant le montant ainsi que la monnaie utilisée en euros.

<div typeof="gr:Offering" about="http://www.fnac.com/a2761344/w-4">

<p>EAN : <span property="gr:hasEAN_UCC-13" id="ean">037988263875</span></p>
<p rel="gr:hasPriceSpecification">Prix :
<span typeof="gr:UnitPriceSpecification">
   <span property="gr:hasCurrencyValue" id="prixvaleur">599</span>
   <span property="gr:hasCurrency" content="EUR" id="prixunite">€</span>
</span></p>

</div>

Nous devons préciser le mode de paiement sous la forme de VISA.

<div typeof="gr:Offering" about="http://www.fnac.com/a2761344/w-4">

<p id="paiement">Paiements :
  <span rel="gr:acceptedPaymentMethods"
        resource="http://purl.org/goodrelations/v1#VISA"
        id="visa">Visa</span></p>    

</div>

Vous remarquerez que pour tous ces exemples j’ai conservé l’élément précisant l’offre commerciale ainsi que son URI associé. C’est la clé de la description enrichie de données avec RDFa. Il s’agit d’associer des propriétés précises à un identifiant, ici http://www.fnac.com/a2761344/w-4

Le code au complet donne.

<body xmlns:gr="http://purl.org/goodrelations/v1#"
xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:xsd="http://www.w3.org/2001/XMLSchema#">

<div typeof="gr:Offering" about="http://www.fnac.com/a2761344/w-4">
<h1><a property="rdfs:label"  href="http://www.fnac.com/a2761344/w-4">
   Panasonic Lumix DMC-GF1 KEG-K Noir + Obj. Lumix
   Micro 4/3 stabilisé 14 - 45 mm f/3.5 - 5.6
   </a>
</h1>

<p id="prodimage"?rel="foaf:depiction">
   <img
   src="http://multimedia.fnac.com/multimedia/images_produits/zoom/0/5/9/5025232544950.jpg"
   alt="Panasonic Lumix GF1" />
</p>
<p class="description" property="rdfs:comment">
   Capteur Live MOS: 12,1 millions
   de pixels effectifs ; Résolution maxi : photo 4000
   x 3000, Vidéo HD1280x 720 ; Boîtier Compact
   numérique à objectifs interchangeables ; Système
   anti-poussière : filtre à vagues supersoniques ;
   Ecran LCD 3 '' (460 000 points) ; Support
   d'enregistrement : SD, SDHC.</p>
   <p>EAN : <span property="gr:hasEAN_UCC-13" id="ean">037988263875</span></p>
   <p rel="gr:hasPriceSpecification">Prix :
   <span typeof="gr:UnitPriceSpecification">
       <span property="gr:hasCurrencyValue" id="prixvaleur">599</span>
       <span property="gr:hasCurrency" content="EUR" id="prixunite">€</span>
   </span></p>

<p id="paiement">Paiements :
  <span rel="gr:acceptedPaymentMethods"
        resource="http://purl.org/goodrelations/v1#VISA"
        id="visa">Visa</span></p>    

</div>
</body>

Pour aller un peu plus loin

Il y a maintenant de nombreuses ressources à propos de RDFa en ligne depuis mon article précédent. Certains outils vous aideront à mieux créer votre code. RDFa étant un langage ajoutant beaucoup d’informations, il ne s’agit pas de l’ajouter manuellement à chacune de vos pages, mais de modifier les gabarits de votre CMS afin qu’il puisse ajouter les informations nécessaires de façon transparente. Voici quelques outils et références pour aller plus loin :

Notes

[1Je ne travaille pas pour la FNAC ni pour Panasonic

À propos de cet article

  • Openweb.eu.org
  • Profil : Expert
  • Technologie : (X)HTML
  • Thème : Structure
  • Auteurs : ,
  • Publié le :
  • Mise à jour : 24 novembre 2010
  • 3 commentaires

Vos commentaires

  • Frank Taillandier Le 21 novembre 2010 à 23:53

    L’article tombe à point nommé puisque Google supporte GoodRelations depuis quelques semaines :
    http://www.google.com/support/webmasters/bin/answer.py?answer=186036

    Pour information, il existe des extensions pour certaines solutions de E-commerce comme Magento : http://www.magentocommerce.com/magento-connect/semantium/extension/2838/semantium_msemanticbasic

    Le Wiki du groupe de travail du W3C liste d’autres outils mais n’a pas l’air d’être exhaustif sur le sujet :
    http://semanticweb.org/wiki/Goodrelations#Tools_for_Generating_Data

  • Nicolas Chevallier Le 8 décembre 2010 à 18:53

    Merci pour cet article pratique. J’attends avec impatience que plus de ecommercants jouent le jeu et proposent leurs catalogues de manière facilement récupérable.

    Nicolas Chevallier

  • Antoine Le 29 novembre 2012 à 19:53

    Même si le RDFa continuera d’être supporté par les robots des moteurs de recherche, j’ai préféré directement passer à la nomenclature définie par schema.org. L’avantage est, comme vous dites, indéniable pour les sites e-commerce, mais il l’est aussi pour des sites informatifs ou événementiels. Je l’ai d’ailleurs utilisé sur le site le-classico.com et Google a très vite avalé les infos sourire
    Sinon, autre avantage, ça donne beaucoup plus de sens au marquage HTML, je pense qu’à l’avenir d’autres terminaux pourront exploiter efficacement ces informations.

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom