Comment cloaker un menu Prestashop ?

Pourquoi et comment cloaker un menu Prestashop ?

Le référencement naturel ou SEO pour Search Engine Optimization est une composante importante du  succès d’un site internet e-commerce. Qu’elles soient sémantiques, ergonomiques ou plus techniques il existe de nombreuses possibilités d’optimisations permettant de faciliter la lecture d’un site Internet aux moteurs de recherche comme Google. Shopix ne faisant pas figure de cas à part, nous cherchons sans cesse à optimiser notre site web pour en faciliter la lecture aux robots des moteurs de recherche et la navigation aux internautes.

Catégorisation en silos thématiques

Une phase d’optimisation sémantique nous a d’abord mené à ajouter, supprimer ou renommer certaines catégories et produits de notre site dans le but d’en faciliter la compréhension et la navigation au plus grand nombre. Cette catégorisation a été réalisé sous forme de silos thématiques. Les catégories d’un univers sont ainsi sémantiquement proches de cet univers. Les univers étant dépendants du catalogue papier, une contrainte s’imposait à ce niveau, ne nous laissant pas entièrement libre de modifier ces entrées du menu.

Catégorisation thématique du menu Prestashop

Catégorisation thématique du menu Prestashop

Cloaking et cloisonnement thématique

Une fois ces deux étapes terminées nous avons souhaité “cloaker” le mega menu de la boutique en ligne Shopix afin de mieux cloisonner nos contenus. En effet, sans ce cloaking, les moteurs de recherche voyaient nos pages Univers (Jardinage, Bâche, Plein-Air, Bricolage, Auto, Maison, Éclairage et Décoration Noël) au même niveau que nos pages catégorie. Les catégories et univers étant tous deux accessibles depuis la page d’accueil, ceux-ci étaient ainsi tous perçus comme des liens de niveau 1. (Catégories de l’univers jardinage = Arrosage, Chariot de jardin, Outil de jardin, Désherbant / Désherbeur, Culture du jardin, Entretien du jardin, Geotextile – Paillage, Gants de jardinage, Sac de jardin, Serres de jardin, Pulvérisateur et Aménagement jardin).

Ce constat ne traduisait pourtant pas notre volonté de donner moins d’importance aux catégories qu’aux univers tout en rendant accessible chaque catégorie depuis son seul univers parent. Nous avons donc cherché une astuce pour que les moteurs de recherche voient la même chose que nos internautes. C’est à dire des catégories produits situées un niveau en dessous de nos univers et des sous catégories un niveau en dessous des catégories.

Pour y parvenir nous avons fait appel à l’aide de l’un de nos développeurs web à qui nous avons demandé de réaliser un cloaking de notre mega menu. Le but de ce cloaking est ainsi de montrer aux moteurs de recherche la même chose que ce que voient les internautes, soient d’abord nos univers, ensuite nos catégories, puis nos sous catégories et enfin nos produits.

Pour y parvenir notre développeur à donc réaliser un développement spécifique qu’il va vous présenter ci-dessous.

Cloaking de mega menu Prestashop, la partie technique

Le principe de ce cloaking est de générer la partie à masquer au moteur de recherche en Javascript et de garder les liens que nous voulons mettre en avant en HTML classique. Le moteur de recherche ignorera les liens générés via Javascript et continuera d’interpréter normalement le reste du menu. Pour l’utilisateur cela est totalement transparent. Pour ce faire nous avons exploité le moteur de template Smarty afin de capturer les parties du menu à masquer.

Nous utilisons le module “blocktopmenu” pour générer le menu principal du site qui présenter l’inconvénient de générer le menu entierement côté PHP dans une énorme variable qui est ensuite affichée d’un seul bloc coté smarty.

Voici le template initial :

<div id=”block_top_menu” class=”shpx-Menu-left”>
<ul class=”shpx-Menu-main”>
{$MENU}
</ul>
</div>

 

Il a donc fallu dans un premier temps modifier le fonctionnement du module côté PHP afin de séparer les liens principaux du menu et les liens des sous-catégories, une fois cette étape réalisée nous obtenons le template suivant :

<div id=”block_top_menu” class=”shpx-Menu-left”>
<ul class=”shpx-Menu-main”>
{foreach $CLOAKED_MENU as $MENU_MAIN_NODE}
<li class=”shpx-Menu-titleLvl2″>
{*Catégorie principal, a garder tel quel*}
<a href=”{$MENU_MAIN_NODE.link nofilter}” title=”{$MENU_MAIN_NODE.name}”>{$MENU_MAIN_NODE.name}</a>
<div class=”shpx-Menu-subLvl2″>
<ul>
{*Sous-catégorie, ces liens devron etre cloacké}
{foreach $MENU_MAIN_NODE.children as $CHILD}
<li class=”shpx-Menu-titleLvl3″>
<a href=”{$CHILD.link}” title=”{$CHILD.name}”>{$CHILD.name}</a>
</li>
{/foreach}
</ul>
</div>
</li>
{/foreach}
</ul>
</div>

