How to Avoid HOTLINKING?

In this tutorial I tell you How to avoid Hotlinking your images and files, so that others do not take advantage of your resources and transfer rate.

What is Hotlinking?

All the images we show on our website have their own particular URL. These URLs appear in the HTML code when you display them on your website like this:

<img src=”http://web.com/images/cats.jpg”>

Well, if anyone else uses that same code on another website, the image will look the same. That is, anyone can display images from your website on theirs, without even having to copy it and upload it to their website. This can be very harmful, because every time that image is uploaded it is using resources and transfer rate of your server. In other words, apart from copying you, they are using your resources.

How can we avoid hotlinking?

Well, like so many things in this world, there are many ways. Some easier (but not so good), some more complex (but better).

Let’s start with the simple method, for those who don’t want to use code, because there is a WordPress plugin that solves the issue quickly. It’s called Hotlink Protection, and it does just that. It makes sure that images from your website cannot be used outside of your domain. It is the simplest plugin, and requires no configuration.
But I recommend not to put too many plugins to our WordPress. We can save these plugins and protect ourselves from hotlinking with code.
Now I show you how.

Avoiding Hotlinking by Code

Let’s solve all this with a few lines of code in the .htaccess file. Here they are:

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?tu-web.com [NC]

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]

RewriteRule \.(jpg|jpeg|png|gif)$ http://tu-web.com/ alternative-image.png [NC,R,L]

Want to know what each line does? Take note

• The first line activates the redirection engine.
• The second line allows direct visitors to the image to see it.
• The third line allows your own website (your-web.com) to display the images. Here everyone has to put their own domain.
• The fourth line allows access to Google, so that it can index them all.
• The fifth line indicates which image to show instead of the image they want to catch us.

Have you seen how it is not so complicated to work with a few lines of code? Let’s remember that we have to put this in our .htaccess file, at the end of everything. It is very important that you copy those lines without modifying anything but the URL, because a small change in the .htacces file will generate a 500 error with a white screen.
Avoiding hotlinking is a good recommendation, but we should always take precautions not to restrict it too much, as we could be losing positioning or presence in social networks.
On the other hand, in this tutorial we have talked about images, but all this is applicable to any other type of file, such as PDFs, video files, audio files (music, podcasts, recordings, etc.).