Ok, So I posted this over at WA the other day, and thought I might as well share it for anyone else.This is a common problem, when building websites, is How do I best display my email address but, hope spammers, don’t get a hold of it.?
Here it is.
Have you ever wanted to display your email address on your website but were affraid to because of spam?
Well this simple trick will ward away some of the spam bots.
Knowledge needed: Basic html coding ( can be done in the text tab in wordpress).
Ok instead of displaying the usual mailto:email@example.com email link within your web page, use the following code within your html, or (text page in wordpress).
<a href=”mailto:firstname.lastname@example.org”>Contact Us</a>
When your email link is clicked on, it will display your email address correctly.
So your substituting @ for the numerical symbol instead @
Obviously subsitute you for your email and yourdomain for your website.
Give it a try, see if it works for you.
Published on Wealthy affiliate here
But further to this i want to take you through a three of other ways to do this.
1. Write your email address like this,
name (at) yourdomain.com
Humans can recognize what you have written about and fix the problem before emailing you, but scrappers and bots don’t see it.
2. Use a contact form on your website. This way you don’t share your email ever.
3. Write your email address in you photo editing program over transparent layer, trim and save as a png file that is set at 24bit (transparent), then upload to WordPress and insert as an image that clicks to the link, which is your email address.
Why transparent layer and png I hear you ask yourself?
The answer is that if you save it as a jpg, it will make the background a solid colour, this is fine if you site is white, but what if it isn’t, you will see the image edges, been transparent allows it to seamlessly blend into your site.
Here is the break down of the code.
<a title="Contact Us" href="mailto:email@example.com"><img alt="Contact Us" src="/wp-content/uploads/2013/09/youremail.png" width="159" height="16" /></a>
This is the result
Further to this code you are wanting to add some extra tags to stop the search engines following the link. The no follow link between the opening <a tag and the first >
rel=”nofollow” more can be read about over at google.
<a title="Contact Us" href="mailto:firstname.lastname@example.org" rel="nofollow"><img alt="Contact Us" src="/wp-content/uploads/2013/09/youremail.png" width="159" height="16" /></a>
Also when someone does click on your link, you still want them to stay on your site, so the link should open up in a new tab or window, you do this by adding the following code.
Use this code between the opening <a tag and the first >
So all code together
<a title="Contact Us" href="mailto:email@example.com" rel="nofollow" target="_blank"><img alt="Contact Us" src="/wp-content/uploads/2013/09/youremail.png" width="159" height="16" /></a>
And the result.
Ps. To make sure the @ sticks you have to make sure that you are on the text or html page in wordpress before publishing, otherwise the visual editor will change it to an @ symbol.
Give me some feed back did this help you?