Les problématiques que l'on peut rencontrer sur le référencement e-commerce sont nombreuses.
Parmi les différents obstacles et freins auxquels se heurtent les référenceurs, certains sont parfois négligés. En l’occurrence, je parle des boutons d'ajout au panier qui dans un grand nombre de sites ecommerce sont, dans le meilleur des cas non optimisés, et dans le pire des cas contre-productifs et néfastes.
L'Ecommerce et les mauvais boutons d'ajout produit
Comme chacun le sait, le bouton d'ajout au panier permet à l'utilisateur d'ajouter un nouveau produit en vue de le commander. la plupart du temps, tout est géré par un fichier javascript qui va ajouter le bon produit dans les quantités souhaitées et éventuellement avec des options (taille, couleur, ...).
Pour cela, le bon sens voudrait que l'on fasse appel à un <button> ou éventuellement à un <input>, qui sont parfaitement adaptés pour ce type d'action. Le hic, c'est que ces ajouts au paniers sont parfois codés sous la forme d'un lien "a href"...
Cela peut paraître tout bête, mais ce petit lien nuit au référencement naturel de n'importe quel site ecommerce. Et la raison à tout cela est simple : ce lien sera pris en compte dans la répartition de la popularité d'une page.
Je l'expliquais dans un précédent article "Liens et transfert de popularité" : Google divise la popularité par autant de liens qu'il trouvera dans une page. S'il trouve un bouton ajouter au panier, il va lui attribuer une partie de la popularité de la page (qu'il soit en nofollow ou non). Autrement dit, c'est une popularité perdue pour le maillage interne et pour les éventuels liens externes.
L'autre élément qui me pousse à dire qu'un lien "a href" ne doit JAMAIS être utilisé pour un bouton ajouter au panier, c'est tout simplement une question de sémantique :
- Un lien implique un changement de page et d'URL
- Un button implique une action et un input implique la soumission de données (en l’occurrence les produits que l'on ajoute au panier).
Pour faire une analogie : c'est un peu comme quand on construit une maison et que l'on creuse les fondations. On peut utiliser une truelle : cela fonctionne. Mais rien de tel qu'une pelle pour faire le même boulot plus efficacement (voir une pelleteuse si vous êtes riche).
Là, c'est exactement pareil pour le bouton ajouter au panier. Si le bouton ne fait que générer une action d'affichage de popup du panier, alors un lien n'a vraiment aucun sens.
La solution du button
La solution a déjà été donnée juste avant pour optimiser le référencement de votre site ecommerce : il suffit de remplacer les liens traditionnels qui sont utilisés dans les boutons d'ajout au panier de vos boutiques pour les remplacer par un bon vieux <button> ou <input>.
Au niveau du javascript, cela ne devrait d'ailleurs rien changer car le clic sur le lien génère une action qui se termine par une petite fonction JS qui va bloquer l'activation du lien (et qu'il suffira donc d'enlever).
Pour certains sites, cela va "juste" optimiser toutes les pages produits et les autres pages qui affichent vos articles, comme la page d'accueil, vos catégories ou encore d'éventuelles pages conseils. Certes, j'ai conscience qu'il s'agit d'une optimisation mineure, mais elle ne coûte rien à mettre en place et peut vraiment avoir un impact fort et visible sur les pages qui listent des dizaines de produits (comme les catégories).
Et dans certains cas de figure, on peut constater des gains de position compris entre +1 et +30 sur l'ensemble des mots clés suivis d'un seul coup (true story). C'est le cas pour les quelques sites ecommerce qui incluent dans le "bouton" d'ajout au panier l'URL retour permettant la fermeture de la pop-up. Pour ceux-ci, l'impact de ce changement a été monstrueux puisque la suppression du lien supprimait en effet les URLs de toutes les pop-up (qui n'étaient que des URLs différentes avec un contenu dupliqué).
Quelques exemples
Des boutons efficaces pour le SEO
Pour mieux vous expliquer le concept, voici quelques exemples de boutons "ajouter au panier" qui ne nuisent pas au référencement naturel d'une boutique ecommerce. On pourra toujours débattre des meilleures balises à utiliser pour activer le javascript d'ajout au panier (certains exemples utilisent des div ou des images), mais ces sites ecommerce ne perdent pas de popularité à cause de ces boutons dans leur maillage interne.
Amazon:
<span id="addToCartSpan">
<input type="image" border="0" src="http://g-ecx.images-amazon.com/images/G/08/x-locale/common/transparent-pixel._V192553961_.gif" name="submit.add-to-cart" value="" id="bb_atc_button" class="dpSprite s_bbAdd2Cart " alt="Ajouter au panier" title=""/>
</span>PriceMinister
<button type="submit" class="pm_continue">
<span class="a"><span>Ajouter au panier</span></span>
</button>Cdiscount
<center><input type="button" alt="" class="button-add-basket-200 button jq-addToBasketButton jq-picHover" id="ctl00_cphMainArea_ucProduct_ctl04_ucAddToBasket_addToBasketButton" name="ctl00$cphMainArea$ucProduct$ctl04$ucAddToBasket$addToBasketButton"/>
</center>3 Suisses
<img onclick="javascript:ajoutPanierSimpleReference('portlet_FP', '2054112', '20411', '', '', '', '', false)" onmouseout="this.src = this.src.replace('-on', '-off')" onmouseover="this.src = this.src.replace('-off', '-on')" src="http://www.3suisses.fr/portail3s_img/3S/FRA/contenus/new/structure/fp/btn-ajout-panier-off.gif" alt="" id="boutonAjoutPanier"/>Des boutons inefficaces en référencement
Et maintenant, voici à l'inverse quelques mauvais élèves ecommerce qui perdent inutilement un peu de popularité à chaque affichage d'un de leurs produits :
LDLC
<a href="javascript:__doPostBack('ctl00$ucHeaderControl$bpProxy','0|AR201108030018|4265|' + document.getElementById('ctl00_cphMainContent_txtQuantite').value + '|ctl00_cphMainContent_pnlCommand')" class="lir panier buy" title="ajouter au panier"><span>Commander ce produit</span></a>Materiel.net
<a title="Ajouter "Western Digital My Book Essential USB 3.0 2 To" au panier" onclick="ChangeAmount('62290', document.getElementById('ProdQte').value, 'Western Digital My Book Essential USB 3.0 2 To'); return false;" id="ProdBtnBuy" href="#"/>La Redoute
<a id="ctl00_MainContentAreaPlaceHolder_PDPProductDetails1_rptProductDetails_ctl00_AddToBasketButton" class="324342045 999999 atb_button_disabled" title="Ajouter au panier" style="" href="javascript:void(0);"></a>La Fnac
<a onclick="" rel="nofollow" href="http://www4.fnac.com/Account/Basket/IntermediaryShoppingCartRecalculate.aspx?action=1&sctype=standard&prid=3723660&from=111"><img alt="Ajouter au panier" src="http://www4-fr.fnac-static.com/img/fr-FR/boutons/ajouter-au-panier-125x22.png"/></a>Il ne vous reste donc plus qu'à vérifier tous les boutons d'ajout au panier de vos sites ecommerce pour les optimiser pour le référencement naturel.
Sources images : Stop, par purpleapple428, et Boutons par Laineys Repertoire
38 Commentaires
Super ! C'est bon à savoir pour moi qui code une boutique en ligne ! Sinon, très bel article, comme d'habitude...
Merci pour les solutions que tu donnes Daniel ! Je vais vérifier que nos boutons d'ajout au panier soit bien des INPUT ou des BUTTON... histoire de diluer un peu moins :)
J'ai mal aux yeux :
=> LDLC : href="javascript:__doPostBack()
Et je pense que Google aussi ...
(on n'appelle pas une fonction dans un href Mr LDLC ...)
Et un bouton sous cette forme, cela rentre dans les bons ou mauvais exemples ?
Je suis complètement d'accord avec cette dilution de "popularité".
en revanche, j'ai du mal à comprendre ce gain de position si important, pour un changement, selon moi mineur.
bon article, j'ai vérifié dans prestashop et l'ajout au panier se fait via un input... ouf !
pour les contres exemples, la FNAC et La Redoute se foutent un peu de la SEO... ils sont déjà connu et reconnu.
Pour l'utilisation du href="#" que tu cites parmi les mauvaises méthodes je serais un peu plus modéré. Plusieurs tests montrent en effet que Google compte 2 URLs différentes si les ancres sont différents.
Mais au final ça ne fait qu'1 lien supplémentaire pour tous les boutons d'ajout au panier de la page.
Sur un site e-commerce où l'on a 100 liens internes sur la page d'accueil, le passage de ce lien en bouton permet de gagner 1% de popularité à distribuer sur les 99 autres liens. Cela donne environ 0,01 de jus supplémentaire par page... bref une broutille !
Bonjour Daniel,
Sur le papier, tout ceci semble du bon sens, dans un premier temps on ne peut qu'être d'accord avec toi.
Mais concrètement, je me pose au moins 2 questions :
- si je prends un exemple chez LDLC, je vois une page fiche produit, elle contient environ 400 liens. Comment peut-on mesurer sérieusement l'impact d'un lien "de trop" ?
- comment être sûr que Google n'ignore pas déjà un lien qui ne pointe nul part (c'est le cas des liens LDLC). Si la balise a ne pointe pas vers une page connue de Google, ce lien est-il réellement pris en compte par Google ?
Je suis mitigé sur les résultats de cette démarche, Je ne suis pas forcément pour une sur-optimisation des liens internes (du moins pour ce cas la).
Ensuite la fiche d'ajout au panier ne doit pas souffrir du duplicate, car cela devrez renvoyer toujours sur le même formulaire (donc URL unique).
Tu dis : "le clic sur le lien génère une action qui se termine par une petite fonction JS qui va bloquer l'activation du lien"
Et si j'ai pas de JS activé ???
Ma vision du javascript est la suivante, cela doit servir à faire des effets de kikoolol mais dans aucun cas cela doit interférer sur la navigation, ou le code.
Sujet à débattre...
Je ne suis pas programmeur, mais référenceur et j'ai bien compris l'avis de cet article. Petit pas, certes, mais qui, avec plusieurs autres petits pas, font les grandes réalisations. Merci. Cela tombe plutôt bien, ayant deux mandats en cours pour des boutiques conçues avec PrestaShop. Y aurait-il une contre-indication ou règle particulière pour ce CMS?
@Aubione : Très mauvais, et pas seulement pour un soucis de référencement, mais aussi d'accessibilité et d’ergonomie, un lien doit toujours avoir une cible (attribut ahref), et une cible autre que du js.
@ ubione : Vivien vient de répondre à ta question.
@ Thomas : je ne suis pas si sûr malheureusement. On sait que Google envoi du jus au premier lien si l'en trouve plusieurs identique. Mais rien ne dit qu'il ne prend pas en compte les autres liens pour faire son calcul, exactement comme il le fait actuellement avec les liens nofollow qui sont comptés lors de la répartition mais qui ne transmettent pas de popularité.
@Olivier : comme je l'ai dit, c'est une optimisation mineure en règle générale. Et je me pose la même question que toi sur le fait de savoir si Google prend en compte un lien vide ou un lien avec seulement une ancre.
@Phrixos : sans JS, une boutique ecommerce ne peut fonctionner, dans le lien sera enclenché mais la valeur de celui-ci aboutira à une erreur serveur ou une erreur 404
@Daniel : Les liens nofollow sont comptés en effet dans la répartition de la popularité mais si 4 liens nofollow sur un page contenant 10 liens pointent vers la même URL, Google leur confère 1/6ème de la popularité ou 4/10ème ?
A priori j'aurais dit 1/6ème.
J'imaginais que la logique était la même avec les ancres "#".
@Thomas : je me pose la même question, et à ma connaissance aucune annonce de Google ou test n'a réussi à démontrer ce qu'il en était réellement...
Je vais un peu plus loin et, dans le cas ou le volume de lien n'est pas trop élevé sur la page, on pourrait faire un lien en dur qui n'est pas repris par l'internaute sur ce fameux bouton (qui serait activable en javascript).... pour envoyer du jus (en modifiant le ALT de l'image)
Bon, visiblement ton article divise, à la manière de cette satanée popularité Google.
En ce qui me concerne, je te remercie pour ce post très complet et je vais appliquer "le principe de précaution" en modifiant si nécessaire les boutons de ma boutique too-brico.com
Petite question subsidiaire : faut-il toucher aux boutons du type "Commander" qui renvoient vers une page différente mais au demeurant peu passionnante ?
@Daniel Roch :
Ta remarque a éveillé ma curiosité j'ai regardé vite fait dans les bouttons SEO, il y a que chez Cdiscount ou l'on peut acheter sans javascript.
Pourtant une des base élémentaire c'est d'avoir un site qui fonctionne sans javascript. Le javascript vient ce greffer sur le site pour l'améliorer ergonomie, design...
Je trouve ça honteux, surtout qu'il existe des solutions propres comme Drupal ou même les thèmes sont pensés et optimisés SEO.
Petite question dans le premier exemple de "bouton efficace pour le SEO" vous mettez en avant la Fnac mais quand on regarde le code dessous on voit Amazon ("http://g-ecx.images-amazon.com/images/G/08/x-locale/common/transparent-pixel._V192553961_.gif)
est-ce une erreur dans l'intitulé ou ça correspond bien à un bouton FNAC ?
J'apprécie ces conseils d'utilisabilité ! Je vais essayer de m'en souvenir la prochaine fois que je placerai un bouton sur une page...
Au delà du simple gain de linkjuice qui est mineur l' intérêt de supprimer ce type de lien ou d'autres d ailleurs du même genre c'est:
- le gain de popularité effectivement même si il est faible
- mais surtout le gain de crawl. Si le bouton panier génère une url différente pour chaque produit comme c'est généralement le cas, on a potentiellement autant d urls pourris crawlés par google que de produits.
Dans la pratique il y en a pas autant car profondeur plus élevé entre autres, mais ca peut représenter quand même un gros % du crawl de l ensemble du site.
- de plus ce type de pages vient baisser le taux marginal d informations (Tmi) de l ensemble du site.
en fait ce qu'il faut faire avant tout c'est:
- Supprimer ces liens comme expliqué dans l article
- bloquer ces pages dans le robots.txt
- mettre un no index dessus
Les 2 dernières recos c'est pour accélérer le processus car même en supprimant ces liens google va continuer d aller dessus pendant un temps. Mais ce qui reste le plus important c'est le blocage dans le robots et le plus simple aussi.
ps: je cherche un poste de responsable SEO/search/marketing dans une boite sympa :) Si vous avez des tuyaux je suis open
Bonjour Daniel,
Ce billet est très instructif. J'ai appris des choses y compris en consultant les commentaires.
Visiblement, il y a pas mal d'incertitudes sur l'utilisation des "ajouts au panier" sans qu'ils nuisent au référencement du site.
amicalement
Je n'avais jamais pensé à ça mais maintenant que tu soulève le problème, effectivement cela semble logique.
Je vais vérifier mes boutons du coup ;)
c'est bon j'ai vérifié , c'est bien un lien amazon et pas un lien pompé par la fnac sur amazon lol
Dans le principe je suis d'accord avec toi mais franchement est-ce une optimisation vraiment efficace ?
Le poids reste assez faible même si le bouton se trouve répliqué un peu partout
Il me semble que comme il n'y a pas de target au lien son poids est donc négligé s'il n'est pas carrément annulé.
Bref à part un impact linkjuice sur un PageRank sans aucune valeur j'ai du mal a voir l'intérêt du truc ...
Ben je l ai deja vu sur des sites (codé a l arrache), il y a des cas ou une url en clair est dans le bouton du panier et que ce soit en href ou meme en javascript, google peux suivre ce lien et meme transmettre du jus a un lien js.
je l explique dans un post plus haut.
Sur le thème d'origine de prestashop, ils font bien, sur les pages produits, mais pas sur la page d'accueil avec le bloc "featured" ni dans les pages catégories.
A changer donc ;)
Pour bien faire les liens javascript, il faut que le code JS du lien fasse référence à un fichier externe interdit de crawl.
Dans ce cas, même si pour mettre au panier c'est un lien, ça ne gènera pas le référencement.
Même si un bouton me semble en effet plus logique, je ne suis au final pas vraiment d'accord avec cet article. Disons que le titre est un peu trop tranché (il faut bien faire venir du monde !)...
très bon article, mais je rejoins Olivier est ce que l'on peut vraiment juger de la perte de jus avec un lien en moins ou en plus ?
Ensuite niveau sémantique je te rejoins tout à fait.
intéressant post, je pense que @djohlan a raison il faut changer le thème de base de prestashop, quand je vais dans l'onglet panier je vois beaucoup de paniers fantômes générés par les crawlers, donnant l'illusion d'avoir un panier stratosphérique, mais jamais validé.
Quid des ancres (balise A) sans href ?
Ce ne sont pas des liens mais est ce que Google fait la différence lorsqu'il calcule la dissolution du maillage ?
@Jpvincent: la question ne se pose même pas puisque ce n'est pas valide W3C !
@thomas : c'est parfaitement valide car l'attribut href est optionnel sur la balise A (anchre nommée). À la base elle sert de référence pour les liens internes à la page ( #machin )
Donc la question reste : si ce n'est pas un lien , en théorie Google devrait l'ignorer complètement. Est ce que des gens ont fait ce genre de tests ?
Je dirais que non. il considere comme lien ce qui ressemble a une url, donc a partir de la. En plus une ancre c derriere un #
Quelqu'un saurait ou on peut modifier le code du bouton "ajouter au panier" dans Prestashop svp ? merci
Ça serait bien que ces grands sites e-commerce qui utilisent une balise "a" fassent un comparatif de positionnement et d'apport de visiteurs Google s'ils modifiaient ce bouton d'ajout au panier.
J'ai regardé sur une boutique Prestashop que je gère et c'est vrai que c'est trompeur d'avoir un lien d'ajout au panier avec un design similaire sur la fiche produit et sur les pages de catégories alors que c'est codé différemment.
Je ne sais pas si ça a déjà été dit mais je crois qu'il y a une erreur dans les exemple.
Le premier ne serait-il pas plutôt Amazon au lieu de Fnac (qui est redit dans les mauvais élèves).
Et c'est Materiel.net et non Matériel.net (petit détail).
Sinon pour en revenir au sujet, intéressant comme info mais dommage que Prestashop utilise un lien a justement...
@Julien : c'est corrigé. Merci.
C'est SEO mais pas accessible, pas sûr que cela soit vraiment une bonne pratique à adopter.
Si javascript n'est pas activé, ben on ne commande pas :(
Laisser un commentaire