Obfuscation de lien avec WordPress et Elementor pour le SEO : gratuit et sans plugin

J’ai pour principe de traiter les petits sites avec le même niveau de finition SEO que les gros. Je me suis donc penché sur l’obfuscation de liens sur certains de mes sites construits avec WordPress et Elementor. N’ayant rien trouvé pour m’aider, voici un tuto gratuit issu de mes recherches. Tout a été vérifié avec du JS rendu et, au moment où je publie ce guide, les liens sont bels et bien obfusqués. La première partie porte sur Elementor, et l’autre sur les sites qui n’utilisent pas forcément Elementor. Le script PHP reste le même dans tous les cas.

Mise à jour Mai 2025 : la première partie de l’article parle d’obfuscation simple. La deuxième partie parle d’obfuscation en Base64 : plus sûre et performante. Je vous conseille de comprendre la première partie et de poursuivre et d’utiliser les conseils de la partie sur la Base64.

Obfusquer un lien, pour quoi faire ?

L’obfuscation de lien est une technique SEO qui consiste à masquer certains liens aux robots des moteurs de recherche, tout en les laissant accessibles aux internautes. Cette stratégie permet de contrôler la distribution du « jus SEO » (link juice) en dirigeant l’autorité vers les pages les plus importantes du site, telles que les pages produits ou les articles stratégiques. En obfusquant les liens vers des pages moins cruciales, on évite de diluer cette autorité, optimisant ainsi le maillage interne et le budget de crawl.

Obfuscation de lien sur WordPress / Elementor

Ce tuto est dédié aux sites internet sous Elementor, mais il pourra évoluer pour couvrir WordPress complet si la demande est présente ou si je viens à en avoir besoin.

Etape 1 : identifier le lien à obfusquer

Dans mon cas, on va rester sur ce site et obfusquer un lien vers la page contact. Et oui, j’en mets beaucoup car je pense qu’un lien en header ne suffit pas, mais cela fait que c’est le lien interne le plus présent sur la plupart de mes pages. Pas bon en SEO : mauvaise distribution du jus, pas un lien thématisé.

Ce lien est géré par le widget « button » de Elementor. D’ailleurs, il est propre à mon thème, mais vous aurez le même résultat si vous utilisez un widget « button » de base.

Etape 2 : paramétrer le bouton Elementor

Laisser le lien vide. Rentrer un texte.

Ensuite aller dans « Avancé » > « Attributs ».

Dans mon cas je rentre :

data-href|https://antoinebroin.fr/contact/
role|button

Cela va ajouter du html dans une div de votre bouton :

Bien-sûr, il faudra remplacer par votre lien à vous.

Obfusquer les autres liens sur WordPress (sans Elementor)

Si vous n’utilisez pas de bouton sur Elementor, mais juste des liens classiques sur WordPress ou dans un widget de texte, c’est beaucoup plus simple.

Repérer le lien :

<a href="https://exemple.com/ressource/">ma ressource</a>

Et remplacer par :

<span data-href="https://exemple.com/ressource/"
      role="link"
      tabindex="0"
      class="obf-link">
  ma ressource
</span>

L’attribut data-href stocke l’URL que le petit script JS ouvrira.

role="link" + tabindex="0" gardent l’accessibilité clavier.

Aucun href  : donc pas de PageRank transmis dans le HTML statique.

Script PHP

On va maintenant entrer un script PHP. Pour cela vous pouvez aller dans Apparence > Editeurs de fichiers des thèmes. Si vous avez un thème enfant, vous pouvez modifier le fichier functions.php du thème enfant. Si vous modifiez le functions.php du thème parent, si vous le mettez à jour, il y a de grandes chances que votre code disparaisse.

Voici le code à ajouter en bas de votre fichier functions.php :

/*Ajout obfusquation lien*/

// Charge un petit JS en front‑end
add_action( 'wp_enqueue_scripts', function() {
  wp_add_inline_script(
    'jquery-core', // ou votre handle principal
    "
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll('[data-href]').forEach(function(el){
        el.addEventListener('click', function(){
          window.location.href = el.getAttribute('data-href');
        });
      });
    });
    "
  );
});

Et voici le code ultra-commenté si vous souhaitez comprendre ce que ça fait :

/* Ajout obfusquation lien */

// Cette fonction utilise le hook `wp_enqueue_scripts` pour ajouter un script en front-end
add_action('wp_enqueue_scripts', function() {
  
  // Injecte du JavaScript directement dans la page, associé à jQuery (ou tout autre handle que vous utilisez)
  wp_add_inline_script(
    'jquery-core', // Nom du script auquel on "attache" ce JS inline (il doit être déjà en file d'attente)
    "
    // Ce code JS sera exécuté une fois que le DOM est complètement chargé
    document.addEventListener('DOMContentLoaded', function () {
      
      // On sélectionne tous les éléments HTML qui ont un attribut personnalisé 'data-href'
      document.querySelectorAll('[data-href]').forEach(function(el){
        
        // On leur ajoute un écouteur d'événement 'click'
        el.addEventListener('click', function(){
          
          // Lors du clic, on redirige l'utilisateur vers l'URL stockée dans l'attribut 'data-href'
          // Cela évite d'afficher la vraie URL dans le href visible dans le HTML
          window.location.href = el.getAttribute('data-href');
        });
      });
    });
    "
  );
});

