Obfuscation SEO: Pourquoi et Comment Cacher Ses Liens ? ūüĒé

L'obfuscation SEO consiste à modifier un lien sur une page internet pour le cacher aux yeux des robots d'exploration des moteurs de recherche (crawl spiders) tout en le gardant opérationnel pour l'utilisateur final. Même si cela peut sembler absurde de prime abord, cette technique peut s'avérer utile dans plusieurs scénarios lorsque l'on cherche à:

  • Optimiser de son budget de crawl
  • Mieux contr√īler l'√©coulement du jus SEO
  • Limiter l'impact du marketing sur le SEO
  • Faciliter le d√©veloppement du site sans nuire au SEO

Alors, comment est-ce que l'obfuscation SEO peut vous aider, vous et votre SEO ? Réponse dans cet article de blog centré sur le sujet !

L'obfuscation en résumé

  • L'obfuscation permet de rendre un lien accessible √† l'utilisateur mais invisible pour les robots
  • Elle permet d'optimiser l'√©coulement du jus SEO et le budget de crawl
  • Utilis√©e de la bonne mani√®re, l'obfuscation ne peut pas √™tre sanctionn√©e par Google
  • Trop d'obfuscation isole les pages, elle doit √™tre coupl√©e √† un maillage solide
  • Voici le code minimal pour mettre en place un lien obfusqu√©
<span onclick="window.location.href = this.getAttribute('data-obf')" data-obf="https://virgil-dubois.fr">Bienvenue</span>

Définition de l'obfuscation SEO

Voici la définition de base de l'offuscation (et oui, obfuscation est un emprunt de l'anglais !) :

L'offuscation consiste à délibérement compliquer la compréhension d'une information pour les humains et/ou les machines

En matière de SEO, le sens est très similaire mais plus précis:

L'obfuscation SEO cherche à rendre un lien invisible pour les robots explorateurs des moteurs de recherche tout en le gardant opérationnel pour l'utilisateur finasl

Et maintenant, nous allons voir pourquoi l'obfuscation peu aider notre SEO

Pourquoi obfusquer ses liens ?

À première vue, il semble assez curieux de vouloir des liens utilisables tout en étant invisibles aux yeux de Google.

Et pourtant, obfusquer des liens offre une liberté supplémentaire pour les développeurs SEO :

Optimiser son budget de crawl gr√Ęce √† l'obfuscation

Pour rappel, le budget de crawl correspond à la quantité de données que les robots d'explorations utilisent à chaque passage sur votre site

Par exemple, si mon budget de crawl est de 10Mo et que mes pages font toute un poids de 1Mo, les ¬ę crawl spiders ¬Ľ pourront visiter 10 pages avant de mettre fin √† leur visite

L'optimisation du budget de crawl revient donc à dépenser intelligemment ce budget, pour la découverte et l'indexation de nouveau contenu, précisément ce que l'obfuscation permet !

En rendant certains liens invisibles aux yeux des robots de Google, ils accéderont plus facilement au nouveau contenu, voici quelques exemples:

  • Les pages l√©gales d'un site n'ont pas d'int√©r√™t pour le SEO. De plus, √©tant dans le footer, elles sont accessibles depuis toutes les pages du site. En obfusquant le lien, on s'assure que Google ne crawlera pas les mentions l√©gales autant de fois qu'il y a de page sur notre site !
  • Pi√®ge √† crawl classique, les pages canonis√©es. √Čtant des copies de pages stationn√©es sur d'autres URLs, elles n'ont pas d'int√©r√™t √† √™tre crawl√©es. Les obfusquer lib√®re de la bande passante pour d'autres pages dont le contenu est indexable¬†!
  • Autre cas classique, les pop-ups. S'ils font partie de la page (e.g. ne sont pas charg√©s dynamiquement via du Javascript), les liens seront suivis par les crawlers. Un pop-up √† volont√© commerciale est souvent contraire √† la strat√©gie et m√®nera en dehors du cluster, pouvant causer des dommages au maillage interne
  • Parfois, pour faciliter le d√©veloppement, le menu de navigation mobile est d√©correll√© du menu PC. Ceci a pour effet de doubler les liens, ce qui peut-√™tre un puits sans fond pour le budget crawl d'un site poss√©dant un mega-menu. En obfusquant l'un des deux menus, on √©vite les doublons et on facilite la d√©couverte du contenu important et lucratif pour notre site

Ces exemples recouvrent en partie également l'avantage suivant, une gestion plus fine de l'écoulement du jus SEO !

J'en profite pour faire le premier avertissement, l'obfuscation a ses risques inhérents et il est conseillé de l'utiliser avec parcimonie, continuez à lire l'article pour les détails

