Fiche Produit E-commerce: Référencement du texte et images

Nous allons voir l’utilisation du texte et des images et le rôle du multimédia dans les sites de commerce électronique au Canada et plus spécifiquement au Québec. Une fiche produit est fournie pour exemple. Le terme multimédia désigne les documents informatiques diffusés par l’ordinateur média et faits de données textuelles, visuelles, sonores et cinétiques, qu’il s’agisse d’images animées ou de vidéo. Dans le cas des commerces électronique, le texte et les images occupent une place prépondérante notamment pour la description des produits et leur illustration. La présentation des produits ou services est la fonction la plus fréquemment rencontrée sur les sites à vocation commerciale. Elle est soit une étape vers la vente en ligne soit une situation durable lorsque pour une raison ou une autre la transaction en ligne ne peut être envisagée. Le rich média est donc préconisé pour améliorer l’expérience de l‘internaute. 26% se souviennent de ce qu’ils entendent, 43% ce qu’ils voient, 66% ce qu’ils expérimentent. Aujourd’hui, l’internet compte plus de 200 millions de noms de domaines déposés, plus de 70 millions de sites en ligne, et plus de 1 trillion (1000 milliards) de pages sur le web indexées par Google en 2008. Le nombre de sites de commerce en ligne, en France uniquement, dépasse quant à lui la barre des 50 000. Pour le Québec, les sites e-commerce pourraient se chiffrer en milliers sans compter les marchands Ebay et autres plateformes pouvant relayer les offres de ces sites. D’où un besoin évident en termes de visibilité et de différentiation. Pour le premier point, les contenus multimédia peuvent aider à un meilleur référencement sur les moteurs de recherche, spécialement la recherche universelle. Quant au deuxième, le rich média interactif peut marquer la mémoire de l’internaute qui deviendra un promoteur du site. En marketing électronique, on parle d’expérience utilisateur et d’utilisabilité du site. Cette dernière est définie par la norme ISO 9241. C’est une notion proche de celle d’ergonomie, qui est cependant plus large. L’ergonomie d’un site web peut être définie par sa capacité à répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation. Parmi les 5 sens, la vue est le sens le plus développé, alors que le goût et l’odorat sont réputés pour être peu développés. Ainsi, dans la mesure où l’on considère que la perception visuelle peut représenter près de 50% de l’activité du cerveau, il s’agit du mode privilégié pour les interfaces utilisateurs. Les bonnes pratiques concernant l’ergonomique des interfaces web portent aussi bien sur des critères qualitatifs que quantitatifs. Ainsi par exemple, pour une page devant présenter un contenu dense, la surface dévolue à ce contenu ne doit pas dépasser 70%, 20% seront réservés au système de navigation et le reste affecté au design et à la respiration. Par ailleurs, la recherche universelle gagne du terrain avec notamment les changements majeurs apparus récemment sur Google et que Yahoo propose déjà depuis un certain temps. Cela signifie que le classement dans l’ensemble des différents moteurs de recherche Google, Yahoo et Bing (images, vidéos, actualités…etc.) est devenu encore plus important. Il faut penser aux moteurs de recherche comme étant des utilisateurs ayant des contraintes importantes : ils ne peuvent pas lire le texte à l’intérieur d’images et ne peuvent pas « voir » un grand nombre d’autres types de contenu multimédia. Nous allons donc dresser le bilan des actions pouvant être entreprises pour contourner ce problème. Dans les articles qui vont suivre, nous allons donc étudier les manières d’optimiser les trois ingrédients nécessaires : texte, image, vidéo. Pour la partie vidéo, nous allons faire une différence entre la vidéo de présentation de produit et généralement intégrée sur site et la vidéo promotionnelle qui va elle être promue ailleurs.

I. Utilisation de texte pour le multimédia en commerce électronique

