Obfuscating an email address is a technique used to make it difficult for automated systems (bots) to harvest the email address while keeping it accessible to human users. There are several methods to obfuscate an email address, including using HTML character entities, JavaScript, or even image-based approaches. Here are some common techniques:

1. HTML Character Entities

You can replace characters in the email address with their corresponding HTML entities. This makes it harder for bots to read the email address.

Example:

<!-- Original Email: example@example.com -->
<a href="mailto:&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;">&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;</a>

2. JavaScript-Based Obfuscation

Using JavaScript to construct the email address in the browser ensures that bots that don’t execute JavaScript won’t see the email.

Example:

<!-- HTML -->
<span id="email"></span>
<script>
    document.getElementById("email").innerHTML = "example" + "@" + "example.com";
    document.getElementById("email").href = "mailto:example@example.com";
</script>

3. Base64 Encoding

Encode the email address in base64 and decode it with JavaScript.

Example:

<!-- HTML -->
<a id="email-link" href="#">Email us</a>
<script>
    const email = atob('ZXhhbXBsZUBleGFtcGxlLmNvbQ==');  // base64 encoded "example@example.com"
    document.getElementById('email-link').setAttribute('href', 'mailto:' + email);
    document.getElementById('email-link').innerText = email;
</script>

4. Using CSS to Reconstruct the Email

Split the email address and use CSS to piece it together.

Example:

<!-- HTML -->
<span class="email-part1">example</span>
<span class="email-part2">@example.com</span>
<style>
.email-part2::before {
    content: '@';
}
</style>

5. Using a Third-Party Service like Veilmail

As previously mentioned, you can use a service like Veilmail to handle the obfuscation for you. Here’s an example:

Steps:

1. Visit Veilmail: Go to Veilmail.
2. Generate Obfuscated Email Code: Enter your email address and generate the obfuscated code.
3. Add the Code to Your HTML: Copy and paste the generated code into your HTML.

Example:

<span class="veilmail">[email protected]</span>
<script src="https://veilmail.com/js/veilmail.js"></script>

6. Image-Based Obfuscation

Convert your email address into an image. This method makes it impossible for bots to scrape the email address, but it’s not very user-friendly since users cannot copy the email address easily.

Example:

<!-- HTML -->
<img src="path/to/email_image.png" alt="Email example@example.com">

Conclusion

Choosing the right method depends on your specific needs and the level of obfuscation you require. For most purposes, a combination of HTML character entities and JavaScript-based obfuscation should be sufficient to protect your email address from basic scraping bots while maintaining usability for your site’s visitors.

check out our hide email address from spammers tool VeilMail