Prevent web crawlers from stealing email addresses from your website

If you just simply publish an email address on a website you can expect tons of spam in the inbox. Web spiders crawl the sites all the time looking to collect email addresses to send them spams, ads or viruses. This is why you have to make sure you never add your email to any website as plain text or link which is visible by robots.

Demo

Show Email

Google has its own email reCaptcha service which is considered uncomfortable by many and it seems to be unsupported on many mobile devices, not being responsive.

We need the most simple solution that fulfills all the requrements below:

• Safe – invisible for spiders
• Clickable – it triggers a href=”mailto:…” event
• Copyable – the text can be copied if someone just wants to save it
• Easy to use for visitor – don’t have to solve mathematical equations or decipher unreadable texts
• Easy to use for admin – can be set with a short code, no scripting required for every email instance

We’ve come up with a solution that satisfies all.

Implementation

Use the HTML:

<a class="hiddenMail" data-email="ferencATdenesDOTcom">
    Show Email
</a>

The script that handles the event (jQuery required):

$(window).load(function () {
    $('.hiddenMail').on('click',function(event)
    {
        event.preventDefault();
        $(this).off("click");
        var email = $(this).attr("data-email").replace(/AT/,'@').replace(/DOT/,'.');
        $(this).removeClass("hiddenMail");
        $(this).html(email);
        $(this).attr("href","mailto:"+email);
    });
});

We need the preventDefault in order to prevent the href to trigger the link and let it just execute our script instead.

After that we have to switch this event listener off because we do want the click to go through the second time the visitor clicks the link.

The script replaces “AT” and “DOT” with the required characters and populates the corresponding sections of the link to make it work.