Nous avons vu auparavant l’émergence du web sémantique et son incidence sur le référencement. Le texte renseigne l’internaute mais n’est pas le plus efficace pour l’expérience utilisateur. Aussi, on se limitera au strict nécessaire pour renseigner le cyber acheteur et donner les bonnes indications aux moteurs de recherche en optimisant le contenu (Sémantique et pertinence du contenu ). On pourra donc utiliser les outils disponibles pour la recherche des mots clés et concevoir un texte optimisé pour les moteurs.

I.1. Texte de description dans la fiche produit

Clarté et lisibilité sont les principes de base d’une bonne description de produit sur le web. Si le texte obéit à des normes de présentation en termes de typographie et densité, le contenu doit renseigner l’internaute sans omettre les moteurs de recherche qui se basent sur ce contenu pour leur indexation. Il faut proposer du contenu intéressant et compléter les pages par des fiches techniques, des comparatifs ou des guides d’utilisation à télécharger. Il est préférable d’adopter toujours la même forme de fiche produit, afin de ne pas perdre l’utilisateur et garder une certaine cohérence sur le site. Après une description courte du produit le définissant dans ses grandes lignes, le visiteur pourra accéder à une description plus longue et plus détaillée et sur laquelle on pourra optimiser le contenu pour le référencement naturel. Pour optimiser la fiche produits, il faut mettre en évidence une structure avec titre et sous-titre. Il faut faire le choix de la typographie en tenant compte des contraintes des navigateurs et OS, en donnant la possibilité aux utilisateurs de changer la taille de la police. Exemple d’ergonomie et de fiche produit

I.2 Sémantique et Référencement

Pour rédiger le contenu, il est important d’identifier les termes utilisés dans la recherche web liés à la thématique du site. On parle alors de pertinence du contenu, de sémantique et de LSI (Latent Semantic Indexing). Le LSI est un algorithme utilisé par les moteurs de recherche pour évaluer le contenu d’un site en fonction des mots clés utilisés. Google annonce sur son blog que le recours à cette méthode est déterminant et que celle-ci va être de plus en plus utilisée sur ses serveurs. La sémantique du code est un ensemble de pratiques permettant de rendre le code plus « lisible », en hiérarchisant le contenu mis en forme (Titre principal, sous-titre, texte du contenu, emphase d’un morceau de contenu…). Il convient en effet d’utiliser les éléments de base du HTML, qui ont un sens bien précis: H1 représente un titre de premier niveau; H2, un titre de second niveau; P constitue un paragraphe, SMALL, un petit élément de texte; UL définit une liste d’éléments; LI définit un élément de liste…etc. Depuis la publication officielle du brouillon du HTML5 en Avril 2009 qui apporte beaucoup de nouvelles balises sémantiques très utiles pour le référencement, celui-ci semble de plus en plus adopté par les grands sites comme CBS et encouragé par les moteurs comme Microsoft. En plus nous voyons apparaître un nouvel élément qui permet de définir les différentes sections d’un document. Combiné avec les éléments h1, h2, h3, h4, h5, et h6, celui-ci donnera une meilleure définition de la structure du document.

II. Utilisation des images pour le multimédia en commerce électronique

Les images jouent un rôle important dans la mise en valeur du contenu, l’illustration des produits et leur référencement. Ainsi, on va aborder leur intégration sous trois angles distincts mais très liés que sont l’ergonomie, le référencement et la protection des droits.

II.1 Ergonomie des interfaces

Les images attirent l’œil (et peuvent le distraire de l’essentiel). Il faut les utiliser avec parcimonie et intelligence, à moins qu’il s’agisse d’une galerie d’images. La disposition des images, comme pour le texte, et des éléments en général dans une page web dépend pour être efficace de trois règles principales :

• La loi de la proximité : la vision regroupe les objets qui sont proches
• La loi de la similitude : la vision assimile de façon identique les éléments qui sont semblables en taille, forme ou couleur.
• La loi de la continuité : la vision aura tendance à associer les éléments qui sont alignés de façon identique.