Optimiser l'écoulement du jus SEO

Le jus SEO est un concept central du référencement SEO et peut se schématiser de la manière suivante:

Schéma jus SEO

Globalement, le jus SEO découle de de lien en lien (les backlinks alimentent les sites entre eux). Plus une page possède de jus SEO, plus elle sera candidate à bien se placer sur les pages de résultats !

Reprenons le m√™me exemple avec une architecture un peu plus √©labor√©e et proche de la r√©alit√© pour mieux comprendre o√Ļ l'obfuscation peut nous aider

Jus SEO dans un site Ecommerce

Il est bien dommage de passer une partie importante de son jus dans des pages sans vocation SEO comme les pages légales. Essayons maintenant avec de l'obfuscation :

Optimisation jus SEO avec obfuscation de lien

L√† √ßa devient int√©ressant, non seulement le jus vers√© aux mentions l√©gales a √©t√© coup√©, le surplus d√©coule directement aux autres endroits. L'obfuscation nous a permis d'avoir un contr√īle plus ferme sur l'√©coulement du jus SEO de nos diff√©rentes pages. Il y a trois cas d'utilisations principaux o√Ļ c'est int√©ressant

Quels liens faut-il obfusquer ?

  • Au niveau du site, pour d√©vier le jus qui part dans les pages sans vocation SEO comme les pages l√©gales
  • Au niveau de la page, quand on travaille sur une requ√™te comp√©titive et qu'on souhaite avoir une gestion plus fine du jus SEO
  • Au niveau des liens externes, pour supplanter le nofollow (d√©tail ci-dessous)

Concernant les liens externes, Google a longtemps respecté le fait de ne pas suivre les liens affublés d'un attribut rel="nofollow". Depuis quelques années maintenant, Google fait un peu ce qu'il veut et explore les liens / laissant filtrer le jus à sa convenance. L'obfuscation est la solution rêvée. Le lien reste accessible à l'utilisateur, Google ne pourra pas le suivre et le jus n'est pas perdu (un lien en no-follow est une vanne sortante pour le jus SEO, il n'y a aucun bénéfice à l'utiliser)

Avant d'obfusquer l'intégralité de votre site, pensez à lire la suite de l'article, on parle plus loin des risques à aller trop loin dans l'obfuscation !

Autre remarque, avant de faire une fixette sur l'écoulement du jus, assurez vous qu'il y en ai ! Il n'est pas nécessaire de s'occuper d'obfuscation tant qu'il n'y a pas quelques backlinks et liens internes de qualité pour alimenter notre page en jus !

Maintenant que nous avons traité le pourquoi et que nous savons quels liens obfusquer, il est temps de retrousser ses manches et obfusquer !

Comment faire de l'obfuscation SEO ?

L'obfuscation, si on revient aux fondements, nécessite juste de rendre le lien invisible aux yeux des robots d'exploration. Google nous a gentiment documenté les liens explorables pour ses robots, nous allons donc parcourir l'article ensemble:

Google peut uniquement suivre les liens apparaissant sous la forme d'une balise <a> avec un attribut href. Les liens utilisant d'autres formats ne seront pas suivis par les robots d'exploration de Google. Google ne peut pas suivre les liens <a> n'ayant pas de balise href ni d'autres balises opérant comme des liens en raison d'événements de script

Voilà, il n'en fallait pas plus, un lien est considéré crawlable s'il satisfait ces deux conditions:

  • Le lien est dans une balise HTML ancre <a>
  • Le lien est contenu dans un attribut href

En parlant du lien, voici quelques conditions supplémentaires

Assurez-vous que l'URL associée à votre balise <a> correspond à une adresse Web réelle à laquelle Googlebot peut envoyer des requêtes

Voici donc quelques exemples d'obfuscations de liens:

<div href="/products">Ce lien est obfusqué, une balise div ne peut pas contenir de lien</div>

<a link="/products">Ce lien est obfusqué, il n'y a pas d'attribut href</a>

<a href="#product-list">Ce lien est obfusqué, il s'agit d'un lien de navigation</a>

<a href="javascript:void(0)">Ce lien est obfusqué, les robots ne suivent pas le javascript</a>

Ça s'arrête là, inutile d'aller chercher plus loin et de suivre les autres tutoriels qui vous conseillent de coder le lien en base 64 avec des balises exotiques, Google nous a donné tout ce dont on a besoin pour continuer

Maintenant, il ne reste plus que la seconde partie, rendre les liens utilisables pour l'utilisateur final. Pour les liens normaux, il n'y a rien à faire, les navigateurs embarquent la fonctionnalité de base → Balise <a> et attribut href = suivre l'URL lors du clic. Mais vu que l'on contourne tout ça, on ne peut plus compter que sur nous-mêmes, au boulot !

