Do you have a problem separating all the Spam e-mails from legitimate E-mails and tired of the extra time you have to put in before you can respond to a visitors request?

As a business owner I am continuously finding it more and more aggravating having to take extra time to weed through and delete all the Spam while hoping to not accidentally delete a legitimate e-mail from a visitor to our website. I am sure I am not alone when I say that I have on occasion deleted what turned out to be a legitimate e-mail request for information or services.

With my line of work in security I began to wonder about ways you could make your e-mail address more secure or virtually hidden from those e-mail address-gathering robots without making it difficult for legitimate visitors.

I have come up with 4 successful methods that accomplish this. I will start at the beginning of my research.

Using JavaScript to Hide the Address

Since the search engines and these address-gathering robots cannot read the JavaScript display, this is a great way to hide your address while displaying it to your customers.

Here are two of the most popular ways of using JavaScript to display an address.

JS #1, Scrambled address,

With this script you would place it in your page wherever you want your e-mail address displayed. Since the address is scrambled inside the JavaScript, robots cannot read it, yet the display is an auto e-mail link.

HTML looks like this:
<script type="text/javascript">
<!--
document.write("Direct your comments and questions to our");
var contact = "Webmaster"
var email = "webmaster"
var emailHost = "yourdomain.com"
document.write("<a href=" + "mail" + "to:" + email + "@" + emailHost+ ">" + contact + "<\/a>" + ".")
//-->
</script>

JS #2, Simple Script

This requires the JavaScript to be stored as a js file. This script is handy since the address information is stored on a single page and you then call for it to be displayed by placing the following wherever you want the address displayed. Works like CSS in that you only have to make changes to a single page to update your address across several pages or an entire site.

The js page (I called this one e-mail.js):
document.write('Direct your comments and questions to our <a href="mailto:webmaster@yourdomain.com">Webmaster</a>');

The HTML placed in the page where you want the address displayed:
<script type="text/javascript" src="e-mail.js"></script>

Both scripts would display like this:
Direct your comments and questions to our Webmaster. (Webmaster would be a clickable auto e-mail link)

The drawbacks of using JavaScript:

The big draw back to using JavaScript to display your address is that any visitor to your site that has JavaScript disabled or is using a text reader will not see or hear your address. Robots and text readers cannot read the JavaScript display.

The normal and recommended action to overcome disabled JavaScript and text readers would be to place your address inside a <noscript></noscript> tag and placing this at the end of the JavaScript.

JS #1, Scrambled address with <noscript>

HTML for scrambled script:
<script type="text/javascript">
<!--
document.write("Direct your comments and questions to our");
var contact = "Webmaster"
var email = "webmaster"
var emailHost = "yourdomain.com"
document.write("<a href=" + "mail" + "to:" + email + "@" + emailHost+ ">" + contact + "<\/a>" + ".")
//-->
</script>
<noscript><p>Direct your comments and questions to our webmaster@yourdomain.com</p></noscript>

JS #2, simple with <noscript>

HTML for simple script:
<script type="text/javascript" src="e-mail.js"></script>
<noscript><p>Direct your comments and questions to our webmaster@yourdomain.com</p></noscript>

Both scripts would display this:
(With JS) Direct your comments and questions to our Webmaster.
(Without JS) Direct your comments and questions to our webmaster@yourdomain.com

The draw back to adding the noscript, this exposes your address to the spammers’ robots.

Using CSS to Hide the Address

My next step was to come up with a way to hide the address with CSS. After some trials and errors I have found a style that successfully hides the address.

Here is the CSS code:

. reverse {unicode-bidi:bidi-override; direction:rtl;}

To use this you would simply write your e-mail address backwards and then enclose it in a span tag.

<p>Direct your comments and questions to our
<span class="reverse">moc.niamodruoy@retsambew</span></p>

This hides the address from the robots and will display as follows:

Direct your comments and questions to our webmaster@yourdomain.com

This CSS styling, although successful has drawbacks as well. You cannot use the auto e-mail tag, as this would expose your address. The visitor would have to enter the address manually, as copy and paste would have the address backwards.

Combining JavaScript with the CSS

I then combined the regular JavaScript and the CSS together. I placed the CSS style in the <noscript> tag. I also added a line to the <noscript> with instructions for the visitor:

The HTML for scrambled address:

<script type="text/javascript">
<!--
document.write("Direct your comments and questions to our");
var contact = "Webmaster"
var email = "webmaster"
var emailHost = "yourdomain.com"
document.write(" <a href=" + "mail" + "to:" + email + "@" + emailHost+ ">" + contact + "<\/a>" + ".")
//--></script>
<noscript><p>Direct your comments and questions to our <span class="reverse"> moc.niamodruoy@retsambew</span><br />you will need to manually enter our e-mail address.</p></noscript>

The HTML for simple script;

<script type="text/javascript" src="e-mail.js"></script>
<noscript><p>Direct your comments and questions to our <span class="reverse"> moc.niamodruoy@retsambew</span><br /> you will need to manually enter our e-mail address.</p></noscript>

The display for these two styles:

(With JS) Direct your comments and questions to our Webmaster.

(Without JS) Direct your comments and questions to our webmaster@yourdomain.com - you will need to manually enter our e-mail address.

While realizing that these techniques were still not completely friendly to people that use text readers and a little inconvenient with the inability to copy and paste. I started testing different codes and have come up with a working solution that disguises the address from robots, displays the address, can be read by a text reader, displays with CSS disabled and allows the visitor to copy and paste.

HTML for this:

Direct your comments and questions to webmaster<code>@</code>yourdomain.com
<br />Just copy and paste our e-mail address.

The display:
Direct your comments and questions to webmaster@yourdomain.com
Just copy and paste our e-mail address.

The only drawback to this technique is that you cannot use the auto-e-mail tag.

This technique could also be used in the <noscript> tags for the use of JavaScript display.

Example:
<noscript><p>Direct your comments and questions to our webmaster<code>@</code>yourdomain.com<br />Just copy and paste our e-mail address.</p></noscript>

How Effective Is This?

For testing purposes I placed one e-mail address for each of the 4 techniques on the contact page and on a page containing only the 4 e-mail addresses on several websites. I then linked to this page from the home pages and the contact pages.
I then ran the page containing the e-mail addresses only at www.willmaster.com/possibilities/demo/RetrieveEmails.cgi
Response received, “No email addresses were found. If any unfound email addresses exist they are hidden in a manner not addressed by this script.”

As of the writing of this article I have received no Spam through the test e-mail addresses using these techniques.

The CSS style does validate and the HTML as shown validates with W3C at XHTML 1.1

Considering all the advantages to making your e-mail address hidden and secure. Factoring in accessibility and convenience I would suggest the use of the simple JavaScript and the use of the <code>@</code> technique.


<script type="text/javascript" src="e-mail.js"></script>
<noscript><p>Direct your comments and questions to our webmaster<code>@</code>yourdomain.com<br />Just copy and paste our e-mail address.</p></noscript>

Please Digg this article if you liked it

Jody Hale is the owner of Eagle Systems, a home and business security company in Pueblo, Colorado.
Eagle Systems Home Security

Alex-Computericity writes: I implemented the <code>@</code> version on my sites--it worked for a while, but eventually was picked up by the spammers. So I opted for an swf/php/xml email form -- no bots have hacked this yet.

13:45:36 Sat Jul 25 2009 CDT


Pages: 1