At WPExplorer, we take pride in creating tutorials that are simple and to-the-point. We believe that appropriate images are essential to achieving your goals faster. However, there are always some individuals who think that there is a shortcut to success. One such group is content scrapers. Preventing content scraping is complex and requires experience. In this article, we will take a baby step and learn how to prevent image hotlinking in WordPress.
What is Image Hotlinking?
The first thing to understand is the technical term called ‘hotlinking’. Hotlinking means using an image from site A that originally belongs to site B. For example, we have two sites:
Site A: Lazy.me
Site B: WPExplorer.com
The following image is hosted in WPExplorer’s servers (WPEngine):
The leeching site – Lazy.me, directly uses this image’s URL to display the image on their site. That’s image hotlinking. The main disadvantage of image hotlinking is additional bandwidth consumption and loss of originality/creativity. Every time someone visits Lazy.me, the image is served from WP Engine’s servers, thereby increasing the bandwidth consumption.
Prevent Image Hotlinking with .htaccess:
The smartest way to prevent image hotlinking is by editing the .htaccess file. It’s a small text file (usually hidden because of its . prefix) present in your WordPress root installation directory, which allows us to:
– Block or allow individual websites
– Allow or deny blank referrers
– Display custom images detecting image hotlinking
– Protect files and directories
Editing The .htaccess File
Sometimes, you may not find the .htaccess file – don’t worry. Simply fire up Notepad and continue reading. If you do have one, make sure to create a copy of it first and then edit the file. Don’t attempt to edit anything. Just paste the following code:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?your-site.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?your-other-domain.com [NC]
RewriteRule .(jpg|jpeg|png|gif)$ http://i.imgur.com/g7ptdBB.png [NC,R,L]
Explanation:
– Line 1 turns on the rewrite engine used for enabling the redirection process.
– Line 2 allows blank referrers to view the image. Some folks who use firewall usually surf without any referrers. Now, you don’t want to block your images from them. Hence, you allow blank referrers.
– Line 3 allows ‘your-site.com’ to view the images. Replace ‘your-site.com’ with your actual domain name – don’t use the www.
– Similarly, if you want to allow other sites to use your images, you can replace ‘your-other-domain.com’ with the proper domain name.
– Line 5 replaces all unauthorized images to be replaced by this image. You can also create a custom image and upload it to any directory other than the root directory. If you place it in the root directory, your server might fall into an infinite loop. Thus, it’s best to place the image in a folder say “images” and use that link. In which case, the URL would be: “http://my-site.com/images/preventhotlink.png”
Conclusion:
This tutorial covers image hotlinking for the top domain level – it won’t work on sub-domains. If you’re on a managed WordPress hosting provider and do not have access to the WordPress root directory, then you would need to contact customer support and request access. There are WordPress plugins to disable image hotlinking, but we personally prefer this method as it gives us a chance to learn something new.
Let us know if you found this tutorial helpful or if you have any tips to add in the comments below!
