I have come up with my own way to protect private data like email addresses, postal addresses or telephone numbers you want to or have to publish on your website. I was wondering if anybody else does it this way and what could be possible pitfalls. So please comment this post or write me if you have any remarks.
My approach works with simple HTML+CSS only:
- One long-known technique for “encryption” of email addresses which I included into my approach is the substitution of some characters in your HTML code by their hexadecimal counterpart, i.e.
firstname.lastname@example.org → email@example.com. This will break poorly-programmed crawlers but it is a pretty old trick so I assume it is not that effective anymore.
- Another simple method are HTML comments which won’t affect your readers but (hopefully) some crawlers:
firstname.lastname@example.org → ma<!-- just one comment -->email@example.com.
- And here comes the new part: include invisible boxes containing useless text in your code:
firstname.lastname@example.org → mail@ex<span style="visibility:hidden;float:right;">useless</span>ample.com.
- Please don’t forget to exclude sites with such disguised information from legitimate web crawlers via your robots.txt file – otherwise your site would look broken.
Altogether this disguises your email address as
mail@<span style="visibility:hidden; float:right;"> useless </span>exampl<!-- just one comment -->e.com.
As you may notice this approach is not very pleasant for screen reader users either but I think if you include a personal message via
<div style="visibility:hidden; float:right; height:0px;"> Dear screen reader user. I have included some invisible boxes in the following contact information to puzzle spam crawlers. I apologize for your extra work but I am sure you will be able to decode the text. </div>