Have you ever wondered why some websites display your images without your permission?
Have you ever noticed that your website's speed and performance are affected by other websites linking to your images?
Have you ever worried that your images are being used in ways that you don't approve of?
If you answered ‘yes’ to any of these questions, then you may be a victim of image hotlinking.
Image hotlinking is a practice in which someone uses your images on their website by directly linking to the image URL on your server.
Fortunately, there are some ways to prevent image hotlinking in WordPress and protect your images from unauthorized use. By the end of this article, you will learn how to prevent image hotlinking in WordPress and improve your website's security, performance, and SEO.
Let's get started!
What is Hotlinking?
When you publish something on the internet, it can be accessed by anyone; this includes the elements of your webpage such as images, videos or audio clips. If you do not have watermarks on your images, then some websites may embed these elements on their site without passing the credit to you.
In simpler terms, it means displaying images, videos, gifs, and other media files on a website by directly linking to the content on the originating server. Hotlinking is also known as inline linking or remote linking.
For example, let’s say you run a WordPress blog with photos of your recent holiday adventures. Someone else likes the photos that you have taken and decides to use them on their own website.
They will do this by directly using the source URL of the image from your website, without downloading and re-uploading the images on their own website. This creates a link that is referred to as “Hotlinking”.
Now whenever the other website receives traffic on the post with an image hotlinked from your website, it will start costing you server bandwidth, because the images will be served through your hosting.
While it may seem harmless at first, hotlinking can have several adverse effects on your website’s performance and costs. When another website hotlinks to your images, it steals your bandwidth, making your website slower for visitors and increasing your hosting costs (if paying per gigabyte).
Moreover, hotlinking can lead to copyright issues and negatively impact your search engine optimization (SEO) ranking.
If you suspect that less reputable sites are hotlinking to your content, then you should consider disabling the ability to hotlink to your website entirely.
Why You Should Prevent Others from Hotlinking to Your Site
There are four main reasons why you should be concerned when someone hotlinks to your website.
#1 - Increased Bandwidth Usage
One of the main reasons to prevent hotlinking in WordPress is to avoid overuse and misuse of your server bandwidth. Bandwidth is the amount of data that your server can transfer to and from your website visitors. Every time someone visits your website or views your images, your server consumes some bandwidth.
If someone hotlinks your images, they are essentially stealing your bandwidth. Every time their website loads, your server has to send the image data to their visitors. This can increase your bandwidth consumption significantly, especially if the hotlinked images are large or popular.
If you exceed your bandwidth limit, you may face consequences from your hosting provider. The exact consequences will vary depending upon your contract, but you can expect the following:
- Extra charges for bandwidth overages.
- Suspension or termination of your hosting account.
- Degradation of your hosting service quality.
#2 - Degraded Performance
Another reason to prevent hotlinking in WordPress is to improve your website performance. Performance is the measure of how fast and responsive your website is. It affects various aspects of your website, such as user experience, conversion rate, and SEO ranking.
If someone hotlinks your images, they are not only consuming your bandwidth, but also increasing your server load. Server load is the amount of work that your server has to do to process requests and deliver responses. The more requests your server receives, the more load it has to handle.
If your server receives too many requests for hotlinked images, it may slow down or crash. This can affect the performance of your website and make it less accessible and reliable for your visitors.
#3 - Copyright
A third reason to prevent hotlinking in WordPress is to protect your intellectual property rights. When you create something, such as images, videos, music, etc., you have control over how your creations are used and distributed by others.
If someone hotlinks your images, they are using them without your permission or credit. This can violate your intellectual property rights and cause legal issues. For example:
- You may have bought or licensed your images from marketplaces or creators and have limited rights to use them on your website. If someone else hotlinks them on their website, they may breach the terms of the license and expose you to liability.
- You may have created or edited your images yourself and have exclusive rights to use them on your website. If someone else hotlinks them on their website, they may infringe on your copyright and damage your reputation.
#4 - SEO
A fourth reason to prevent hotlinking in WordPress is to optimize your SEO rankings. It is the process of improving the visibility of your website in search engines, such as Google or Bing. It helps you attract more organic traffic and potential customers to your website.
If someone hotlinks your images, they may affect your SEO in several ways. For example:
- They may reduce the visibility of your images in Google Images or other image search engines. If Google values their website more than yours, it may display their website instead of yours when someone searches for the images.
- They may create duplication issues for both websites. If Google finds the same images on multiple websites, it may consider them as duplicate content and penalize both websites for low quality or relevance.
How to Prevent Hotlinking in WordPress
There are three methods to prevent hotlinking in WordPress websites. Let’s take a look at each one.
Method 1: Configuring Apache (.htaccess) or Nginx
Editing .htaccess on Apache
The .htaccess file is a configuration file that allows you to control various aspects of your web server, such as redirects, security, and caching. You can use it to disable image hotlinking by adding some code that will block requests for your images from other domains if your WordPress website’s hosting uses an Apache server.
To do this, you will need to access your .htaccess file using an FTP client or a file manager in your hosting control panel. Then add the following lines of code in your .htaccess file, which is usually found in the public_html folder.
Before you make the edits, it is advisable to make a backup of the file.
/* Prevent image hotlinking in WordPress */
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourwebsite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?facebook.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?twitter.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?other-websites-if-any.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [F]Here’s what the rule does:
- The first line checks if the HTTP Referer header is not empty.
- The next few lines check if the HTTP Referer header does not match the allowed domains. In this case, the domains that are allowed to hotlink your images are yourwebsite.com, google.com, facebook.com, twitter.com, and other-websites-if-any.com. The [NC] flag makes the condition case-insensitive.
- The last line specifies the types of files that should be blocked from hotlinking. In this case, it’s .jpg, .jpeg, .png, and .gif files. The -[F] flag returns a 403 Forbidden response to the client if the conditions are met.
So, any requests for hotlinked images from domains other than the ones specified will be blocked with a 403 Forbidden error. If you want to display a custom image instead of a blank or broken image when someone tries to hotlink your images, you can modify the code as follows:
# Disable image hotlinking and display custom image
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?example.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ http://example.com/hotlink-image.jpg [NC,R,L]This code will redirect the request to a custom image that you have uploaded to your server. You will need to replace http://example.com/hotlink-image.jpg with the URL of your custom image. You can use any image that you want, such as a logo, a watermark, or a message that says “Stop stealing my images”.
Writing Custom Nginx Config Rules for Blocking Hotlinking
If you are using an Nginx-based server, then you will need to add the following rules in the config file to block hotlinking.
location ~ .(gif|png|jpeg|jpg|svg)$ {
valid_referers none blocked ~.google. ~.bing. ~.yandex. ~.yahoo. mydomain.com *.mydomain.com;
if ($invalid_referer) {
return 403;
}
}Here’s how the above code works:
- The location block matches any requests for files with extensions gif, png, jpg, or jpeg.
- The valid_referers directive specifies the domains allowed to refer to the files. In this case, ‘none’ and ‘block’ are used to prevent any referrers from the same domain or blocked referrers. mydomain.com and *.mydomain.com allows requests from the domain and its subdomains; you can replace mydomain with your own website URL.
- The if statement checks if the referer is invalid. If the request comes from an invalid referer, the server responds with a 403 Forbidden status code.
This rule prevents other websites from displaying your images directly by hotlinking them. It is a good way to protect your image resources and prevent other websites from using your website’s bandwidth, which can affect your website’s speed and performance.
If you want to display a custom image instead, you can use the following code snippet.
location ~* \.(jpg|jpeg|png|gif|bmp|ico)$ {
valid_referers none blocked example.com www.example.com;
if ($invalid_referer) {
rewrite ^ /path/to/generic/image.jpg last;
}
}In this example, the rules apply to all images with the specified extensions. The if block checks whether the referer header is invalid, and if so, it rewrites the request to the generic image. You need to create the image and place it in the /images directory of your web server.
Method 2: Using Cloudflare to Block Site Scraping
Many WordPress website creators use Cloudflare as a CDN (Content Delivery Network) service to enhance their site’s speed, performance, and security. Cloudflare also has a feature that can help you prevent image hotlinking in WordPress.
One little-known feature of Cloudflare is to use it to disallow hotlinking on your website. Once you have configured Cloudflare on your WordPress website, you can disable hotlinking under the option called “Scrape Shield”.
By default, enabling this rule will block all hotlinks from all search engines and websites other than your own. You can customize the rules by following the guidelines in Cloudflare documentation.
Method 3: Add Watermarks
Another way to protect your images from hotlinking is to watermark them with your logo. A watermark is a visible (or invisible) mark that identifies the owner or creator of an image. By adding a watermark to your images, you can make it harder for people to use your content without your permission.
By watermarking your images with your logo, you can de-incentivize image hotlinking and protect your intellectual property rights. This has the additional benefit of increasing your brand awareness and recognition by displaying your logo on your images.
You can watermark your photos for free by using tools such as Watermarkly, Make Watermark, or Visual Watermark. Alternatively, the WordPress plugin Image Watermark allows you to automatically watermark any images uploaded to WordPress, and bulk watermark any images that have already been uploaded.
Final Thoughts: Prevent Hotlinking in WordPress
Hotlinking affects many websites that include images and videos. In this tutorial, we have shown you how to prevent hotlinking using four different methods. These methods are simple and effective ways to stop other websites from stealing your images and videos.
However, you should also make sure that you allow search engines and social media sites to use your images and videos. If you block them, you may hurt your SEO ranking and social media presence.
Patchstack is a cloud-based security platform that helps you protect your WordPress sites from hackers and malware. Patchstack scans your sites for vulnerabilities, monitors your site activity, and alerts you of any suspicious behavior.
If you want to keep your WordPress sites safe and secure, you should sign up for Patchstack today. Patchstack offers a free plan that notifies you 48 hours before a vulnerability is disclosed, giving you ample time to secure your website against attacks.
Start using Patchstack today for free and see the difference for yourself.
