In this tutorial I will 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 that we show on our website have their own particular URL. For example, this image that you can see on the right has .
Those URLs appear in the HTML code when you display them on your website like this:
Well then if someone else uses that same code on another website, the image will look the same. In other words, anyone can display images from your website on theirs, without even having to copy and upload them to their website. That can be very harmful, since every time that image is loaded it is wasting 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 that 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 , and it does just that. I will ensure that the images of your website cannot be used outside your domain. It is the simplest plugin, and does not require any configuration.
If you want more control, you have at your disposal , which allows us to configure all kinds of exceptions and conditions to take into account before avoiding hotlinking:
We can do things like protect the images, set cache for them, decrease the opacity of the images, put watermarks, or even place alternative images that will load instead of the ones that should. Normally an image of the “hotlinking prohibited” style is placed, or an image with the URL of our website, so that whoever sees it knows where it was taken from.
Another option that the plugin also gives us is to allow hotlinking to certain domains. How? What? But hadn’t we said that hotlinking was bad and we wanted to avoid it? Well, yes, but in certain cases, we should allow it. For example, sometimes Google will want to use our images for Google Images, or even to display them in search results. How are we going to say no? 😉
In this case, we simply have to indicate all the allowed domains, and that’s it. Search engines, social networks, translators, etc.
In short, a very complete plugin, with 5 configuration screens, which will add extra weight to our WordPress, which is a pity, because by doing it by code we save it.
Avoid hotlinking by code
Well, if you’re reading this, you’re one of mine. We’re going to fix all of this with a few lines of code in the .htaccess file. Here we have them:
RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?tu-web.com RewriteCond %{HTTP_REFERER} !^http(s)?:/ /(www\.)?google.com RewriteRule \.(jpg|jpeg|png|gif)$ http://your-web.com/alternative-image.png
Do you want to know what each line does? Take note
- The first line activates the redirect 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 must put their domain.
- The fourth line allows access to Google, so that we can index them all.
- The fifth line indicates which image to show instead of the image that they want to catch us.
Have you seen how it is not so complicated to work with a few lines of code? Remember that we have to place this in our .htaccess file, at the end of everything.
It is very important that you copy those lines without modifying anything other than the URL, since a small change in the .htacces file will generate a 500 error with a white screen. If you want more information about this, next week a , in which I will deal with, among others, that error, and how to solve it begins.
Anti hotlinking code generators for .htaccess
If we dare not touch those lines of code, no problem. There are some online tools in which we only have to fill in certain fields and they write all the code for us. For example, , which generates code for us simply by filling out its form:
As you can see, we can select the allowed domains, the direct visit, detail the substitution image and even the image extensions. Just filling this already gives us the magic lines:
And that’s it! We already have our website hotlinking proof. If you weren’t avoiding hotlinking until now and you really had a lot of people taking advantage of it, you will surely notice an improvement in the servers. And if you have graphs of CPU activity or data transfer, you will also notice an important change
conclusion
Avoiding hotlinking is a good recommendation, but we should always take precautions not to restrict it too much, since we may 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.).
And here is the tutorial of the day. I hope it helps you and that it can take a load off your shoulders. (or at least a higher transfer rate 😉.