Nous avons donc maintenant une structure exploitable. Nous allons capturer les liens à masquer grace à la fonction {capture} de smarty et générer une liste vide avec un id unique à la place. Les éléments capturés sont stockés temporairement dans une variable smarty et ne sont pas affichés. (Nous utiliserons ensuite cette variable pour regénérer le sous menu en Javascript) :

<div class=”shpx-Menu-subLvl2″>
<ul id=”cloaked_menu_{$MENU_MAIN_NODE.id}”>
{*Sous-catégorie, ces liens devron etre cloacké}
{capture name=”cloaked_children” assign=cloaked_children}
{foreach $MENU_MAIN_NODE.children as $CHILD}
<li class=”shpx-Menu-titleLvl3″>
<a href=”{$CHILD.link}” title=”{$CHILD.name}”>{$CHILD.name}</a>
</li>
{/foreach}
{/capture}
</ul>
</div>

 

Nous utilisons maintenant Javascript pour regénérer la liste vide avec la contenu qui a été capturé dans une variable smarty.

<script type=”text/javascript”>
var sousMenu{$MENU_MAIN_NODE.id} = ‘{$cloaked_children nofilter}’;
document.getElementById(‘cloaked_menu_{$MENU_MAIN_NODE.id}’).innerHTML = sousMenu{$MENU_MAIN_NODE.id};
</script>

Ainsi, une fois le code Javascript exécuté le menu retrouve donc son état original ! Sauf pour les moteurs de recherche qui eux n’exécute pas le Javascript, ces derniers n’ont donc pas la connaissance des liens des sous-menus.

Le code final est le suivant :

<div id=”block_top_menu” class=”shpx-Menu-left”>
<ul class=”shpx-Menu-main”>
{foreach $CLOAKED_MENU as $MENU_MAIN_NODE}
<li class=”shpx-Menu-titleLvl2″>
{*Catégorie principal, a garder tel quel*}
<a href=”{$MENU_MAIN_NODE.link nofilter}” title=”{$MENU_MAIN_NODE.name}”>{$MENU_MAIN_NODE.name}</a>
<div class=”shpx-Menu-subLvl2″>
<ul>
{*Sous-catégorie, ces liens devrons etre cloacké}
{foreach $MENU_MAIN_NODE.children as $CHILD}
<li class=”shpx-Menu-titleLvl3″>
<a href=”{$CHILD.link}” title=”{$CHILD.name}”>{$CHILD.name}</a>
</li>
{/foreach}
</ul>
</div>
</li>
<script type=”text/javascript”>
var sousMenu{$MENU_MAIN_NODE.id} = ‘{$cloaked_children nofilter}’;
document.getElementById(‘cloaked_menu_{$MENU_MAIN_NODE.id}’).innerHTML = sousMenu{$MENU_MAIN_NODE.id};
</script>
{/foreach}
</ul>
</div>

Cette nouvelle version de notre mega menu a ainsi été testé en univers de pre-production à l’aide d’un crawl de notre site réalisé avec l’outil Seolyzer.

Cloaking d'un menu Prestashop : avant et après

Visualisation du crawl d’un site Prestashop avant et après cloaking du menu

Le résultat nous a paru satisfaisant, les différentes grappes de contenus étant désormais clairement identifiables et cloisonnées les unes des autres.

Satisfait de ce résultat nous avons intégré ce développement spécifique à notre site et suivons l’évolution des positions de nos mots clés sur les moteurs de recherche pour en mesurer l’efficacité du point de vue du référencement naturel et des ventes.

9
Commentaires
    • Très juste, on a modifié le code pour parer au risque de se faire crawler en JS. Difficile d’être certain de ce que Google lit ou non, sauf à imaginer que la version cache, ou la preview mobile donne ce que Google voit !

    • Éventuellement, si les résultats suivent ! Le gain de lisibilité du crawl est déjà un grand pas pour améliorer le site !

    • Noyé dans la core-update. On y voit surtout un confort pour travailler visuellement (via le crawl) le maillage interne et le contenu. C’était auparavant inexploitable.

    • Clairement pas. Au contraire, si cela facilite le crawl de Google sans lui masquer réellement d’info, il n’y a pas de raison de considérer que ce soit du BH… A mon sens !

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2019 Shopix, le blog
Groupe Outillage de Saint-Etienne