How to “Canonicalize” Images and PDFs with the .htaccess File

You may have heard about how adding a ‘rel=”canonical”‘ tag to the head of an HTML file can improve your SEO. And we all need to give our SEO a tune-up once in a while. This tag can be helpful if you have many versions of the same page, creating duplicate content (which is bad for SEO). Often, this can happen if the site’s code allows multiple URLs to generate the same page.

The ‘rel=”canonical”‘ tag helps your SEO by telling search engines what URL is the official (or, canonical) one. It’s like a pointer that refers the search engine to the canonical URL. And you can do this with your .htaccess file!

What about images and PDF files?

It’s true that static files like images and PDFs don’t have an HTML head area where you can put a canonical URL. Imagine that your site has thousands of images that have been indexed by Google. It’s possible someone might land on your image while searching.

Is there any SEO value in that? There can be, if you put a canonical URL for that image in the HTTP response headers. Follow along below and we’ll show you how to do that with your .htaccess file.

How to Canonicalize Images and PDFs

For the example below, let’s suggest that the image name has a corresponding HTML page of the same name. If anyone lands on that image, the HTTP response header will provide our canonical URL for the page associated with that image:

 Options +FollowSymlinks RewriteEngine On  RewriteRule ([^/]+)\.jpg$ - [E=FILENAME:$1]  <FilesMatch "\.jpg$">       Header add Link '<https://example.com/%{FILENAME}e.html>; rel="canonical"' </FilesMatch>

You can use the same code for PDFs or other file types, just change the file extension provided.

You could also add this header to individual files:

 <Files image.jpg>       Header add Link '<https://example.com/image.html>; rel="canonical"' </Files>

In the above, the URL is dynamically generated, and in the below, it’s hard-coded. You can use whichever way works best for your site.

How do you know it’s working?

You can test this procedure by opening your browser’s inspector or debugger and viewing the HTTP response headers. (How to do this will vary for different browsers.)

This code (slightly modified) can be placed in your Apache configuration, but that requires root access. For accounts that don’t have root, like our Shared Hosting accounts, the .htaccess file is the best place to do this.