When deploying a web application it’s important that the URL responds to both www and non-www as well as both http and https. However it’s also very important that only one of those is the absolute and correct one and the server forces users to only use one.
I like to use cloudflare for my DNS configurations and Heroku for my web server. These techniques can be used on any programming language such as Ruby on Rails, PHP, Meteor.js, or Django. They can also be used on any web server such as Apache, nginx, node.js. It doesn’t require any .htaccess rules either, only the clever use of Heroku, Cloudflare, and HTML.
It’s important to tell search engines and bots which version of your URL is the absolute and correct version. This way search engines will be pointing to the correct URL and browsers will understand which one to use too. This is important for SEO and analytics. For SEO, search engines will see both www and non-www sites as two separate sites and giving each it’s own search rankings. You want to make sure that you are clumping all of your users into a single authoritative URL so the search engines can see just how popular your domain is. This authoritative URL is known as the canonical URL.
To set the canonical URL simply add this HTML code in the head of every page on your site.
Of course every page has a unique canonical URL. If you have a webpage located at
https://example.com/about.html then your canonical URL will have the
about.html in it.
Responding to everything
You want your website to listen to and respond to all of the following versions of your URL.
This is important because people will be trying every one of these combinations when going to your site. Whenever I hear or see a URL I never pay attention of whether it has www or no www before it. I simply type the name_of_url.com into my browser and go. Way too often the website hasn’t set up DNS correctly and I get page not found and I just think the page doesn’t exist anymore and go away. This is a grave error on the webmaster to simply ignore this problem.
Setting up Heroku
First let’s set up Heroku.
- Go to the
settingspage on your application
- Go to the
domainssection and add the domain you wish to be your primary one. In our case we are choosing example.com
Setting up Cloudflare
For setting up Heroku and Cloudflare simply do the following DNS settings:
Now we need to set a forwarding rule in Cloudflare.
- Go to the gear icon to open your
- Go to the
- In the
URL patternbox, type
- In the
forwarding destination URLbox, type
301 - permanent
If you don’t wish to or can’t use https then you can just choose http here instead.
If you do wish to use https then I also recommending setting
always use https in the page rules also.
Responding to HTTPS
There is a really cool trick to getting free https when using both free Cloudflare and free Heroku plans. Your Heroku app should already be responding to https://example.heroku.com. It has a it’s own official HTTPS certificate that you can use if you use their domain name. Cloudflare has an option called Full SSL which is part of the free plan. This setting will allow HTTPS connections to Cloudflare, then do a HTTPS connection to the hosting domain. Essentially it’s end to end HTTPS all for free.
Setting up Full SSL in Cloudflare
Access your Cloudflare account and do the following:
- Go to the gear and choose
- Scroll down to
Cloudflare is updated upon changing this setting.
Now your website should be responding to each of the following variations of your site:
However, the first three variations should all be forwarding to
https://example.com. This is done using the Cloudflare forwarding rules we set.
Lastly, search engines and browsers will understand your canonical settings you have defined and only be using that version of your URL as the authoritative URL to use.