LinkedIn Link to LinkedIn Twitter Link to Twitter

L’obfuscation de lien : Méthodologie & Code

0 commentaires

L’obfuscation appelée aussi offuscation de lien ou encore cloacking permet de cacher à Google un ou des liens sur une page web. Pourquoi ? Car à ce jour, le maillage interne joue un rôle crucial dans le référencement d’un site internet. Cacher un lien permet d’optimiser la diffusion du PageRank de son maillage interne.

Pourquoi faire de l’obfuscation ?

Le PageRank est comme un fluide qui se transmet de page en page diffusant l’autorité du site. Un schéma étant toujours plus clair qu’un pavé de texte, voici comment se diffuse le jus d’autorité en simplifiant :

Diffusion du PageRank standard

Une page X (pas forcément la home) fait un lien vers 4 autres pages, dans ce cas là on a 100/4 = 25. Le constat ici c’est que nous voulons sculpter le PageRank de notre site, on ne souhaite pas diffuser de jus dans les mentions légales, mais plutôt vers nos pages produits qui ont pour but d’être positionnées sur Google. C’est ce pourquoi nous utilisons l’obfuscation de lien.

Une autre utilité du « cloaking » hormis le sculptage du PageRank est de maintenir l’étanchéité d’un maillage interne optimisé comme pour un cocon sémantique tout en maintenant une bonne expérience utilisateur. Par exemple, si vous devez faire un lien vers une page pour l’utilisateur comme un lien vers un autre silo, vous pouvez utiliser l’offuscation de lien.

En continuant dans son intérêt relié à l’UX, nous pouvons aussi remarquer qu’il serait judicieux de transformer ses liens externes comme pour citer Wikipédia pour l’utilisateur tout en utilisant l’offuscation pour prioriser le PR pour vos pages.

Il existe bien d’autres raisons pour offusquer, comme pour les sites e-commerce, par exemple la page panier, il n’y a aucune utilité à la référencer.

Ou plus impactant encore, l’offuscation des navigations à facettes afin de maîtriser la diffusion de PR :

Diffusion du pagerank avec la navigation à facette

Note : l’offuscation peut apporter d’autres bénéfices que l’optimisation du PageRank comme pour optimiser le crawl budget.

Surfeur raisonnable

En réalité le schéma précédent du PageRank est une grosse bêtise. Dû au surfeur raisonnable, le PR ne se diffuse pas de façon proportionnelle. Effectivement en fonction de la position de vos liens, Google donne un coefficient différent. C’est-à-dire qu’un lien plein contenu peut entraîner 50 % du PageRank dont 5 % pourraient être redistribués aux 10 liens du footer (soit 0,5 % par lien).

Illustration du surfeur raisonnable (SEO)

En revanche ne vous méprenez pas, même si seulement 5 % du PR total se diffuse sur votre menu et votre footer parmi une vingtaine de liens c’est tout de même dommage.

Imaginez, un menu et un footer sont présents sur chaque page. C’est-à-dire que sur plus de 100 pages, l’impact du PageRank qui se diffuse à 5 % x100 n’est plus si anecdotique. En somme, l’offuscation c’est important, surtout si vous avez plein de pages.

Comment ça marche l’offuscation

Google calcule la diffusion du PageRank lorsqu’il détecte un lien , en revanche les événements comme <button onclick=""> ne sont pas considérés pour Google, du moins pas pour la diffusion du PR.

Si un lien href possède un attribut autre que Dofollow, cela veut dire que le PR ne sera pas diffusé sur la page cible mais réparti parmi tous les sites indexés du web.

Non au Nofollow !

Peut-être pensez-vous qu’il suffit d’utiliser l’attribut rel nofollow pour optimiser le PageRank ? Surtout pas. Nofollow est ce que l’on appelle « un puits à PageRank », un trou noir.

Je m’explique : pour des détails techniques, le PR d’un lien nofollow est redistribué à l’ensemble du web et non la page en question. Dit d’une autre manière, le jus est quand même divisé dans le lien, mais la page n’en bénéficie pas. Vous comprenez le concept du trou noir ?

Schéma de l'offuscation de liens vs nofollow

Même chose s’il y a l’attribut « sponsored » et autre. Si le lien n’est pas pour votre maillage interne et que vous ne voulez pas attribuer de crédit vers le lien, il est nécessaire d’utiliser l’offuscation pour ne pas gâcher le jus de votre site.

White hat ou black hat ?

Plusieurs référenceurs ont posé la question à des gens de chez Google. Actuellement, en 2022, aucun danger de pénalisation quelconque n’est envisagé pour cette pratique. La réponse vient du fait que l’expérience utilisateur est conservée et que cette manière de cloacking ne cache rien à l’utilisateur et n’est pas là pour le tromper.

Le code pour l’offuscation

Les avis diffèrent dans la manière d’offusquer les liens. Pour certains, un simple <button> ne suffit pas, Google pourrait quand même détecter le lien. Même si je trouve personnellement que cette analyse n’a aucun fondement technique, je vous apprendrai également à être certain de cacher le lien aux yeux de Google.

L’obfuscation de lien : la méthode simple, rapide et efficace :

