In this tutorial we’ll describe two straightforward techniques for protecting HTML email links from being scraped by spammers. Although these techniques cannot guarantee full success, they’ll give you an extra layer of protection.
Email Templates on Envato Elements
Before we dive in, don’t forget that you can download unlimited email templates with your Envato Elements subscription, to use with MailChimp, Campaign Monitor, and many other Email Service Providers. Envato Elements also gives you access to thousands of other creative assets, like stock photos, graphics, video templates, audio, Photoshop actions, you name it!
What’s the Problem With HTML Email Links?
HTML email links do exactly what you’d want them to do: when users click on them they open the default email application and begin a new email with the contact email address–and perhaps other details–already filled in. They’re really convenient! However, the email address (either in text form in the link, or in the href attribute) is readable by bots and scraping tools, often leading to that email address finding its way onto SPAM mailing lists of all kinds.
The solutions we’re looking at aim to hide the email addresses from the DOM, so web crawlers cannot find them and put them into spamming lists.
A Specific Email Link Example
Let’s describe the problem in a bit more detail and then move on to the solutions.
The links won’t trigger in the embedded demos, so be sure to view them in the full page view (debug mode).
Consider the following example (debug mode):
Here we’ve defined three links that, when clicked, will open the user’s default email client with the recipient’s address and email subject prefilled. We do this by appending the mailto: scheme at the beginning of the href attribute. As well as the subject parameter, we can pass some things like the cc and body. Notice also that the subject value is URL-encoded (the space is replaced by the %20). For example:
<a href="mailto:[email protected]?subject=General%20Questions">General Questions</a>
Email addresses when displayed like this form a regular part of the DOM. And that is a problem. A bot can easily find them and target them with bulk advertisements and other unwanted stuff.
HTML Email Link Solution #1: Encoding
In this first technique we’ll represent all the characters of our email addresses with encoded entities. For example, the “h” character will be represented by the entity h. Different online tools can provide this functionality like the one I used for our example.
Here’s the related demo (debug mode):
Here’s what that first link looks like now:
<a href="mailto:hello@forecastr.com?subject=General%20Questions">General Questions</a>
If you want to replace the text links with the actual email addresses so people can see and select them, all you have to do is to replace them with the encoded entities like the demo below (debug mode):
This is a simple enough approach and will offer reasonable protection; it will prevent the majority of bots from harvesting the email addresses.
HTML Email Link Solution #2: JavaScript
For this second technique we’re going to use a tiny bit of JavaScript. The href attribute value of our links will be empty by default. Additionally, each link will have data-part1, data-part2, and data-part3 attributes. The value of the first attribute will correspond to the user, the value of the second one to the domain name, and the value of the third one to the domain extension.
When the page loads, we’ll loop through all page links and update their href attribute value by combining the aforementioned attributes.
Here’s the related demo (debug mode):
Here’s what the first link looks like in this example–it’s very unlikely bots will be able to interpret our data in this form:
<a href="" data-part1="hello" data-part2="forecastr" data-part3="com">General Questions</a>
Again, if you need people to be able to read the email addresses, consider the following JavaScript solution (debug mode):
This technique requires JavaScript enabled to work.
Conclusion
In this tutorial, we examined two quick methods to protect our HTML email links and fight against email spamming. As said in the beginning, none of them can guarantee full spam protection and each one does have downsides. Of course, each bot collects data differently, and thus their efficiency varies. What we can at least do is try different methods for making their job more difficult in stealing our email addresses.
There are other ways as well that we didn’t cover here, possibly more effective, so be sure to let us know if you’re aware of any of them.
- For example, one such rough solution uses pseudo-elements to create the email addresses and display them on the screen. However, its main limitation stems from the fact that pseudo-elements aren’t considered real elements, so people cannot interact with and select them.
- Next, another common approach takes advantage of Cloudflare’s Email Address Obfuscation feature.
- Lastly, another technique might be to reverse how the email address links appear by using either CSS’s
unicode-bidiproperty or JavaScript’s methods like thesplit()one. The disadvantage of this technique though is that if people select the email address and paste them into their mailing program, the email address characters will display in reverse order. A quick and dirty solution to this is to disable text selection for the target links.
As always, thanks a lot for reading!
HTML Template Collections on Tuts+
Kick off your next HTML website quickly and easily with one of the thousands of HTML templates we have at Envato. Check out these collections!