Obfuscation SEO de liens et accessibilité
La méthodologie pour des liens conformes au RGAA
L’obfuscation de liens fait partie des techniques SEO avancées de maillage interne. Cette stratégie destinée à mieux distribuer la popularité acquise par chaque page repose sur une manipulation de l’algorithme : si le lien existe bel et bien pour l’utilisateur, il doit demeurer invisible aux yeux des algorithmes des moteurs de recherche, Google et tête.
Or, il est très compliqué de cacher un lien aux yeux de Google sans qu’il perde son accessibilité et devienne non conforme aux critères du RGAA. Je vous propose la méthodologie pour réaliser une obfuscation de lien à la fois SEO-friendly et conforme au Référentiel général d’amélioration de l’accessibilité.
L'obfuscation de lien : une technique SEO de maillage interne
L’obfuscation de liens consiste à masquer à Google l’existence d’un lien :
- L’internaute voit un lien à l’écran et peut interagir avec lui ;
- Google n’identifie pas la balise comme un lien, et la considère comme un élément lambda tel qu’un
<span>ou un<div>.
Derrière un principe en apparence simple se cache une technique avancée de maillage interne destinée à rediriger la popularité acquise par une page web vers les pages web stratégiques.
L’intérêt SEO et le principe de l’obfuscation de lien
Vous pouvez aborder la popularité comme un fluide qui serait capté grâce aux liens entrants et redistribué par les différents liens sortants, qu’ils soient internes ou externes.
Chaque page web a besoin d’une certaine quantité et qualité de popularité pour se positionner : accorder trop de popularité à une page sans intérêt SEO se fait au détriment du référencement de vos pages les plus concurrentielles.
Vous pouvez décider de ne pas accorder de popularité à une page web :
- Avec un attribut
rel="nofollow", la popularité n’est pas accordée à la page de destination, mais elle n’est pas non plus redistribuée aux autres liens : elle est purement et simplement perdue. - Avec une obfuscation, vous masquez tout simplement l’existence du lien aux moteurs de recherche : l’utilisateur voit toujours le lien et peut interagir avec lui, mais Google visualise juste un texte sans lien.
Vous avez du mal à comprendre ? Imaginez une source qui aurait un certain débit, défini en fonction des liens entrants reçus, internes et externes, et qui redistribuerait ce débit grâce à différents canaux pour alimenter des cultures :
- Des plantations gourmandes en eau (riz, coton, avocat…) ;
- Des plantations moyennement gourmandes en eau (blé, orge, soja…) ;
- Des plantations peu gourmandes en eau (sorgo, manioc, vigne…) ;
- Des terres incultes, enfin, sans besoin d’apport en eau.
Ces canaux sont couverts et servent de chemins à des promeneurs qui les empruntent pour se rendre d’un champ à l’autre.
L’attribut rel="nofollow" revient à laisser la vanne ouverte au niveau de la source, puis à faire à un trou dans le canal pour que l’eau s’en échappe. Le promeneur longe le canal jusqu’à la plantation, sans réaliser que l’eau finit dans la nature et qu’elle n’arrive jamais jusqu’au champ.
L’obfuscation de lien consiste à fermer purement et simplement la vanne, sans que rien ne change pour un utilisateur. L’eau ne se perd plus dans la nature, mais l’utilisateur peut toujours longer le canal pour rejoindre la plantation, sans savoir que celui-ci est à sec.
La popularité est un critère analysé et traité par les algorithmes des moteurs de recherche pour déterminer la qualité, la pertinence et la légitimité d’une page web.
Les moteurs de recherche, Google en tête, analysent deux grands facteurs de popularité :
- Le maillage interne : les liens qui existent entre les différentes pages d’un même site web ;
- Le netlinking : les liens obtenus depuis des sites tiers.
L’algorithme historique de Google pour mesurer la popularité d’une page est le Page Rank. Les professionnels du référencement naturel utilisent également le terme de Page Rank interne pour désigner le page rank redistribué au sein d’un site par le maillage interne.
Tous les liens ne se valent pas, et certains ont plus d’impact que d’autres pour votre SEO. Les moteurs de recherche analysent plusieurs paramètres :
- L’emplacement du lien au sein de la page ;
- L’ancre de lien (le texte cliquable ou l’attribut ALT pour une image) ;
- Le texte à proximité du lien ;
- La sémantique globale de la page ;
- La thématique du site (en cas de netlinking) ;
- Etc.
Le pied de page accueille un grand nombre de liens vers des pages qui n’ont pas vocation à être positionnées sur des requêtes SEO générant du business ou du trafic qualifié : mentions légales, conditions générales de vente, déclaration d’accessibilité, etc.
En obfusquant ces liens, vous évitez de diluer votre popularité et vous réservez votre Page Rank interne aux pages qui en ont le plus besoin.
Ce n’est qu’un exemple d’utilisation de l’obfuscation en SEO. Vous pouvez aussi y recourir dans des stratégies plus avancées, pour conserver par un effet de silo sémantique.
Une technique historique d'obfuscation non conforme au RGAA
Le JavaScript est la technique employée historiquement par les professionnels du référencement pour masquer des liens aux yeux des algorithmes des moteurs de recherche.
Concrètement, le code source ne présente plus la balise classique <a>, que les robots de Google repèrent instantanément. À la place, on utilise une balise neutre, comme un <span>. Vous trouveriez alors dans votre code source un élément du type : <span class="obflink" tabindex="0" role="link" data-url="https//www.benjaminthiers.net/">.
Afficher l’adresse de la page de destination en clair dans le code source serait évidemment contre-productif. Le référenceur remplace l’URL de destination par une suite de caractères plus difficilement interprétable par les moteurs de recherche, en utilisant le plus souvent un encodage en base64. Mon illustration précédente devient caduque, car vous constateriez plutôt la présence de ce type d’élément : <span class="obflink" tabindex="0" role="link" data-url="aHR0cHMvL3d3dy5iZW5qYW1pbnRoaWVycy5uZXQv">.
Le texte contenu dans la balise <span class="obflink"> a le même aspect visuel que les autres liens et peut prendre le focus grâce à l’attribut tabindex="0". Un ARIA link role="link" permet aux technologies d’assistance d’aborder cet élément comme un lien.
Quand un internaute décide de cliquer sur ce « simili-lien », un code JavaScript :
- Récupère la chaîne de caractères qui correspond à l’URL ;
- Décode la chaîne de caractères pour la transformer en URL lisible ;
- Ordonne au navigateur d’ouvrir cette page dans un nouvel onglet ou de diriger l’internaute vers la nouvelle page depuis cet onglet.
Mais cette “émulation de lien” présente le plus souvent des non-conformités relevées durant un audit RGAA.
Réussir une obfuscation de lien avec la méthode « traditionnelle » est un véritable travail d’équilibriste.
Vous devez ainsi vous assurer de respecter les critères associés de la thématique 7 associée aux scripts :
- Critère 7.1 : le composant possède bien un nom accessible pertinent, un rôle qui le définit comme un lien (
role="link"), et il est correctement restitué par les technologies d’assistance. - Critère 7.3 : le simili-lien est bien contrôlable au clavier ou par tout dispositif de pointage.
- Critère 7.4 : le changement de contexte est communiqué à l’utilisateur avant son clic, notamment en cas de changement d’onglet.
Mais ce n’est que le début de vos soucis. Vous devez aussi répondre aux critères de la thématique 10 associée à la présentation :
- Critère 10.6 : si vos liens texte sont signalés uniquement par la couleur, vous devez respecter les obligations de contraste, d’indication visuelle au survol et au focus.
- Critère 10.7 : le lien obfusqué doit avoir une prise de focus visible.
Vous l’avez compris : un parcours semé d’embûches vous attend, et il est bien souvent synonyme de prises de tête.
Une autre technique d’obfuscation consiste à générer la balise <a> dynamiquement au chargement de la page via JavaScript. L’URL n’est pas écrite en dur dans le HTML, elle est reconstituée dans le DOM par le script.
Sur le papier, c’est une bonne stratégie. Mais elle se révèle dans les faits particulièrement précaire, car Google exécute désormais le JavaScript de mieux en mieux : une URL construite au chargement de la page sera donc découverte et indexée malgré tout.
Astuces et tutoriels sur l'accessibilité Web
Obfuscation de lien : une injection conditionnelle de la balise <a>
J’ai trouvé la solution pour contourner cette limite, et proposer une solution pérenne d’obfuscation de lien, offrant de solides garanties d’accessibilité web et quasiment impossible à détecter lors d’un audit RGAA.
J’ai repris la technique d’encodage de l’URL côté serveur, avec génération de la balise <a> par le navigateur grâce à JavaScript.
Mais l’injection est désormais conditionnée à la première interaction humaine réelle, que Google n’effectue jamais.
Les moteurs de recherche voient un code du type :
<span tabindex="0" tabindex="0" role="link" aria-label="Cliquez ici" data-url="aHR0cHM6Ly93d3cuZnJlZS5mci8=">Cliquez ici</span>
À la première interaction, le lien est généré sous cette forme :
<a href="https://www.monsite.com/" target="_blank">Cliquez ici</a>
Une extension WordPress pour une obfuscation de lien accessible de vos liens
J’ai développé un plugin WordPress, intitulé Link Obfuscator, qui permet de réaliser très facilement une obfuscation de lien indétectable aux critères du RGAA :
- Vous saisissez les paramètres de votre lien ;
- Vous obtenez un shortcode ;
- Vous copiez-collez le shortcode dans votre page.
Le lien suivant est obfusqué à l’aide de ce plugin : Accessibilite.numerique.gouv.fr
Vous pouvez vibe coder un plugin similaire. Je suis en train d’étudier la possibilité de rendre mon extension publique.
Vous pouvez personnaliser votre extension WordPress en fonction de vos besoins et de vos attentes. Par exemple, j’ai demandé à ce que plusieurs solutions d’encodage soient disponibles.
Le lien est obfusqué par défaut. La balise <a> est générée dès que l’une des actions suivantes est effectuée :
- Mouvement de souris ;
- Clic ;
- Appui sur une touche clavier ;
- Contact tactile (appareils mobiles) ;
- Prise de focus par la touche
Tab.
La génération à la première interaction humaine rend l’obfuscation quasiment invisible à un auditeur RGAA. Il verra un lien tout à fait accessible au premier mouvement de souris ou à la prise de focus, et il ne découvrira probablement jamais le <span> initial.
les lecteurs d’écran et les technologies d’assistance qui affichent une liste de liens avant la moindre interaction humaine doivent pouvoir considérer le <span> comme un lien. C’est pour ça que le code initial comprend :
- Un ARIA link (
role="link") - Un nom accessible explicite (
aria-label="") - Une prise de focus (
tabindex="0")
Pensez également à adopter une mise en forme identique à celle de vos autres liens (couleur, soulignement, etc.)
Pour ma part, en tant qu’auditeur RGAA certifié, je valide ce type d’obfuscation de liens.