DEV Community

Cover image for Meta & Canonical Tags
Eamonn Cottrell
Eamonn Cottrell

Posted on • Updated on • Originally published at eamonncottrell.com

Meta & Canonical Tags

So I need to do some meta work. I've touched on the Hugo theme that I built for my home page here, but this only covered the very basics of going live. Time to add some details!

I've already added a few meta tags to my head, but I'd like to dynamically generate the meta description depending on which page is being viewed.

I'd also like to add canonical tags to each page. Same deal here--they should be generated uniquely for every page on the site.

I've been checking out a primer on SEO from Monica Lent, and implementing some of the basic suggestions she's going through on her weekly videos.

The first suggestions include adding a browser extension to check out several things at a glance. Opening the developer console is the sure fire bet here, but I'm pretty happy for her recommendation of an extension to get a real quick snapshot of some basics like title, description, url, canonical, etc.

I went with Detailed.

In Hugo, which I'm using to generate my personal web portfolio, I've currently got the meta description set statically for the whole site, regardless of the page.

That's not cool.

So, I'm going to add a bit of code to modify that and allow me to include a custom description for each page, if it contains one. Otherwise, it can just have the main site description to fall back on.

Hugo's conditional statement formatting is a little wonky for the unfamiliar, but it was pretty simple once I got the syntax down:

{{ if .Params.description}}{{.Params.description}}{{else}}{{.Site.Params.Description}}
Enter fullscreen mode Exit fullscreen mode

If there's a description in an individual page's front matter, then that'll be used for the meta description. If not, it'll fall back to the site's description which I've got plugged into the config.toml.

I've also added a description field to each of my archetypes so any page I create will have that in the front matter.

I've added this to the main pages.

For URL canonization, I simply added

<link rel="canonical" href="{{.Permalink}}">
Enter fullscreen mode Exit fullscreen mode

to the head template for every page.

Hugo has some interesting content-management information regarding links, URLS and Canonicalization available in their docs here, but I found that the simple Permalink in each of my pages' head was sufficient for my purposes.

Thanks for reading! This article was originally posted on my blog, and I hope you'll check it out: https://www.eamonncottrell.com/

Top comments (4)

Collapse
 
preciouschicken profile image
Precious Chicken

Ha! Great minds. I had exactly this same issue back at the start of 2021 and solved it in a very similar way (though I also changed my hugo tags to html keyword when I was at).

Nice blog btw, lovely looking family.

Collapse
 
sieis profile image
Eamonn Cottrell

Ah! Brilliant! And thanks!

Collapse
 
preciouschicken profile image
Precious Chicken

NB - Just noticed the "Originally published at eamonncottrell.com" link at the top is broken too, purely fyi.

Collapse
 
sieis profile image
Eamonn Cottrell

Crikey! Thanks for the catch. At some point in there I changed the slug setup too and failed to update it here. Thanks again!