<button onclick="window.location.href = 'https://twitter.com/createur2site';"></button>

Un simple lien dans un button. Ni plus ni moins. Facile à mettre en place, rapide et ça marche.

Obfuscation de lien en JavaScript (Base 64) :

Si vous souhaitez être sûr de cacher vos liens pour Google, voici une autre manière d’offusquer, on pourrait dire que c’est de l’offuscation de lien cloacké :

1. Le code HTML pour l’obfuscation :

<span class="urlencode" data-urlencode="aHR0cHM6Ly93d3cuNDEwLWdvbmUuZnIvYS1wcm9wb3MuaHRtbA==">
mentions légales
</span>

Cliquez ici pour encoder votre url en base 64

Vous devez entrer une url.

2. Le code javascript de l'obfuscation :

<script>
document.addEventListener("DOMContentLoaded", function(event) {
var classname = document.getElementsByClassName("urlencode");
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
classname[i].addEventListener('contextmenu', myRightFunction, false);
}
});
var myFunction = function(event) {
var attribute = this.getAttribute("data-urlencode");
if(event.ctrlKey) {
var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');
newWindow.focus();
} else {
document.location.href= decodeURIComponent(window.atob(attribute));
}
};
var myRightFunction = function(event) {
var attribute = this.getAttribute("data-urlencode");
if(event.ctrlKey) {
var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');
newWindow.focus();
} else {
window.open(decodeURIComponent(window.atob(attribute)),'_blank');
}
}
</script>

3. La touche finale en CSS pour simuler un « vrai » lien :

.urlencode:hover {
cursor : pointer;
// Ici mettre le css de vos liens pour simuler vos liens classiques
}

ps : rendre à césar ce qui appartient à césar. Le code en base 64 à été repris de chez 410 Gone.

L’obfuscation de lien en ROT 13 :

Si vous êtes encore plus paranoïaque, il est possible d’encoder vos URL autrement qu’en base64, étant donné qu’il est très répandu. Cette technique serait probablement plus logique.

Exemple : <span class="link_obf" data_obf="<?= str_rot13('monlien.html') ?>">lien obfusqué</span>

Le github : https://github.com/drogbadvc/link-obfuscation

L’obfuscation sur WordPress :

Si vous utilisez WordPress, ce sera plus compliqué. Vous pouvez tout de même ajouter un module code sur chacune de vos pages avec la balise

puis y insérer le JS ou votre button en html, mais par exemple pour le menu natif de WordPress, modifier le html sera plus compliqué.

C’est pourquoi je vous conseille des plugins d’offuscation de lien :

• Obfuscate → 59€
• WP_Rank → 79€
• Ghostlink → 99€

L’obfuscation avancée

Parlons de quelque chose qui fâche tous les référenceurs SEO : les mega menus.

Pourquoi ? Parce que dans n’importe quel cas où vous êtes sur une page, à cause du mega menu, des silos sont liés entre eux, ainsi que leurs catégories et sous-catégories. Autrement dit cela n’est pas du tout optimisé pour Google bot.

Voici à quoi ressemble un mega menu si vous ne saviez pas :

Exemple de mega menu

Pour palier ce problème, il est possible de mettre en place de l’offuscation en mode actif. Visuellement, la diffusion du PageRank d’un mega menu ressemble à ça, même s’il est siloisé correctement à l’intérieur des pages :
La diffusion du pagerank d'un mega menu sans offuscation

Dit autrement, les mega menus détruisent toute votre structure. Alors qu’en offusquant les liens des megas menus, cela ressemble à ça :

La diffusion du pagerank d'un mega menu avec offuscation de lien

L’obfuscation dynamique

Pour limiter la diffusion du PageRank des mega menus (entre autres), il est nécessaire de mettre en place de l’obfuscation dynamique. Ainsi, vous ne devez pas mettre en clair des <button> car en fonction de la position de votre internaute, il faudra changer les offuscations de lien. Sinon, une autre méthode, plus simple, est de générer un nouveau code HTML de menu différent pour chaque page.

Par exemple :

L'obfuscation dynamique

En jaune, c’est là où nous sommes. En fond clair, ce sont les liens (<a href>) et en noir se sont les liens offusqués. À ce moment là, seules les premières catégories sont visibles pour le robot.

Une fois que l’on progresse en profondeur, il faut continuer de lier les ancêtres qui nous ont permis d’arriver ici tout en suivant toujours le même principe :

L'obfuscation dynamique 2

Enfin, au niveau 3, on omet les autres sous-catégories de la catégorie principale car elles ne sont plus connexes par rapport à ce niveau de précision :

L'obfuscation dynamique 3

Cette représentation a été reprise d’une conférence du SEO camp par Frédérik Bobet.

 

Si cet article vous a plu, n’hésitez pas à le partager ! En plus, c’est gratuit !

L'hébergement WordPress pour les sites ambitieux

Vos concurrents utilisent Kinsta. Ne les laissez pas vous devancer.

Découvrez

Vous avez besoin d'aide ?

N'hésitez pas ! Nous sommes experts en création de site et en référencement naturel.

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *