Setting Canonical URLs in Hugo

I steal quite a bit from other folk, to put on my blog.¹
Case in point, is my last post where I stole the image from Tom Gauld.
Or a few Seth Godin posts, somewhere on the blog, that I have posted in their entirety.

While I do credit them in the post, I wished there was a way, I could programmatically tell the search engines and the bots of the world that I did in fact, steal from someplace and that they should actually be looking over there and leading people there.
A little bit of searching, reavealed that there is in fact, such a way to do it.
It’s called the Canonical URL.
In a nutshell, it tells the machines to guide folk there, because that is the source of truth.

And this is where my move to Hugo came in handy.
Hugo makes doing this a breeze.
The idea revolves around processing a canonical tag that we add to the front matter of said post.
Like so …

canonical: "the source html link to the original content."

Now to have Hugo process that, we add the following code snippet to the head section of our blog’s template.
In my case, I copied head.html from my theme’s layouts/partials folder to my own layouts/partials in the blog’s structure and modified it by adding this code block.²

{{- if isset .Params "canonical" -}}
  <link rel="canonical" href="{{ .Params.canonical }}" />
{{- else -}}
  <link rel="canonical" href="{{ .Permalink }}" />
{{- end }}

And that about does it.
I stole this code snippet from a CloudCannon blog post.
And if you check the HTML source for this post of mine, you’ll see that the canonical site, does indeed point to CloudCannon’s site.

P.S. Subscribe to my mailing list!
Forward these posts and letters to your friends and get them to subscribe!
P.P.S. Feed my insatiable reading habit.