Le respect de ces règles permet une lecture rapide et facilite la compréhension du site. Il faut intégrer au moins une image par page pour reposer l’œil des lecteurs et capter leur intérêt. Mais il faut utiliser des images de petites dimensions parfaitement lisibles. Plus une image est simple, moins elle pèsera lourd et mieux elle jouera son rôle d’illustration. Les visiteurs sont pressés et s’impatientent vite. Les pages ne doivent pas peser plus de 50 à 80 Ko au total. L’autre facteur déterminant de la position des éléments graphiques (images) dans une page est la façon dont les internautes regardent la page. Pour cela, nous avons les travaux du professeur Thierry Baccino qui permettent d’énoncer quelques principes issus de l’observation des parcours oculaires sur une page. Ceci reste toutefois très schématique et ne représente pas une règle prévalant sur toutes les autres : il ne faut pas briser une harmonie graphique et respecter bien entendu les règles citées auparavant. parcours des yeux selon Thierry Baccino : On tendra à mettre toutefois les images importantes dans les zones de 1 à 4.

II.2 Référencement des images

Google Images a indexé des milliards d’images. Si une image du catalogue apparaît dans la liste de recherche naturelle pour le mot-clé choisi, cela va drainer des visiteurs ciblés vers le site. Pour cela, il faut tenir compte des recommandations des moteurs :

• Utiliser un nom de fichier qui contient les mots-clés pour lesquels on veut être indexé. Le nom du fichier exemple.jpg est utilisé pour le mot clé « exemple ».
• Utilisation de l’attribut texte Alt descriptif de l’Image. Il faudrait utiliser les mêmes mots-clés qui ont été utilisés pour le nom de fichier.
• De la même façon, l’attribut Title de l’image doit être utilisé :
• Le contenu textuel de la page Web avant et après l’image influe également sur sa position dans les résultats de Google Image Search.
• Les plus grandes images semblent apparaître plus haut dans les premiers résultats de Google. Il ne faut pas omettre d’Inclure la largeur et la hauteur dans la balise image pour montrer aux moteurs de recherche la taille de celle-ci :
• Optimiser le reste la page web pour l’expression clé choisie de la recherche. Si la page Web complète a été optimisée pour un mot clé alors il est plus facile d’obtenir de bonnes situations dans les listes des images proposées par les moteurs de recherche.

Bien entendu, l’image sur laquelle on aura optimisé la description en fonction du mot clé, doit apparaître également attrayante à l’écran. Il faut que l’image donne envie à l’internaute de cliquer dessus si elle apparaît dans les recherches. Google vient de mettre à jour le dispositif de cartographie. Le Sitemap se limitait jusqu’ici à la prise en charge de description de contenu texte, la vidéo, les fils d’actualité et les sites mobiles. Désormais, il est donc possible de désigner une ou plusieurs images au sein d’un Sitemap classique.

II.3 Protection des droits des images

Le RDFa permet de sémantiser le contenu du site en intégrant des balises pour définir des éléments. En Taguant les images avec la technologie RDFa, Google peut reconnaître alors si une image est libre de droits ou est soumise à des conditions particulières. Le code RDFa à utiliser est décrit ci-dessous :

La meilleure licence pour partager les images sur le web consiste à les distribuer gratuitement, en limitant leur diffusion à un usage non commercial. Dans le cas où on ne veut pas qu’elles soient copiées, il faut opter alors pour le copyright. Dans tous les cas, il faut être capable de prouver son antériorité, en publiant par exemple les images sur des sites reconnus, comme Flickr ou Photobucket. Certaines solutions de marquage invisible permettent de laisser sur l’image des points ou formes imperceptibles par l’œil, comme preuve d’appartenance de l’image. Malheureusement, les solutions techniques ne sont pas viables, puisqu’il est facile de copier l’image en effectuant une simple capture d’écran.