Hide your email in plain sight

You might have made the mistake in the past, you built a webpage for a personal website or for a business one and, wanting to be contacted by your visitors, you included your email address. Soon after you started to receive a deluge of emails, of course not from visitors, but from spammers.

The issue of bots scraping websites for email addresses is as old as the web and, throughout the years, various escamotages have been employed to prevent this. The effectiveness varied as did the user experience when the user wanted to use that email address.

Some of the most common are to use an image that contains the actual email address text or to escape the @ with something like [at]. The first approach works well but leaves the user to painstakingly copy the address as, obviously, including it in a mailto link of the image would defeat that purpose of having an image. The second at least allows the user to copy the text, which is extremely helpful if your email contains something like freundschaftsbeziehungen. If your audience is technical you might be reasonably fine with them having to replace the [at]. However, as tests have shown, scrapers have long learned to apply programmatically the simple replacement. After all, it’s not rocket science.

What I’m going to show you is a different method that will not only allow your users to copy the email address but will make it possible to include a useful mailto link. This ensures that even the less tech savvy can just click on it and have their favourite mail client open up. A real lifesaver, especially on mobiles.

The TL;DR is: include an HTML element and, with javascript, fill it with a concatenation of your email user and domain stored in two separate variables (otherwise your email will be scraped from the script source, of course!).

You might be sceptic and think that, surely, the scrapers can run javascript and, of course, they can. However, empirical evidence suggests that scrapers avoid doing so, probably because it’s not worth it or because they fear the code might contain some smarts that might expose them. So, at least at the moment, this method has proven to work both for the user and to prevent spam.

Let’s see a practical implementation. In the HTML, wherever we want our email link we can include an anchor tag with a known id, so we can fetch it later. And, at the bottom of the page we can add the following script that, once loaded, will take care to replace both the anchor href and the inner text of the anchor tag.

That’s all you need, hope you find this useful!