cancel
Showing results for 
Search instead for 
Did you mean: 

Obfuscation du mega menu sous Magento 2.3

Obfuscation du mega menu sous Magento 2.3

Bonjour, pour des raisons évidentes de SEO, j'essaye d'obfusquer les liens e mon mega menu en les encodant en base 64 et en intégrant, à la place des <a href=""> de mon méga menu, des <span>

J'ai créé mon propre module pour surchager Topmenu.php.

  <?php
    
    namespace Perso\Menu\Block\Html;
    
    class Topmenu extends \Magento\Theme\Block\Html\Topmenu
    
    {
     protected function _getHtml(            \Magento\Framework\Data\Tree\Node $menuTree,            $childrenWrapClass,            $limit,            $colBrakes = []
        ) {            $html = '';    
            $children = $menuTree->getChildren();            $parentLevel = $menuTree->getLevel();            $childLevel = $parentLevel === null ? 0 : $parentLevel + 1;    
            $counter = 1;            $itemPosition = 1;            $childrenCount = $children->count();    
            $parentPositionClass = $menuTree->getPositionClass();            $itemPositionClassPrefix = $parentPositionClass ? $parentPositionClass . '-' : 'nav-';
    
            foreach ($children as $child) {                $child->setLevel($childLevel);                $child->setIsFirst($counter == 1);                $child->setIsLast($counter == $childrenCount);                $child->setPositionClass($itemPositionClassPrefix . $counter);    
                $outermostClassCode = '';                $outermostClass = $menuTree->getOutermostClass();
    
                if ($childLevel == 0 && $outermostClass) {                    $outermostClassCode = ' class="' . $outermostClass . '" ';                    $child->setClass($outermostClass);
                }
    
                if (count($colBrakes) && $colBrakes[$counter]['colbrake']) {                    $html .= '</ul></li><li class="column"><ul>';
                }    
                $html .= '<li ' . $this->_getRenderedMenuItemAttributes($child) . '>';            
                $html .= '<span class="menu" data-atc="'.base64_encode($child->getUrl()) . '" ' . $outermostClassCode . '>'
                    . $this->escapeHtml($child->getName())
                    . '</span>' . $this->_addSubMenu(                        $child,                        $childLevel,                        $childrenWrapClass,                        $limit
                    ) . '</li>';                
                $itemPosition++;                $counter++;
            }
    
            if (count($colBrakes) && $limit) {                $html = '<li class="column"><ul>' . $html . '</ul></li>';
            }
    
            return $html;
        }
    }

J'ai ensuite créé un custom JS qui fait l'inverse, et qui remplace les span par des a href en récupérant le contenu de la balise data-atc du span pour le décoder et le transférer dans le  href du a quand l'usager bouge sa souris.

require(['jquery', 'jquery/ui'], function($){
var job= false;
function update_dom(){
  if(job == false)
  {    $(".menu").each(function(){
      var url = atob($(this).attr("data-atc"));
      var anchor = $(this).html();     $(this).replaceWith('<a   href="'+url+'" target="_self" >'+anchor+'</a>');
    });    job= true;
  }
}$(function(){  $("body").mousemove(update_dom);  $("body").scroll(update_dom);  $("body").touchmove(update_dom);
});
}

Mon but est d'éviter que Google ne suive les liens de mon méga menu (je lui présente ces liens dans le contenu textuel de la HP) sans pour autant pénaliser mes visiteurs et leur permettre de cliquer sur des liens "classiques".

Mon problème : si je bouge ma souris durant le chargement de la page, tout se passe à merveille (mon code source est bien avec des <span> au lieu des <a href>, mon menu et mon sous-menu se chargent sous la forme de span puis se transforment en a href au mouvement de la souris etc...). Mais si je laisse ma souris immobile pendant l'intégralité du chargement de la page, quand je la bouge à nouveau, mon sous-menu n'apparait pas au survol des éléments de mon menu. Mes spans ont bien été transformés en a href mais mon sous menu reste désespérément en display none. On dirait que l'action de survol des éléments principaux du menu n'est effective que si les éléments sont des a href + de classe="level-top" pour que l'action de survol display:block fonctionne.

 

Comment puis-je remédier à ça ? Merci d'avance !

1 REPLY 1

Re: Obfuscation du mega menu sous Magento 2.3

Bonjour,

J'imagine que vous vous inspirez de cet article ?

https://www.410-gone.fr/seo/optimisation-on-site/maillage-interne/cocon-semantique/obfuscation.html

Comme vous pourrez le voir dedans, le fait de basculer le span en ahref n'est pas nécessaire car ça rajoute une couche de complexité et de chargement.

D'ailleurs d'un point de vue responsive il faut se rappeler que les évènement mouse n'existent pas.

Si vous voulez réellement faire de l'obfuscation, il faut laisser la navigation en JS pour éviter de pénaliser l'utilisateur.
une autre bonne pratique est d'utiliser les events listener sur le DOM loaded en amont pour ne pas pénaliser les internautes sur mobile.