- Feb 10, 2017
- by Brad Litwin
As a website owner, you’re probably already familiar with some of the issues brought about by spammers and bots. When left unchecked, they can bring down the quality of your site by abusing your comments sections, and even attack your contact forms.
To this day, Completely Automated Public Turing Tests To Tell Computers and Humans Apart (CAPTCHAs) are still one of the most efficient ways to prevent bots from spamming your website. They are easy to implement, and even though attackers often try to bypass them, they still provide a solid line of defense.
In this article, we’ll go into detail concerning the benefits of using CAPTCHAs, before teaching you how to implement them. Let’s secure your website!
The Benefits of Using CAPTCHAs on Your Website
In case you’ve somehow managed to avoid them until now (which would be quite a feat), CAPTCHAs are tools that websites employ to determine whether a particular visitor is a human or a bot.
While for most users CAPTCHAs represent a small nuisance, they can be quite a boon for website owners, due to the following reasons:
- They offer an elegant way to differentiate between ‘real’ and ‘fake’ traffic.
- Human users should be able to solve most CAPTCHAs in a matter of seconds. Thus, they don’t provide a barrier to entry for real visitors.
- A CAPTCHA can reduce the amount of spam on your website.
Overall, any website that wants to protect itself from bots should probably consider implementing a CAPTCHA solution in key locations. Login pages, for example, are perfect real estate for CAPTCHAs. Many websites still require users to register before commenting, so if bots can’t get past your login, they shouldn’t be able to spam you.
How to Implement CAPTCHAs on Your Website (In 3 Steps)
There are plenty of great CAPTCHA solutions available, but we don’t have time to cover them all. Plus, we’re sure you’d prefer for us to focus only on the best, which is why we’ve chose to feature reCAPTCHA.
This tool comes courtesy of Google and is suitably high quality. reCAPTCHA is a step beyond most current CAPTCHA solutions when it comes to usability. Its CAPTCHAs seem at home on most sites and are quite aesthetically pleasing. Let’s learn how to set one of them up.
Step #1: Register Your Website on reCAPTCHA
The first step is the simplest. Go to the reCAPTCHA homepage and click on the Get reCAPTCHA button at the top of the screen. On the next screen, you’ll find a prompt to enter a label and domain for your site, so you can identify it among your reCAPTCHA properties.
Populate both fields, click on Register, and you’re done. On the next screen, you’ll receive both a Site Key and a Secret Key. For the purposes of this tutorial, we just need the former.
Save that key and let’s move on.
Step #2: Add the reCAPTCHA Script to Your Website
In order to display our CAPTCHA, we need to tinker with some code. More specifically, you need to insert the following line of code between your site’s <head> tags:
It’s worth noting that this code needs to be added to any page where you want to display a CAPTCHA, since they won’t work without it.
Step #3: Place the CAPTCHA on Your Site
To display our CAPTCHA, we’ll need to add one more line of code to our pages. More specifically, this particular line should be inserted wherever you want your CAPTCHA to appear:
<div class="g-recaptcha" data-sitekey="Your site key goes here"></div>
Note that the line includes a placeholder for your own reCAPTCHA Site Key, which we obtained during the first step. Paste it between the quotation marks and save your changes. Your CAPTCHA should be live now!
Despite being under constant attack, CAPTCHAs remain a wildly popular method of protection for websites. They’re definitely not the only defense you can implement, but they are one of the simplest and most efficient.
- Register your website on reCAPTCHA.
- Add the reCAPTCHA script to your website.
- Place the CAPTCHA on your site.
Do you think CAPTCHAs are an efficient tool to protect your website from attackers? Share your thoughts with us in the comments section below!
Image credit: Pixabay.