Mon conseil serait de vous faire un plugin avec ce script, ou à minima de le placer dans un thème enfant !

Vérification du code rendu avec JS

Notre processus permet d’ouvrir un lien sans utiliser la balise html <a>. Notamment en utilisant du JS.

Mais il faut se méfier, car Google a un processus de rendu de JS.

En utilisant l’extension chrome View Rendered Source : on peut voir le code de base, et le code rendu avec JS.

J’ai ensuite fait analyser le code avant/après rendu et l’IA m’a confirmé que le lien apparait toujours sans forme de balise lien dans le code. Donc mission réussie !

Obfusquer en Base64 pour cacher les urls

Les bots de recherches comme Googlebot peuvent découvrir votre url au moment du rendu si elle n’est pas encodée. Il est en effet connu que Google peut crawler des urls qui ne sont pas forcément sous forme de lien.

Utiliser une Base64 ajoute très peu de complexité, et une micro-couche de sécurité pour son obfuscation.

Obfusquer des liens en Base64 sur Elementor

Générer une url en Base64

Rendez-vous sur base64encode.org et copier votre url cible.

Moi je rentre https://antoinebroin.fr/contact/ et ça me génère aHR0cHM6Ly9hbnRvaW5lYnJvaW4uZnIvY29udGFjdC8=

Modifier le bouton Elementor

Laisser le lien vide, et entrer un texte :

Aller dans Avancé > Attributs

Entrer les elements suivants, remplacer votre lien encodé.

data-cid|aHR0cHM6Ly9hbnRvaW5lYnJvaW4uZnIvY29udGFjdC8=
role|button
tabindex|0

Ajouter un script PHP à functions.php

Comme dit précédemment : on va maintenant entrer un script PHP. Pour cela vous pouvez aller dans Apparence > Editeurs de fichiers des thèmes. Si vous avez un thème enfant, vous pouvez modifier le fichier functions.php du thème enfant. Si vous modifiez le functions.php du thème parent, si vous le mettez à jour, il y a de grandes chances que votre code disparaisse.

Vous pouvez aussi utiliser un plugin qui permet d’ajouter des bouts de code comme wpcode.

add_action( 'wp_enqueue_scripts', function () {

  $js = <<<'JS'
  document.addEventListener('DOMContentLoaded', () => {

    // Un seul listener pour toute la page
    document.body.addEventListener('click', e => {
      const el = e.target.closest('[data-b64],[data-href]');
      if (!el) return;

      e.preventDefault();

      // 1) Récupérer l'URL
      let url = el.dataset.href || '';
      if (!url && el.dataset.b64) {
        try { url = atob(el.dataset.b64); } catch(e){}
      }
      if (!url) return;

      // 2) Rediriger
      if (el.dataset.target === '_blank') {
        window.open(url, '_blank');
      } else {
        window.location.href = url;
      }
    });
  });
  JS;

  // Injecté après les scripts d’Elementor pour éviter tout conflit
  wp_add_inline_script( 'elementor-frontend', $js, 'after' );
}, 20 );

Le script gère à la fois les anciens data-href et les nouveaux data-b64.

Obfusquer d’autres liens dans WordPress en Base64 avec ou sans Elementor

A la place d’un lien classique, vous pouvez utilliser cette écriture :

<span class="obf-link"
      data-cid="aHR0cHM6Ly9hbnRvaW5lYnJvaW4uZnIvY29udGFjdC8="
      role="link"
      tabindex="0">
  me contacter
</span>

Contrairement aux boutons Elementor, il faudra corriger le style dans le personnalisateur WordPress car ne s’agissant plus d’un lien classique, il perdra ses attributs de style.

.obf-link {
  cursor:pointer;
  color:var(--e-global-color-primary);
  text-decoration:underline;
}
.obf-link:focus { outline:2px solid currentColor; }

Pourquoi cette méthode est mieux que le simple data-href ?

• L’URL n’apparaît plus en clair dans le HTML ; les scrapers regex ou certains outils d’audit la ratent.
• Couplée à l’absence de href, elle bloque aussi les calculateurs de PageRank basiques d’outils SEO.
• Pour Googlebot, ça reste une navigation JS : pas de risque de pénalité, mais pas de garantie à 100 % qu’il n’explorera jamais ce lien – l’obfuscation sert surtout à le “déprioriser”.

Conclusion

Une question ? Je réponds en commentaire.

Si vous souhaitez déléguer ce travail sur votre site ou celui de vos clients, n’hésitez pas à me contacter pour me demander un devis (page contact ou linkedin).