Obfuscer un lien sur Webflow

Pourquoi obfuscer des liens ?

Le crawl budget est le “budget” (en réalité c’est plutôt le temps) qu’un robot de moteur de recherche va allouer à un site pour visiter ses pages.

Cette notion SEO est clé pour optimiser le crawl et donc l’indexation de vos pages.

Plus votre site a de pages, plus le budget nécessaire est élevé. Il peut donc y avoir un intérêt à orienter le crawling de vos pages. En effet, il vaut mieux s'assurer que les robots découvrent à chaque fois des pages avec un contenu pertinent.

Typiquement, si dans votre footer vous avez des liens vers vos pages légales et que vous avez 400 pages, ce n'est pas pertinent d’offrir la possibilité d’aller visiter les pages légales en provenance de chacune de vos 400 pages.

Cela a de l’intérêt pour vos visiteurs mais pas pour les moteurs de recherche. Les obfuscer est donc un moyen d’optimiser le crawl budget.

‍

Comment obfuscer un lien sur Webflow ?

Concrètement, on ne va pas créer un lien classique avec une balise HTML. En effet, on va encoder une URL qui sera ensuite décoder grâce à un script et offrira une navigation normale à l’utilisateur.

L’obfuscation est assez simple, il faut juste respecter les étapes suivantes :

1. Encoder en Base64 le lien que l’on souhaite obfuscer.

• Prenons l’exemple du lien justa.fr/blog‍
• On va se rendre sur un site qui permet d’encoder des liens comme Base64Encode.
• On rentre notre lien, on fait encode et on copie la suite de caractères. Dans notre cas, cela donne anVzdGEuZnIvYmxvZw==

2. Insérer un bout de code à l’endroit où vous voulez que votre lien apparaisse

<span class="obflink" data-o="anVzdGEuZnIvYmxvZw==">
Blog de Justa
</span>

Pensez bien à remplacer la valeur au niveau de l’attribut data-o en fonction de votre encodage.

‍

3. Insérer un script sur la page

Insérez ce script dans le body de votre page (ou de votre projet, en fonction de votre cas d’usage). Il ira lire tous les éléments qui auront pour class obflink et créera un lien en fonction de la valeur donnée au niveau de l’attribut data-o

<script>
jQuery(document).ready(function(e){          
    jQuery('.obflink').click(function(e){
        var t = jQuery(this);    
        var link = atob(t.data('o'))
        window.open(link)
    })
})
</script>

‍

D’un point de vue UX, pensez à designer un minimum la class obflink pour :

• Avoir un pointer avec une main
• Avoir un effet au hover du lien

Voilà, vous savez comment obfuscer simplement des liens dans Webflow sans entraver la navigation de l’utilisateur.

‍

{{newsletter-blog}}