Today I Learned

Adding SEO to Hugo pages

Posted on Jan 13, 2022

Today I learned some things about Search Engine optimization (SEO) in combination with my hugo blog.

Content adjustments

Enable Robots txt and sitemap

To adjust the generated robots.txt in hugo it is possible to create or change the CORRESPONDING template file. With the them I’m using this is located at themes/archie/layouts/_default/robots.txt.

User-agent: *
Disallow: /some-path/

{{ range where .Data.Pages "Params.robotsdisallow" true }}
Disallow: {{ .RelPermalink }}
{{ end }}

Sitemap: {{ "sitemap.xml" | absLangURL }}

(Found this here )

This will:

  • disallow certain path if needed
  • looks for pages with the frontmatter tag robotsdisallow and adds the page as an Disallow entry
  • adds the sitemap to the robots txt

Add meta description

The overview pages (all posts and tags) didn’t contain meta descriptions. This is a theme related problem and I’m sure other themes contain this information. I might be doing something stupid here, but I didn’t find another solution.

I edited the header partial at themes/archie/layouts/partials/header.html and changed the description based on the page .Kind. For that I added the following snippet to the <head> section.

{{ if eq .Kind "section" }}
<meta name="description" content="List of all posts in this blog">
{{ else if eq .Kind "taxonomy" }}
<meta name="description" content="List of all tags of all blog posts">
{{ else if eq .Kind "term" }}
<meta name="description" content="List of all posts containing the tag #{{ .Data.Term }}">
{{ end }}
  • Section : A collection of pages under the content root tree of hugo (in this blog all posts)
  • Taxonomy : A group of content (in my blog list of tags)
  • Term: One element of a group (in my blog one specific tag)

This solution feels a bit wrong, but I didn’t find another way of archiving this. I might revisit this problem later.

Victorhugo plugin

Victor Hugo

The last step for now was to add victorhugo as a SEO tool. Besides the awesome name, this hugo plugin only runs in local development mode and analyses a page for certain metrics as shown below.

Victorhugo Screenshot

This is achieved using the partial template wich is available on the linked github page. The flag {{ if .Site.IsServer }} makes sure this only gets executed when running in local hugo server mode. When exporting the static page, nothing of this plugin remains.

For now thats all I did in terms of SEO. I’m sure I’m not done yet, but I’ll leave it like this for now.