Article  |  Development

Easily add canonical URLs to your Rails app

Reading time: Less than a minute

Tip to add canonical URLs to Rails app

There has been a lot of talk lately about canonical URLs and how Google and other search engines would really prefer if you would use them. So, what is a canonical URL and why should you use them?

A canonical URL tells search engines what you would like the preferred URL for any page on your site to be. For example, on planetargon.com we have different URLs that lead you to the same page. These two pages, planetargon.com/team/brian-middleton and planetargon.com/who-we-are/brian-middleton, both display the same content. This was due to a change in routing after the team controller was already in place. In Google's eyes, this is duplication of content and that can hurt your site's ranking. What we want to do is tell Google that the content on these pages should be cataloged under planetargon.com/who-we-are/brian-middleton. That is our canonical URL for this page. Since we can use the canonical URL tag globally through the site, we didn't need to add 301 redirects for these pages.

You set this by adding a meta tag like this:

<link rel='canonical' href='https://www.planetargon.com/who-we-are/brian-middleton' />

Make sense?

If not, here are a few links that might help:

So how do we go about adding this to our site? Luckily there is an easy way. The gem canonical-rails will add these to all your pages with a simple helper tag.

First, install the gem in your project. Then generate the config file like so:

rails g canonical_rails:install

Find the config file config/initializers/canonical_rails.rb in your application. Begin editing the config file by setting your root URL like this:

config.host = 'blog.planetargon.com'

Updated: Next, you will tell it what pages, if any, are allowed to have a trailing slash. This will automatically add trailing slashes on page URLs that are whitelisted even if the user is not on a page with a trailing slash. Best practice is to choose one style for your site (with or without slashes) and be consistent to avoid a duplicate content situation.

config.collection_actions = [:index]

You can whitelist certain URL parameters that you might want to use. This means you can have URLs like https://www.planetargon.com?id=1 be set as canonical. If you have a use case for this, you would list these parameters here.

config.whitelisted_parameters = []

Finally, you can have it output a matching OpenGraph URL meta tag (og:url) which is used by Facebook and other social networks.

config.opengraph_url= true

Now you can add this helper tag to the head of your layout:

<%= canonical_tag -%>

All done. Now all pages using your layout will have proper canonical URLs and the search engine gods will be pleased.

Have a project that needs help?