Comment obfusquer un email anti-spam dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher une adresse email sur votre site Webflow sans la rendre lisible par les robots de spam.

Exemple

Comprendre le problème

Les robots de spam crawlent le web à la recherche d'adresses email dans le code source HTML. Un mailto: ou un email en clair dans votre HTML sera collecté en quelques heures et ajouté à des listes de spam. L'obfuscation consiste à cacher l'email dans le HTML de façon à ce que les humains le voient mais pas les robots.

1. Encodez votre email en Base64

Dans la console de votre navigateur (F12), tapez :

btoa('hello@gemeosagency.com') // Retourne : 'aGVsbG9AZ2VtZW9zYWdlbmN5LmNvbQ=='

Copiez le résultat. C'est votre email encodé.

2. Ajoutez l'élément dans un Embed Webflow

Dans un Embed, collez ce HTML en remplaçant la valeur de data-email par votre email encodé :

<span data-email="aGVsbG9AZ2VtZW9zYWdlbmN5LmNvbQ==">Chargement...</span>

3. Ajoutez le script dans Footer code

Le script décode l'email au chargement de la page et le rend cliquable.

(function() {
  document.querySelectorAll('[data-email]').forEach(function(el) {
    var encoded = el.dataset.email;
    var email = atob(encoded);
    el.textContent = email;
    el.addEventListener('click', function() {
      window.location.href = 'mailto:' + email;
    });
    el.style.cursor = 'pointer';
  });
})();

Conclusion

L'obfuscation Base64 est la méthode la plus simple et la plus efficace pour protéger un email sur un site Webflow. Cas d'usage :

• Pages de contact avec email affiché
• Footers avec coordonnées de l'entreprise
• Pages équipe avec emails des collaborateurs

Cliquez sur l'email pour ouvrir votre client mail

Contact

Chargement...