Obfuscer un lien sur Webflow

L'obfuscation de lien est une technique SEO permettant notamment d'optimiser son crawl budget. Découvrez comment obfuscer un lien sur Webflow en 3 min.

3 Août 2022
3 min
Auteur
Benoît Eveillard
Co-fondateur de Justa
S'inscire à notre newsletter
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Partager l'article
https://justa.fr/articles/obfuscer-un-lien-sur-webflow

L’obfuscation de lien est le fait de cacher un lien aux moteurs de recherche que cela ne change la navigation pour l’utilisateur.

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

Blog de Justa

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){            // On attend que la page soit chargée
    jQuery('.obflink').click(function(e){     // On écoute le clic sur un lien obfusqué
        var t = jQuery(this);    
        var link = atob(t.data('o'))         // On décode l'url
        window.open(link)                    // On renvoi l'utilisateur vers la page
    })
})
</script>

Copier le script ci-dessus

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}}

Vous souhaitez progresser sur Webflow ?

Recevez nos articles & guides. 1 fois par mois seulement.