L’obfuscation, ou masquage de liens, est un sujet récurrent dans le monde du référencement. Depuis de très nombreuses années, les SEO ont toujours cherché le moyen de cacher les liens aux moteurs de recherche, et plus particulièrement Google, afin de manipuler la transmission du « jus » SEO à leur avantage.
Mais aujourd’hui, est-ce que l’obfuscation de lien est toujours d’actualité ?
Une problématique : maîtriser la répartition du « pagerank »
Aux origines des techniques d’obfuscation (que j’ai vu apparaître vers 2006 ou 2007 pour ma part), on retrouve l’élément fondateur de l’algorithme de Google : le fameux PageRank.
Au fil des années, ce qui était facilement manipulable par les référenceurs pour augmenter plus ou moins artificiellement leur PageRank est devenu plus difficile à appréhender, Google ayant progressivement changé les règles du jeu et introduit de nouveaux éléments, engendrant des recalculs et surtout des pertes de link juice (« jus SEO »).
Dès lors, on a eu recourt à l’obfuscation, afin de pallier aux obligations techniques que nous imposait le moteur.
Qu’est-ce que le PageRank ?
Inventé (ou plutôt adapté d’après un algorithme existant) par Larry Page, l’un des deux fondateurs de Google et déposé au nom de ce dernier (le brevet original est en ligne ici), le PageRank (dont l’acronyme PR est encore parfois utilisé) est un algorithme destiné à classer les pages sur internet, selon leur degré d’importance relative (ce que l’on appelle leur popularité). Il est notamment fondé sur les liens entre pages selon une méthodologie inspirée du « problème du voyageur de commerce », avec un calcul de la note donnée aux liens de chaque page, selon des règles précises, à partir de la « valeur » de la page transmettant le « jus ».
Concrètement, le PageRank est une mesure mathématique (dont la valeur est comprise entre 0 et 1) faisant parti des très nombreux critères techniques que Google prend en compte pour classer les pages dans son index. Alloué à la notion de popularité (de la page), il permet de quantifier l’intérêt potentiel qu’elle peut avoir auprès des internautes, la popularité de la page étant proportionnelle à sa valeur. Comme l’indique l’algorithme original, la totalité du PageRank du web (connu par Google) vaut 1, chaque page prenant son infime part du gâteau.
La transmission du PageRank se fait parmi les liens que comportent une page, à partir de la valeur accordée à cette dernière (qui est donc répartie vers les pages de destination, selon des règles complexes) ; pour vulgariser très basiquement son fonctionnement, voici à quoi pourrait ressembler la transmission du PageRank dans un site, où les liens seraient à sens unique :
Actuellement, il est impossible de définir quelle pondération accorde Google à son PageRank dans le classement des pages dans ses résultats de recherche. On peut néanmoins considérer qu’il revêt une certaine importance, et que plus il est élevé, plus la page sera crawlée souvent (et donc mise à jour dans l’index) puisqu’encore aujourd’hui, le netlinking est toujours un levier majeur pour le ranking.
Un certain nombre d’outils permettent en outre d’en donner une valeur assez fiable, à l’image du Citation Flow du célèbre outil Majestic SEO, ou du Host Value du très récent mais néanmoins excellent babbar.tech.
On peut en déduire 3 choses essentielles :
- Un lien d’une page A vers une page B augmente le PageRank de la page B, puisque la page A considère que la page B revêt une certaine importance
- Plus le PageRank de la page A est élevé, plus le « jus » transmis à la page B sera proportionnellement élevé (de l’intérêt d’obtenir des liens depuis des sites « populaires » !)
- Moins la page A comporte de liens sortants, plus le « jus » transmis à la page B sera élevé (puisque la part de « jus » de la page A est réparti sur les liens partant de cette dernière)
On peut donc dire que le PageRank d’une page dépend :
- du nombre de pages faisant un lien vers elle
- du PageRank de chaque page liante
- du nombre de liens sortants que chaque page liante comporte
Il ne dépend d’aucun autre critère, quel qu’il soit (nombre de clics, trafic, etc.)
Pour aller plus loin (puisque les explications données ici sont volontairement simplifiées), je vous conseille l’excellente intervention de Sylvain Peyronnet chez Doeuf, car il y vulgarise assez clairement le fonctionnement et la transmission du PageRank :
Comment améliorer son PageRank ?
Lorsque l’on a compris comment fonctionne le PageRank, il est très facile d’en déduire comment l’améliorer :
- Faire des liens vers son site pour en augmenter la popularité, bien sûr (le fameux netlinking si cher aux référenceurs !), et si possible depuis des sites « puissants » et dans la même thématique
- Optimiser son maillage interne, afin de réduire les pertes inutiles de « jus » SEO (ce que l’on appelle le « PR Sculpting »)
Si le netlinking est une évidence pour toutes et tous (ce n’est d’ailleurs pas l’objet de cet article) et ferait l’objet de longues discussions, l’optimisation du maillage interne l’est un peu moins. J’avais d’ailleurs écrit un article en 2015 à ce propos, où j’expliquais comment optimiser le maillage interne (grâce à l’obfuscation) sur une boutique en ligne Prestashop. J’y reviendrai plus loin.
En quelques mots, l’optimisation du maillage interne, notamment en vue d’optimiser la transmission du PageRank en interne, consiste à scrupuleusement choisir quelles pages lient quelles autres pages, et à supprimer tous les liens potentiellement inutiles.
2009 et la fin du « PR sculpting »
Jusqu’en 2009, on utilisait pour favoriser le « PR Sculpting » les fameux liens avec un attribut particulier, le « nofollow » : Google considérait que ces liens ne devaient pas être pris en compte dans le calcul du PageRank entre les pages, ils n’étaient donc pas comptabilisés pour le partage du « jus ».
En 2009, Google annonça officiellement qu’il comptabilisait les liens « nofollow » dans le partage du PR, mais sans leur faire transmettre le « jus » SEO : en d’autres termes, les liens « nofollow » font perdre une partie du PageRank transmis par la page ! L’annonce officielle fut faite à la mi 2009, et Google admit que ce mode de calcul était déjà en vigueur depuis près d’un an au moment de l’annonce, afin de faire face aux abus de la part des webmasters.
On peut considérer que c’est à ce moment que l’obfuscation fit réellement son apparition (même si certains webmasters l’utilisaient déjà).
Au travers de quels liens le « PageRank » est-il transmis en 2024 ?
Attention, il ne faut pas confondre « transmission du PageRank » et indexation/crawlabilité. Google sait aujourd’hui suivre un certain nombre de types de liens, mais ne les utilise pas pour autant pour transmettre son fameux PageRank.
Si Google « sait » suivre les liens, pour le crawl et l’indexation, de type area (zones cliquables dans une image), form (formulaire) ou link (généralement vers des ressources ou des liens alternatifs), il ne prend en considération, pour la transmission du PR, que les balises de lien classiques <a href=…>.
Il faut également distinguer la typologie des liens classiques. Les liens « nofollow » ne transmettent aucun PageRank, mais autorisent le crawl et éventuellement l’indexation (si les pages cibles ne sont pas en « noindex » bien évidemment).
Par ailleurs, lorsqu’une même page A fait plusieurs liens vers une même page B, seule la première ancre de lien est prise en considération au niveau sémantique. Et le « jus » n’est pas distribué sur tous ces liens, mais en partie seulement (ndlr : je n’ai trouvé aucune étude permettant de confirmer ou infirmer cela, mais cela semble logique lorsque l’on s’intéresse aux algorithmes mis en oeuvre)
Partant de là, on peut imaginer qu’il existe des techniques destinées, au niveau du maillage interne, à améliorer la répartition du link juice au sein des pages (par soucis de simplicité je n’ai pas parlé de la notion de thématisation du PageRank, d’ailleurs abordée dans la vidéo ci-dessus, mais cela fera l’objet d’un article ultérieur)
L’essor de la structuration thématique
L’organisation logique des contenus en « grappes » ou silos thématiques a été popularisée en 2010 par Laurent Bourrelly, référenceur chevronné et inventeur du célèbre cocon sémantique (une forme évoluée du siloing thématique mettant en œuvre non seulement des techniques de structuration et de linking interne, mais également toute une stratégie de netlinking externe, qu’il serait trop long de détailler ici)
Il existe aujourd’hui plusieurs méthodes de structuration thématique des contenus, plus ou moins complexes, plus ou moins couteuses (en temps et en budget) mais qui ont un point commun : elles améliorent significativement la distribution du PageRank au sein du site, car elles utilisent justement les particularités des algorithmes mis en œuvre pour son calcul pour en soutirer la substantielle moelle au maximum.
Le point commun à ces méthodologies est de cloisonner les pages en arborescences thématiques, ou silos, qui doivent être « étanches » en termes de liens et n’autoriser que les liens vers leur page mère, leurs pages filles, et éventuellement leurs pages sœurs de même branche, et ce, idéalement au sein même du contenu « utile » (pas depuis les menus, le footer ou la sidebar !) puisque les dernières moutures de l’algorithme du PageRank prennent en considération la position des liens dans la page pour en pondérer l’importance.
Cependant, l’utilisation de ces techniques se heurte à une chose simple : l’existence de liens internes nécessaires à une bonne expérience utilisateur, et qui ne respectent pas la structuration désirée de l’information. On y trouve habituellement :
- les pages « légales » (CGV, mentions légales, RGPD, etc.)
- les pages purement fonctionnelles (ajouter au panier, mettre en favori, comparer des produits, etc.)
- les « méga menus » bien évidemment (et j’oserais dire : les menus de manière générale !)
- parfois des pages de taxonomies (par exemple sur WordPress, les pages « tag » par défaut)
- parfois des pages destinées aux filtres ou aux tris (navigation à facettes sur un site e-commerce)
- bien souvent, les liens « cachés » inutiles (flux RSS, pages auteur, etc.)
- Pour les sites concernés : les liens d’affiliation ou publicitaires
Toutes ces pages diluent inutilement le PageRank, en plus de poser souvent des problèmes de duplication de contenus, d’indexation et même de crawlabilité.
La solution pour éviter que Google ne les suive existe : c’est l’obfuscation !
Qu’est-ce que l’obfuscation de lien ?
J’avais spoilé un peu la définition de ce qu’est l’obfuscation en introduction de cet article : l’obfuscation consiste simplement à masquer les liens aux moteurs de recherche, tout en préservant l’UX (expérience utilisateur) et en autorisant le clic et la navigation.
Si l’on reprend donc notre schéma très simplifié de transmission du PageRank, voici ce que cela donnerait avec des liens obfusqués :
On voit que le PageRank n’est ici plus « perdu », mais distribué uniquement parmi les liens « visibles » par le moteur !
Pendant longtemps, cette technique a été considérée comme « border line », voire black hat, car d’aucuns considéraient qu’il s’agissait de duper les moteurs de recherche en vue d’augmenter le trafic artificiellement.
Pour ma part, la technique n’est aucunement destinée à duper l’internaute (puisque c’est avant tout pour lui qu’on travaille !) et donc elle se justifie pleinement tant qu’il n’y a pas tromperie sur le contenu.
Dès lors, comment fait-on pour obfusquer un lien ?
La technique du pauvre : le bouton HTML
Ce n’est pas de l’obfuscation à proprement parler, puisqu’elle ne permet que d’éviter la transmission du PageRank, mais pas le crawl et par extension l’indexation potentielle de la page de destination. Cependant, ça peut dépanner dans certains cas.
<form method="post" action="/url-destination/" class="lien-obfusque"> <button type="submit">Ancre de mon lien</button> </form> Langage du code : HTML, XML (xml)Il suffit d’un simple règle CSS pour « transformer » le bouton en joli lien rouge dans le texte :
form.lien-obfusque { display:inline; clear:none; } form.lien-obfusque button { margin: 0; padding: 0; background: inherit; color: #ff0000; text-decoration: underline; } Langage du code : CSS (css)À noter que cette technique n’est pas « correcte » d’un point de vue technique (code HTML non conforme W3C si vous placez les liens dans un paragraphe de texte…) ; elle reste néanmoins fonctionnellement applicable par exemple pour coder un menu déroulant ou des boutons action (justement).
Pour une mise en application sur un menu WordPress, je vous souhaite néanmoins bon courage, car il faut aller modifier le rendu des menus, ce qui n’est pas une simple affaire…
Le Javascript à la rescousse de l’obfuscation de liens
La meilleure méthode reste à mon sens l’intégration du JavaScript, avec l’utilisation de balises span (qui peuvent s’insérer absolument n’importe où) et des liens encryptés (du Base64 suffira amplement !)
Voici un petit exemple. Prenons un lien classique :
<a href="/url-destination/" class="class-lien">Ancre de mon lien</a> Langage du code : HTML, XML (xml)Vous devez commencer par encrypter l’URL en Base64 via le code de votre CMS (en PHP, cela se fait via la fonction base64_encode) ; puis on remplace la balise lien par une balise span, en prenant soin (bien évidemment) de modifier la feuille de style CSS pour que cette balise présente le même affichage que notre lien :
<span data-loc="L3VybC1kZXN0aW5hdGlvbi8" class="class-lien lien-obfusque">Ancre de mon lien</span> Langage du code : HTML, XML (xml)Au niveau CSS, il suffit d’afficher notre pointeur de souris :
.lien-obfusque { cursor: pointer !important; } Langage du code : CSS (css)Voici un petit bout de JQuery pour décoder le lien à la volée et générer un clic, grâce à la fonction JavaScript atob, qui permet de décrypter le Base64 :
$('.lien-obfusque').on('click', function(e) { e.preventDefault(); var link = atob($(this).data('loc')); $(location).attr('href',link); }); Langage du code : JavaScript (javascript)L’encodage des URL permet de s’assurer que Google ne sera pas tenté de suivre des textes ressemblant à des adresses de pages. On peut utiliser d’autres encodages que le Base64, mais d’expérience, les liens encodés de cette façon ne sont JAMAIS suivis (Google ne perdra pas de temps à essayer de les décrypter !)
Pour les plus méfiants, intégrez dans votre robots.txt une directive permettant d’interdire la lecture de votre fichier JS :
Disallow: /chemin/vers/votre/fichier/javascript/script-obfuscation.js Langage du code : Apache (apache)À noter qu’il existe, pour les CMS comme WordPress ou même Prestashop, des plugins permettant de vous mâcher le travail. Beaucoup sont payants, d’autres gratuits. Mais dans quasiment tous les cas, il faut retoucher profondément les feuilles de style CSS pour adapter la partie visuelle.
Une autre technique, souvent mise en œuvre sur les gros sites, consiste à générer les ensembles de liens contigus (comme les mégamenus ou les navigations à facette) via des fichiers Javascript, qui sont ensuite rendus inaccessibles aux moteurs de recherche via une simple règle dans le robots.txt (et parfois un peu de cloaking…)
Obfusquer des liens avec WordPress : un plugin magique et gratuit !
S’il existe des plugins d’obfuscation pour WordPress qui fonctionnent bien, beaucoup sont payants. Mais pourtant, l’un des meilleurs d’entre eux est gratuit, et fonctionne parfaitement bien (d’ailleurs je l’utilise sur ce site) : Link Juice Optimizer !
Il se trouve que j’ai fait une vidéo, disponible sur YouTube, expliquant comment l’utiliser. Je vous invite à la découvrir ici : Optimiser son maillage interne sous WordPress grâce à l’obfuscation.
Les bienfaits de l’obfuscation de liens
Au final, l’obfuscation, si elle est un peu technique à mettre en œuvre, permet de structurer finement son maillage interne et de se concentrer totalement sur le contenu. En ressortent deux principaux avantages :
- Maîtriser la distribution du PageRank interne : actuellement, l’obfuscation est le moyen le plus efficace pour maîtriser très finement la répartition du jus en interne, et mettre en œuvre des structures thématiques « strictes » telles que nous les avons vues plus haut (grappes thématiques, silos ou cocons sémantiques, etc.)
- Préserver l’UX en favorisant le SEO : en s’affranchissant du rapport évident entre design et linking interne, on préserve totalement l’expérience utilisateur tout en favorisant, au final, l’optimisation « on site » très finement.
Il faudra toutefois prêter une attention particulière à l’accessibilité (aux personnes déficientes visuelles) car qui dit obfusquer les liens, dit rendre invisible ces derniers aux malvoyants.
Questions/réponses sur l’obfuscation
Exemples sur le web
Le premier exemple à vous citer est le site sur lequel vous vous trouvez : j’ai fait le choix de l’obfuscation car je voulais réaliser une refonte de ce dernier avec le maximum d’optimisations qu’il m’était possible de faire. Le menu est totalement obfusqué ainsi que certains boutons (les liens étant réalisés dans le contenu, ou à défaut en bas de ce dernier, juste avant le footer, pour ce qui est des articles).
Mais de nombreux sites connus utilisent également l’obfuscation, avec le même objectif d’optimiser le linking interne. CDiscount par exemple, « optimise » ses pages internes au niveau des menus (il suffit d’afficher la version en cache Google pour clairement s’en rendre compte !)
C’est également le cas de sites e-commerce comme materiel.net ou Mano Mano (les supermenus des pages internes sont masqués pour Google). Leur technique est simple : les menus déroulants sont générés en JavaScript à la volée, et l’accès au fichier JS correspondant est interdit aux moteurs (obfuscation de masse en quelque sorte).
Et vous, utilisez-vous l’obfuscation sur vos sites ?
Voir tous les articles de la catégorie Techniques de référencement
Merci pour cet article de grande qualité.
Bravo pour la qualité de l’explication 🙂
Euh, sur la partie « Pour les plus méfiants, intégrez dans votre .htaccess une directive », il s’agit plutôt de robots.txt, non ?
Ah ah exact !!! Je corrige ^_^
Bonjour,
très intéressant, comment ajouter la fonction pour ouvrir une page. Dans l’exemple d’un lien vers facebook, la fonction _blank ne fonctionne plus.
Normalement si l’on clique sur une icône facebook, elle doit ouvrir une nouvelle page vers facebook.
J’ai testé avec
$(‘.ofsb’).on(‘click’, function(e) { e.preventDefault(); var link = atob($(this).data(‘loc’)); $(location).attr(‘href’,link); window.open(link) });
mais ca ouvre dans la même page, et aussi une nouvelle page.
merci pour votre aide.
Dans ce cas il faut supprimer $(location).attr(‘href’,link); et utiliser window.open(link,’_blank’);
(à tester mais ça devrait fonctionner !)
Au pire utiliser deux fonctions différentes selon que c’est nouvelle fenêtre ou pas.
Merci pour ces infos.
J’ai testé, ça ne fonctionne pas.
Avec ça oui, mais je ne sais pas si c’est propre : window.open(link);
Ah effectivement, certains navigateurs (dont Chrome) n’acceptent pas (plus) ce genre de chose.
Bonjour Cédric,
question de débutant/la technique c’est pas mon truc.
Si je paramètre différents blocages avec le fichier robots.Txt plutot qu’avec l’obfuscation, est-ce que le résultat est le même ?
Ou bien le blocage aura le même impact qu’un lien, c’est-à-dire perte de jus ?
Bonjour Emmanuel
Le résultat est très différent car le robots.txt interdit à Google de crawler les liens, mais n’empêche pas la perte de pagerank via le lien en question. Donc il y a effectivement une perte de jus.
L’obfuscation reste le seul moyen de laisser un lien fonctionnellement utile pour les internautes tout en préservant le pagerank de la page où il se trouve.
Hello Cédric,
tenté de te joindra via Twitter, je tente ma chance ici : ta technique fonctionne-t-elle pour Woocommerce ?
Je cherche à masquer pour les bots les liens de type « add to cart », « add to wishlist » , etc
Possible selon toi avec ce plugin ?
Merci