Obfuscation SEO simple

Pour cette premi√®re obfuscation, on va simplifier au maximum pour que l'obfuscation soit accessible aux non-d√©veloppeurs (il faut quand m√™me baragouiner l'HTML pour trouver o√Ļ les changements doivent √™tre r√©alis√©s). Prenons le lien suivant :

<a href="/mentions-legales/">Mentions légales</a>

Pour obfusquer le lien, je modifie l'attribut href

<a data-obf="/mentions-legales">Mentions légales</a>

Note : Ajouter le pr√©fixe 'data' √† ses attributs personnalis√©s est une bonne pratique, d'o√Ļ le data-obf

Les navigateurs pouvant avoir des scripts liés à la balise <a>, pour éviter tout risques, il est également possible de changer la balise (optionnel comme on l'a vu plus haut)

<span data-obf="/mentions-legales">Mentions légales</span>

Note : La balise <span> est à favoriser car il s'agit comme pour la balise ancre, d'un élément inline, voici quelques infos

Il ne reste plus qu'à faire le lien avec un peu de Javascript, il y a justement un attribut tout prêt pour notre besoin : onclick

<span onclick="window.location.href = this.getAttribute('data-obf')" data-obf="https://virgil.dubois.fr">Mentions légales</span>

Oula, on vient de faire un grand pas, reprenons élément par élément :

  • L'attribut onclick ajoute un √©couteur d'√©v√©nement √† notre lien obfusqu√©. D√®s qu'un clic est enregistr√©, il va ex√©cuter le code associ√©
  • window.location.href fait r√©f√©rence √† l'URL active
  • this.getAttribute('data-obf') fait r√©f√©rence √† la valeur de l'attribut data-obf de cette balise

Et voilà, l'obfuscation est complète et fonctionnelle, voici comment ça se passe :

  • L'utilisateur clique sur le lien
  • Le navigateur √©coute le clic et d√©clenche le script associ√©
  • Le script r√©cup√®re l'URL cible √† partir de l'attibut data-obf
  • Le script met √† jour l'URL active du navigateur
  • Le navigateur change de page
  • Notre lien est invisible pour les robots d'exploration
  • Notre lien est fonctionnel pour les utilisateurs de notre site !

Bien s√Ľr, il y a des optimisations √† apporter pour que l'illusion soit parfaite mais la fonctionnalit√© est d√©sormais √† la port√©e de tout le monde !

Note: Pour l'obfuscation de liens dans le header ou dans une section de votre site, il est possible que le passage à la balise <span> ai des impacts sur le style, pensez à vérifier l'apparence du lien (également lors du survol) et remettre à jour le CSS au besoin

Note 2: Il est possible de remplacer le bout de code this.getAttribute('data-obf') par this.dataset.obf pour plus de concision, les deux sont équivalents

Obfuscation SEO optimisée

L'obfuscation optimisée, en plus de la gestion du clic gauche, possède les fonctionnalités suivantes:

  • Gestion du clic molette
  • Gestion de l'ouverture d'un nouvel onglet
  • Gestion du style CSS
  • Plus de scalabilit√©

Moins d'explications, plus de code, voici l'obfuscation SEO optimisée, voici un exemple sur Codepen


// √Čcouteur d'√©v√©nements d√©l√©gu√©s
document.addEventListener("pointerup", (event) => {
  // On retire les éléments 'document' et 'window' du chemin de l'événement
  let obfuscatedPath = event.composedPath().slice(0, -2);

  let obfuscatedLink = obfuscatedPath.find((element) =>
    element.hasAttribute("data-obf")
  );

  if (typeof obfuscatedLink !== "object") return;

  obfuscatedLinkHandler(event, obfuscatedLink);
});

// Gestion des liens obfusqués
const obfuscatedLinkHandler = (event, element) => {
  let linkTarget = element.dataset.obf;
  let newTab = element.dataset.newTab !== undefined || event.button === 1;

  if (newTab) window.open(linkTarget, "_blank");
  else window.location.href = linkTarget;
};

Et comme toujours, pensez à tester l'implémentation du code, surtout les première fois, voici comment faire

Tester l'obfuscation d'un lien

La première étape, vérifier que le lien est fonctionnel, sinon quel intérêt après tout !

Une fois fait, je recommande de vérifier le code source en inspectant le lien

Inspecter un lien obfusqué

Vous aurez accès aux outils de développement, ainsi qu'à la définition HTML de votre lien

Il ne reste plus qu'à comparer votre lien avec la définition d'un lien obfusqué comme on l'a vu plus haut

Autre possibilité pour rapidement checker qu'un lien est bien obfusqué, vérifiez les coins inférieurs du navigateur. Qaund on survole un lien, ce dernier est affiché dans le coin inférieur gauche ou droit de votre navigateur, ce n'est pas le cas avec un lien obfusqué

Inspecter un lien obfusqué

Et si vous n'êtes toujours pas convaincu, vous pouvez toujours:

  • Crawler la page en question avec ScreamingFrog

Pour la m√©thode Screaming Frog, observez la partie ¬ę Liens sortants ¬Ľ, si vous trouvez votre lien, quelque chose s'est mal pass√©

Pas de lien sortant obfusqué sur Screaming Frog

En activant l'extension, les liens de la page seront mis en surbrillance, les liens obfusqués ne seront pas reconnus et resteront donc tels quels

Lien obfusqué invisible pour les crawlers

Dangers de l'obfuscation SEO

Maintenant que vous êtes incollables sur l'obfuscation, il est temps de conclure avec les sujets annexes dont je souhaite vous parler

L'obfuscation est-elle conforme aux bonnes pratiques de Google

La principale critique envers l'obfuscation est celle de la moralité, de la ressemblance à du cloaking. Autant être clair au plus vite, je ne connais personne qui ai reçu une pénalité pour de l'obfuscation d'URL (c'est le principe, les moteurs de recherche ne voient pas les liens) et l'entièreté des cas d'utilisations sont bénéfiques pour Google.

