Disabling hotlinking on a WordPress site hosted on an Apache or Nginx server is an effective way to prevent other websites from using your images, which can save bandwidth and protect your content. Below are step-by-step instructions for both Apache and Nginx servers.

1. Disabling Image Hotlinking on an Apache Server

Step 1: Access Your .htaccess File

  1. Connect to your server using an FTP client like FileZilla or through SSH.
  2. Navigate to the root directory of your WordPress installation. This is usually the public_html directory or a folder named after your site.
  3. Locate the .htaccess file. If you can’t find it, make sure your FTP client is set to display hidden files.

Step 2: Add Code to Block Hotlinking

  1. Open the .htaccess file in a text editor.
  2. Add the following code snippet to the file:
   # Prevent Image Hotlinking
   RewriteEngine on
   RewriteCond %{HTTP_REFERER} !^$
   RewriteCond %{HTTP_REFERER} !^https://(www\.)?yourdomain\.com/ [NC]
   RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Explanation:

  • RewriteEngine on: Enables the rewrite engine.
  • RewriteCond %{HTTP_REFERER} !^$: Allows direct access without a referrer.
  • RewriteCond %{HTTP_REFERER} !^https://(www\.)?yourdomain\.com/ [NC]: Allows access only if the referrer is your domain.
  • RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]: Blocks access to image files with the specified extensions (jpg, jpeg, png, gif).
  1. Save the .htaccess file and upload it back to your server if you edited it locally.

Step 3: Test the Configuration

  • Visit your website to ensure everything is working correctly.
  • Try accessing an image from an external site or using a different domain to see if the image is blocked.

2. Disabling Image Hotlinking on an Nginx Server

Step 1: Access Your Nginx Configuration File

  1. Connect to your server via SSH.
  2. Navigate to the Nginx configuration directory. This is usually located at /etc/nginx/.
  3. Open the server block configuration file for your site, usually located in /etc/nginx/sites-available/yourdomain.com or a similar directory.

Step 2: Add Code to Block Hotlinking

  1. Open the Nginx configuration file in a text editor:
   sudo nano /etc/nginx/sites-available/yourdomain.com
  1. Add the following location block to your server block:
   location ~* \.(jpg|jpeg|png|gif)$ {
       valid_referers none blocked yourdomain.com *.yourdomain.com;
       if ($invalid_referer) {
           return 403;
       }
   }

Explanation:

  • location ~* \.(jpg|jpeg|png|gif)$: Targets image files with the specified extensions.
  • valid_referers none blocked yourdomain.com *.yourdomain.com;: Specifies the allowed referrers (your domain).
  • if ($invalid_referer) { return 403; }: Returns a 403 Forbidden status if the referrer is not valid.
  1. Save the file and exit the text editor.

Step 3: Test and Restart Nginx

  1. Test the Nginx configuration to ensure there are no syntax errors:
   sudo nginx -t
  1. If the test is successful, restart Nginx to apply the changes:
   sudo systemctl restart nginx
  1. Test the configuration by trying to hotlink an image from another domain.

3. (Optional) Display a Custom Image for Hotlinked Requests

Instead of blocking hotlinked images, you can serve a custom image (e.g., a “No Hotlinking” banner) for requests from unauthorized domains.

For Apache:

Replace the rewrite rule in the .htaccess file:

RewriteRule \.(jpg|jpeg|png|gif)$ https://www.yourdomain.com/no-hotlink.jpg [R,L]

For Nginx:

Modify the location block in your Nginx configuration:

if ($invalid_referer) {
    rewrite ^/ https://www.yourdomain.com/no-hotlink.jpg;
}

Conclusion

By following these steps, you can effectively disable image hotlinking on your WordPress site, whether you’re using an Apache or Nginx server. This can help save bandwidth, improve site performance, and protect your content from being misused on other websites. Be sure to test your configuration after making these changes to ensure everything is functioning as expected.