Some people aren’t on their best behavior on the internet. This includes marketers.

Keyword stuffing, comment spam, and paid links are just a few internet sins committed by marketers. Known as black hat SEO, these techniques seek to game search engine algorithms in order to rank higher on SERPs.

Other techniques seek to game fellow site owners. One such technique is hotlinking. Let’s take a closer look at what hotlinking is, and how to prevent it from happening to your website.

Download Now: Free Intro Guide to HTML & CSS

Since hotlinking requires the website hosting the file to use its own bandwidth to load it on your site, it’s considered bad etiquette. Others go further and call it theft. That’s because it eats up the bandwidth of the site you took it from without giving them the benefit of increased traffic. In other words, you’re essentially making that website pay for part of your hosting bill.

That’s how American cartoonist Matthew Inman felt when the Huffington Post UK hotlinked one of his comics. Since he owned and hosted the multiple images that made up the comic, he decided to replace them with a note and a screenshot of his monthly hosting bill. Here’s a screenshot of how the article appeared on the HuffPost after he made the swap:

American cartoonist Matthew Inman's response to HuffPost UK hotlinking one of his comics

Image Source

To avoid running into a similar situation as Inman, you can take steps to prevent websites from hotlinking files hosted on your website. Let’s take a closer look at them below.

Below is a variety of preventive and reactive measures you can take to stop users from hotlinking your files. Doing so can help protect your bandwidth and optimize your website performance

1. Use a CDN with hotlink protection.

The easiest and safest way to prevent hotlinking is to use a CDN that offers built-in hotlinking protection.

For example, Cloudflare offers hotlink protection to prevent other websites from linking to your image resources or abusing your bandwidth. Once enabled, this feature will block websites from linking directly to your image resources. They can still view and download images from your website, however. That means they could properly download, host, and cite images from your website.

Enable hotlink protection feature in Cloudflare CDN's Scrape shielf app

Image Source

2. Add code to your .htaccess file.

To prevent hotlinking on your site, you can add the following snippet of code to your hypertext access file. You can access this file using an FTP client or File Manager.

 
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)example.com/.*$ [NC]
RewriteRule \.(gif|jpg|jpeg|bmp|zip|rar|mp3|flv|swf|xml|php|png|css|pdf)$ - [F]

Please note you’ll have to replace “example.com” in the third line with your own domain name.

3. Disable right click functionality.

To hotlink an image, users can right click the image, copy the image address, and embed the URL onto their site. To prevent hotlinking, it would make sense to disable the right click functionality then. Or would it?

Disabling right click functionality on your images is a controversial solution — mostly because it won’t prevent all users from hotlinking. Some users will easily be able to work around this obstacle if they really want to hotlink your images.

But it may stop users who would have unintentionally hotlinked, or done so without any malicious intent. In that case, it might be worth trying to reduce the total number of image copies on your site. Here’s the pure JavaScript you’ll need.

 
<script type="text/javascript">
var message="Function Disabled!";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false; }
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>

4. Add a watermark to your images.

A more user-friendly solution than preventing all users from right clicking on your images is to add a watermark to your images and other media objects. This solution won’t stop every user from hotlinking your resources, but it will make some think twice.

While your website will likely contain a copyright notice in your website footer, you can emphasize your ownership of your content by adding a text watermark to all your images (or the most popular). This watermark can simply include your name, logo, or the copyright trademark and year. Or it can include more information, including the penalty that will be enforced if a user hotlinks or otherwise misuses your private property.

You can use a free tool like Watermarkly, or a premium tool like Adobe Lightroom Classic to add watermarks in bulk.

Adding text watermark in Adobe Lightroom Classic to prevent hotlinking

Image Source

5. Rename hotlinked files.

Even if you complete some of the steps above, it’s likely that multiple sources will still hotlink images on your website. If you notice that one image is being hotlinked by a high traffic website or many websites which is causing a spike in your bandwidth usage, you can rename the file. By changing the image URL on your website, you’ll cause the hotlinks to break, prompting 404 errors.

This solution isn’t easy to scale, but it is effective for quick fixes.

6. Issue a takedown request.

A more direct approach to responding to websites that have hotlinked resources on your site is to issue a takedown request. A takedown request  — also known as a Digital Millennium Copyright Act (DMCA) notice —  tells a company, web host, or search engine that they are either hosting or linking to material that infringes on a copyright. Here’s an example:

Example of DMCA notice you can send to website that's hotlinking an image or file from your website

Image Source

If the party receiving the notice is a hotlinker, they are expected to take down the material in question as soon as possible or download, host, and cite it properly. Otherwise, their internet service provider can forcibly remove the content or fine, block, or suspend the website. Faced with such severe consequences, the website will usually remove the hotlinked content as quickly as possible.

7. Block IP addresses.

If you notice a spike in traffic on your site, then dig into your site analytics. If you discover that a large portion of your traffic is coming from only a few sites, then they could be hotlinking images or other files on your site. In that case, you can rename the files, issue a takedown request, or block their IP address.

Blocking their IP address could be the final strike if a site repeatedly hotlinks an image or ignores a takedown request. Or you could block a domain right away if you don’t have or want to spend the time renaming files or threatening legal action.

Preventing Hotlinking on Your Website

Taking steps to prevent hotlinking on your website can not only protect the integrity of your brand and ensure you get due credit over your images and other media objects — it can also save your bandwidth from accidental or intentional abuse and ensure you get the traffic you deserve.

New Call-to-action

 css introduction

Originally published Jan 6, 2021 7:00:00 AM, updated January 12 2021

Topics:

Website Performance