Cet article a été mis à jour il y a plus de 3 ans. Le contenu qu'il propose n'est peut-être plus à jour.

Les problématiques que l’on peut rencontrer sur le référencement naturel d’un site ecommerce 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 »…

STOP
Je dis STOP !

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>.

Boutons
Les boutons sont optimisés pour le référencement naturel

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 &quot;Western Digital My Book Essential USB 3.0 2 To&quot; 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&amp;sctype=standard&amp;prid=3723660&amp;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