Adding canonical URL’s to OpenCart

I wanted to address duplicate content on a project by adding canonical URL’s because the product page (e.g.: mydomain.com/category/category.html) shares content on some category pages of the same name (e.g.: mydomain.com/category).

OpenCart does not allow canonical URL’s by default and although you can buy modules to address this I decided to code my own solution.

To do this I put the following code in the header.tpl file of my OpenCart theme:

if (strpos($link['href'], 'my-page.html') !== FALSE)
 echo('<link href="http://mydomain.com/my-page/" rel="canonical" />');

In other words, if the URL matches the product page name “my-page.html” then it will point to the canonical page which is for example “mydomain.com/my-page”.

How I easily bulk optimised OpenCart product images for SEO and performance

A website I was working was running a bit slow.

Image size is less of an issue nowadays with somewhat decent broadband for the majority, although running an e-commerce website means lots of images.

Lots of images means more thought has to be put into how to make a website load faster.

Optimising images for a website also helps achieve two business objectives:

  1. Improve SEO because search engines like Google score you on site load time. This means showing up higher in the Google search engine results pages.
  2. Studies have shown that just 1 second faster can help increase conversion rates. This means every second counts.

Changing image file formats

Changing file formats from a JPEG to PNG resulted in smaller image sizes. This is because the product images were very simple and had a small range of colours which means the PNG format can be used to optimise the colour range for a few colours, compared to a JPEG image which being a standard photo format is designed to show millions of colours.

Further compressing images

There are a number of ways you can further optimise images to make them smaller, though the quickest way for most people might be to use a service like smush.it which reduces the size of your image files. So I downloaded all the images from our catalogue via FTP and then uploaded all the images in bulk which were then automatically optimised ready for download, saving almost 50% image size.

Uploading the new images

The difficult part was uploading all the new images in a way that wouldn’t involve uploading hundreds manually. This was because smush.it had had replaced the spaces in the file names with a plus symbol which had to be renamed and also change the database content to replace the .jpg file extensions with .png.

I could have used regular expressions within the command line to change the file names, but wanted a method that would be easy to reproduce for people to follow in future. To make the process easy to reproduce I did a Google search for a bulk file renaming application and found Bulk Rename Utility which bulk renamed all the files  for me.

With the images sorted I was ready to upload them all via an FTP client.

Next I downloaded a database backup of the products so I could open the MySQL file with Notepad++ and search then replace a selection of products containing all the .jpg extensions with .png. This file was saved as a copy so that the original file could be used to restore the old data in case anything went wrong.

Once this was done I restored from the MySQL file which changed all the .jpg extensions of the image files for the products on the shop to .png.

Violla! All images optimised and uploaded within a couple of hours or less instead of doing it all manually which would’ve potentially taken 3-5 days, saving me time to work on other things and my employer potentially hundreds of pounds in time.