Setup MaxCDN with WordPress Blog Without Duplicate Issue

Integrating MaxCDN with a WordPress blog improves the loading time of a page – you might have heard of this a lot. Yes, you heard it right!

If you can configure MaxCDN in the right way, the performance of the blog gets a boost and it ranks higher in the search result pages. You might be noticing that I have used this phrase “the right way”, but why? There are tons of tutorial in the web to setup MaxCDN with a WordPress blog. Believe me, most of them are not good enough for SEO.

Generally, you need to create a Pull Zone at your MaxCDN cPanel, choose your home page URL with the trailing slash as an origin and create a custom domain to serve your static contents from it. Then just create a CNAME record for the custom domain at your local server pointing to the CDN URL. I am not going into the details as you can read them at MaxCDN knowledge base guidelines. So, what happens when you use your main domain as the origin is that it creates a duplicate copy for each accessible URLs of your site.
Say, your main blog URL is http://www.yourdomain.com/ and you want to setup MaxCDN with the custom domain http://cdn.yourdomain.com/. When you use http://www.yourdomain.com/ as the origin, http://www.yourdomain.com/ and http://cdn.yourdomain.com/ shows the same page. Even, every post of your blog will have a duplicate copy for each of them. For instance, if you have a post with the URL http://www.yourdomain.com/my-permalink/ then you will see the same page by just replacing the ‘www’ with ‘cdn’ (http://cdn.yourdomain.com/my-permalink/). Though every duplicate version, created by the custom domain contains the rel="canonical" tag pointing to the original URL, it is still a duplicate page which have no value for your blog. Sometime, your site can be penalized by Google (my guess). You can check for the duplicate issues from these:
1. Original page – http://www.wpbeginner.com/, Duplicate page – http://cdn.wpbeginner.com/.
2. Original page – http://www.wpbeginner.com/wp-tutorials/how-install-wordpress-cdn-solution-maxcdn/, Duplicate page – http://cdn.wpbeginner.com/wp-tutorials/how-install-wordpress-cdn-solution-maxcdn/.
Courtesy : +SyedBalkhi.
The same thing happened when I integrated MaxCDN into my own blog. I contacted the MaxCDN support but they could not give any solution for this problem. Normally, I was frustrated and removed this CDN service from my blog.
I searched a lot for the solution and unfortunately, there was no such article in which the issue has been discussed. Accidentally, I found a partial solution during visiting this site. It is also using MaxCDN to serve its images. But, when I tried to access the doc-root location of its MaxCDN custom domain i.e mcdn.maketecheasier.com, it returned a 403 Forbidden response. Every URL of that site with the custom domain (the subdomain) returns the 403 response. This can be done by using the MaxCDN hotlink protection service.
Courtesy : +DamienOh.
What you need to do is to put *.yourdomain.com at the HTTP Referrer whitelist. It returns a 403 Forbidden response if you try to access any URL through your custom domain for CDN. It denies any direct access of your images from humans and the other web pages which are not in the whitelist. It also prevents Google from indexing your images into the Google cache. That is why I called this as a partial solution.
So, what is the exact solution to setup MaxCDN without having any duplicate page? Here is the detailed guide.

How to Setup MaxCDN with WordPress without any Duplicate Issue

The MaxCDN pull zone is nothing but the mirror of the origin you choose. So, if you create an origin which do not have any other content except the images then there is no chance of having duplicate contents. What you need is to create a subdomain at your local server, say it is origin.yourdomain.com and copy all your existing images at that subdomain.
Here, we suggest to create another directory ‘wp-content’ under the subdomain and copy the ‘uploads’ directory from your root directory’s ‘wp-content’ folder. Though you can pick your own choice for the image path, the above will make the procedure easy to follow. Once you setup your WordPress properly to serve the images from that subdomain, you can proceed to the next steps.
Step 1. Setup MaxCDN pull Zone
Log into your MaxCDN cPanel, go to ‘Zones’ from the top of your cPanel and create a Pull Zone.
create pull zone in maxCDN
Give a suitable name for the Pull Zone (for example: ‘asset’), put the subdomain (which you’ve created earlier to host the images) URL as the origin with the ending slash. For instance, it should be http://origin.yourdomain.com/. Give a label for the pull zone and click on the ‘Create’ button. This will automatically redirect you into the zone summary page which contains the unique CDN URL and other details. Make a note of your CDN URL.
Pull zone summary
Now, click the ‘Setting’ option and create a custom domain for your CDN. Give a name like ‘cdn’, ‘images’ etc. Make sure that it does not match with the subdomain name which you are using as the origin. This custom domain will be used to serve your images from MaxCDN. Once completed, click the ‘Update’ button.
create custom domain in MaxCDN
Step 2. Configure SEO Settings For MaxCDN
Once you setup the the Pull Zone properly, click on the ‘SEO’ option and and enable all the options – ‘Canonical Header’, ‘Robots.txt’ and ‘Use custom robots.txt’. Update the custom robots.txt according to your image location. Finally, click the ‘Update’ button.
maxCDN SEO
You’re done with the MaxCDN settings.
Step 3. Setting up the Local Server to Integrate MaxCDN into your Blog
Go to your hosting cPanel > DNS Zone Editor and add a new CNAME record with the name that you chose as your custom domain in MaxCDN pointing to the CDN URL.
add CNAME
Step 4. Setup WordPress to Serve the Image from MaxCDN
Now, you do have your images at the subdomain which are mirrored by another subdomain (custom URL) in MaxCDN. The last thing you need to do is setting up your WordPress to serve the images from the MaxCDN. What you need is to configure the WordPress so that the new images are uploaded into the local subdomain (origin.yourdomain.com). Also you have to change the source path for existing images to the URLs with MaxCDN custom domain.
I will not describe the detailed procedure as we already covered about this. You can learn it from here : How to host images on subdomain in WordPress & How to configure MaxCDN without Plugin in WordPress. The only thing that you have to set differently from the above tutorials is the ‘Full URL path to files:’ field. You need to put the path of the MaxCDN custom URL.
wordpress media settings
Also make sure to block the local subdomain from Google using a robots.txt as you don’t need to allow the origin to be indexed.
That’s it. It will now serve your images from the MaxCDN servers without any duplicate issue.
Note: We’re not promoting MaxCDN anyway. Several CDN services are available but what I found about MaxCDN is that it is quite affordable for its flat cost $9/month.