Duplicate image content should always be avoided. There are many reasons why this could happen. You may have a few different areas of your website that use the same image like your main pages, your blog, our projects and your services. You may even be using a CDN to cut down on image loading times. In both cases, you will want to set a preferred URL for each image. This is done through HTTP headers, through your .htaccess file. Before we get into that, it is important to first optimize your images for Image Search.

Google Image Search Optimization Tips

When optimizing your website for Google Image Search, you will want to make sure that your images meet certain criteria. If you meet such criteria, you will have good visibility in Google Image Search. Here are some items below that you may wish to take into consideration:

• Optimized category
• Optimized subcategory
• Optimized sub-subcategory
• Optimized file name
• Image Sitemap
• Image Sitemap added to your Sitemap index File
• Use Large Images (better indexing and ranking)
• Have a thumbnail to go with each image
• Have fast loading images (CDN or save as progressive so similar colours load at the same time as opposed to pixel by pixel)
• Fill out your image metadata
  • Image Title
  • Short Description
  • Long Description
  • Alt Attribute
  • Image Caption
• Have a gallery
• Integrate your images with your social media accounts; especially Facebook, Flickr, Instagram and Pinterest

How to Avoid Duplicate Content for Your Images

Once image optimization is complete, you are ready to handle duplicate content issues. If you are hosted on a Linux server, then the following will apply to you. If you have a Windows server please disregard the below and contact us for help. We are happy to implement for you.

Here is how you would set the preferred canonical for each image:

<Files “name.png”

Header and Link “<http://www.site.com/page-name/>; rel=\”canonical”

</files>

What the code above will do is add on an HTTP header to the image that’s pointing to the URL. You may wish to automate this with a * so that all images will be treated the same way. This works for other file types as well.

Bulk Image HTTP Canonical Configuration With .htaccess

Now that you know how to avoid duplicate content manually, let’s take a look at how you would replicate the solution for multiple files. You will need to create a rewrite rule so that you can use conditional logic in order to treat a specific file type the same way, each time it is seen.

RewriteRule ^(.+)\.png /png.php?file=$1 (L)

Here is what your PHP file may look like. This will be referenced each time a .png file is seen on your website and the applicable .htaccess rule will be followed.

// PNG Path for Canonical Headers

$path   =  $_SERVER[‘DOCUMENT_ROOT’  ]  .  $_GET[  ‘file’  ]  .  ‘.png’;

if( file_exists(  $path  )  )  {

if(  $conditions  )  {

header(  ‘Link:  <http://www.site.com/page-name/>; rel=”canonical”‘  );

}

header(‘Content-Type: image/png’  );

header(‘Content-Length:  ‘   .  filesize(  $path  )  );

readfile(  $path  );

}

else  {<
header(  ‘HTTP/1.0 404 Not Found’  )’

include(  $_SERVER[  ‘DOCUMENT_ROOT’  ]  .  ‘404.php’  )’ }

What the code above will do is perform the canonical if the image is found. If not, it will return a 404 error. In order to fix a 404 error you will need to re-add your image to your server or CMS if it was removed. Be sure to name it exactly as it was named before, including any image structure that you had. If you didn’t like the structure you had before, you will need to do a 301 redirect from the old image URL to the new image URL once you have re-added in your image. The conditions and header lines can be modified for whatever file type you want to configure.

Make Sure You Have Set the Canonical(s) Correctly

Once the above is complete, you will want to verify that things are functioning correctly. It is always a good idea to check your work 🙂 We like using Linux and the curl command. If you are a Windows user or a Mac user and aren’t comfortable in Command Prompt / Terminal, you could use a web tool to check your headers for you. What you are looking for is the following line:

Link:  <http://www.site.com/image-name/’ rel=”canonical”

Contact Us for Help With Duplicate Image Content – Canonical Headers

Check with your programmer or development team before implementing anything in this article. This is only meant as a guide to fix duplicate image content. If you need help or don’t have internal resources, we are happy to implement this for you. If you have been noticing you have other forms of duplicate content, broken links, indexing or any other technical areas contact us today. You can send us an email or call / text 604-779-8438.