In this tutorial we’ll describe two straightforward techniques for protecting HTML email links from spamming. Although they cannot guarantee full success, they’ll give you an extra layer of protection against spammers.
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
body. Notice also that the subject value is URL-encoded (the space is replaced by the
%20). For example:
<a href="https://webdesign.tutsplus.com/tutorials/mailto:firstname.lastname@example.org?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:email@example.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.
href attribute value of our links will be empty by default. Additionally, each link will have
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>
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
split()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!
Learn More About Email Development
Email development is notoriously awkward. But don’t panic, these tutorials will get you on the right track!