Google dépense des ressources considérables pour explorer la toile et indexer le contenu à haute valeur ajoutée. Le diriger vers les contenus utiles et éviter de le renvoyer des centaines de fois vers vos mentions légales, c'est faire une faveur à Google, une faveur pour la planète et une faveur pour la croissance de votre site, étant donné que votre budget crawl sera mieux utilisé !

Trop d'obfuscation tue l'obfuscation

Comme évoqué plus haut, nul besoin de s'inquiéter de l'obfuscation de vos liens si vous n'avez pas un site mastodonte avec des liens alimentant votre page en jus SEO. Le travail doit se limiter uniquement aux cas énoncés plus haut !

Pour la simple raison que le maillage interne et plus spécifiquement le nombre de liens internes à une page contribue au ranking. C'est déjà un problème déjà assez récurrent, alors ne venez pas aggraver la situation avec de l'obfuscation néfaste pour votre SEO

Pour rappel, je recommande que toutes les pages à vocation SEO essaient d'avoir 10 liens entrants uniques au minimum et une profondeur d'exploration inférieure ou égale à 3. Sans cela, le contenu sera trop difficile à trouver pour les robots, le jus aura des difficultés à circuler librement et votre page ne sera pas considérée comme elle mérite par Google !

Pensez aux effets de bord

Je vais prendre l'exemple de l'obfuscation des liens dans les pop-up à volonté transactionnelle. Ils vont souvent de pair avec de l'analyse de données via Google Analytics pour suivre leur efficacité. Si jamais ils se retrouvaient obfusqués, des mesures devront être prises pour que le suivi continue sans problèmes.

Pour vous aider dans cette t√Ęche, voici comment cibler un lien obfusqu√©:

// Cibler les liens classiques de la page
document.querySelectorAll("a")
// Cibler seulement les liens obfusqués de la page
document.querySelectorAll("span[data-obf]")
// Cibler tous les liens de la page
document.querySelectorAll("a, span[data-obf]")

De manière plus générale, réfléchissez aux raisons qui vous laissent penser que l'obfuscation peut apporter quelque chose à votre SEO, cela vous évitera des soucis plus tard

Conclusion sur l'obfuscation

Pour conclure, je dirais que l'obfuscation est une corde supplémentaire à l'arc du SEO. La liberté offerte par la possibilité de rajouter des liens sans conséquence pour son SEO ouvre des portes pour les développeurs, pour les responsables SEO ainsi que pour le marketing

√Čgalement, un contr√īle plus rigoureux peut-√™tre exerc√© quand c'est n√©cessaire, parfait pour les requ√™tes les plus comp√©titives

Nous avons également vu qu'elle n'est pas très complexe à mettre en place et peut présenter des avantages, dans certains cas, certes assez précis mais bien réels

Si jamais vous avez des idées d'autres sujets que vous souhaitez que je traite concernant le SEO technique, n'hésitez pas à me les proposer ou à venir en discuter en me contactant

Et si jamais vous souhaitez mettre en place de l'obfuscation sur votre site, je peux vous aider, contactez-moi !