This document contains directions for cloaking, or obscuring e-mail addresses you publish on the World Wide Web. The obscured addresses remain usable by humans, but become invisible to the address harvesting robots used by spammers. This is a battle of technology. If enough people use this trick, the spammers will go to the trouble of defeating it. Until then, enjoy.
If you like this idea, but don't want to do the work yourself, there's a link to a generator tool at the bottom of this page. Skim this page first to understand what the tool does.
You want to make your e-mail address available on your Web pages so that people who read your pages can get in touch with you. However, you also know that the U.S. Federal Trade Commission performed a study in the fall of 2002 that showed 86% of new e-mail addresses posted to Web pages began receiving spam within six weeks of being posted. The FTC recommends "masking" your e-mail address. Their example: change email@example.com to firstname.lastname@example.org. This causes the spam e-mail to go astray, but it's not very friendly to your human correspondents. Better to make the address invisible to spammers' harvesting robots (also known as spambots) while being almost as useful to humans as a standard mailto: link.
(You can read a little about the FTC's experiment at http://www.ftc.gov/bcp/conline/pubs/alerts/spamalrt.htm. The Center for Democracy and Technology conducted a similar study. Their thorough and thoughtful report is at http://www.cdt.org/speech/spam/030319spamreport.shtml.)
To keep spammers away, some people have begun using Web forms in their Contact Us areas instead of posting email addresses. Readers have to fill in the form to get in touch with the site's operators. There are a couple of problems with that. One is an unfortunate tendency to make form elements required. People don't like being forced to tell you things they aren't interested in including. Even worse is the idea of the Web form itself. People want to use their own email tools to contact others. Among other things, it lets them handle copies of sent mail in a uniform and familiar way. We at Blue Link Webs recommend against Web forms as a general-purpose contact method.
You can make a graphical image of text like the one above using just about any graphics editing program that'll let you type text into an image. Blue Link Webs also provides a tool that will create the image for you. There's a link below.
To make an image using your graphics program, start a new image with a transparent background. (If your graphics program won't give you a transparent background, use white or the background color of your page.) Make your image 15 pixels high and 500 or so pixels wide. Choose 15 point type in a face that matches your Web pages and turn anti-aliasing off. Turn underlining on and set the color to blue. I used #0000CC as the color in the example; it's a little darker than the regular blue of a link.) Now type your e-mail address.
You will probably need to adjust the position of the typed text on the "canvas," and most graphics programs let you do that with the pointer tool. Move the text until the underline touches the bottom of the canvas and the left edge of the typing almost touches the left edge of the canvas. Now use the "cropping tool" to cut off any excess canvas on the right. The typing should nearly touch the right edge when you're done. Your graphic will be 15 pixels high; make a note of how wide it is after cropping. Save your image as a .gif or .png file and upload it to your server. (I named my file bob-brown-bluelinkwebs-com.png, which I hope will be easy to remember.)
You can embed your graphical e-mail address in HTML documents using the
<img...> tag. There are two special considerations. First, the bottom of your image will be aligned with the baseline of the type on the page. You really want it a little lower than that so the baseline of the type in the graphic (and not the underlining) lines up with the baseline of the text on the page. We will use an HTML <span> to lower the graphic by two pixels.
Second, your graphical e-mail address is opaque to spammers' harvesting programs, but it's also opaque to people using text-to-speech adaptive technology. We'll fix that with the
alt= attribute of the
<img...> tag in a way that doesn't help spammers.
Here is the HTML I use to put my graphical e-mail address on Web pages:
<span style="position: relative; top: 2px; left: 0px;"> <img src="bob-brown-bluelinkwebs-com.png" alt="Bob dot Brown at Blue Link Webs dot com" title="Bob dot Brown at Blue Link Webs dot com" border="0" height="15" width="210" /> </span>
I've broken the lines to make it easy to see what's going on; normally this would all flow together. The
position: property of the style attribute on the
<span> tag drops the image down two pixels and makes a zero left-to-right adjustment. The
alt= attribute on the
<img...> is written so that a text-to-speech device will speak it in the same way I would speak my e-mail address if I were giving it to someone verbally. As with the image, it would be too hard for a spammer to write something that decodes this. (Don't put extraneous punctuation within the
alt= tag; it will likely be read by a text-to-speech device.)
Change the width= attribute (it's in bold above) to the width of your own graphic. If you don't know, leave width= out entirely.
So far, so good, but Web users are accustomed to being able to click on e-mail addresses to originate mail. Clicking on the address above does nothing. You could wrap a
mailto: link around the image and clicking would function as expected, but your address would be exposed to spammers again, ruining all our hard work.
mailto: link at the instant it is clicked. Downloading the HTML will reveal nothing to a robot. Only clicking the link works. (The function name is deliberately a bit obscure, too.)
Put the following bit of code in the
<head> of your HTML document. Just before the
</head> tag is a good place:
</a> at the end.
<a href="need_js.html" onclick="gemaddr(this, 'bluelinkwebs.com', 'Bob.Brown')"> <span style="position: relative; top: 2px; left: 0px;"> <img src="bbrown_spsu.gif" alt="Bob dot Brown at Blue Link Webs dot com" title="Bob dot Brown at Blue Link Webs dot com" border="0" height="15" width="114" /> </span></a>
To prevent insertion of bogus spaces, this should all flow together on one long line. If you have to break it up, put the line breaks between the attributes of the
need_js.html. You can look at an example here:
need_js.html and use it as a basis to write your own.
need_js.html, point it to a server-side form for sending email, something like,
<a href="mailform.php?local=Bob.Brown&domain=bluelinkwebs.com">. (If it's all one domain, leave the domain part out of the link to further frustrate spammers.) This is not as good as a clickable link because it doesn't use the reader's email program, but it's better than nothing. You could even include the information from
If you have comments on this Web development note, I'd like to hear from you. You can write to me at: . (See... it works!)
This Web technique is presented by BlueLinkWebs.com. If you think it's pretty neat, consider hiring us to help you. In any case, this technique is yours to use under the Creative Commons Attribution 3.0 United States License. Enjoy!
Copyright © 2006 by Bob Brown and BlueLinkWebs.com
This page last updated: 2007-08-18 0:31
The code presented on this page is licensed under the Creative Commons Attribution 3.0 United States License. You are free to copy the work for commercial and non-commercial use, including use for profit. Each copy of the work must carry this notice: "Copyright 2006 by Bob Brown and BlueLinkWebs.com. Licensed under the Creative Commons Attribution 3.0 United States License. Some rights reserved." This notice may be placed as a comment in code, and need not appear on the displayed Web page.