POST
SEO template changes for Hugo Static Web Site Generator
Author: Alan Richardson
I was working on my main consultancy site and amending it for SEO and this required making some changes to HUGO templates.
Gone are my keywords
My keyword code has now been removed:
{{if isset .Params "keywords"}}
<meta name="keywords"
content="{{ delimit .Keywords ", " }},
digital marketing, content marketing, online tactics, seo tips" />
{{else}}
{{if isset .Params "tags"}}
<meta name="keywords" content="{{ delimit .Params.Tags ", " }},
digital marketing, content marketing, online tactics, seo tips" />
{{else}}
<meta name="keywords" content="digital marketing,
content marketing, online tactics, seo tips" />
{{end}}
{{end}}
SEO Basics
My initial SEO focus was on getting the ‘basics’ right.
- title
- description
- h1
The keywords meta tag no longer really counts.
Title
My Basic Title Code in my ‘head’ template was initially:
<title>{{ .Title | default .Site.Title }}</title>
This allows me to set a title
variable in each page meta data, and if not present defaults to the title
variable in the main site config.toml
The title
of most pages and posts is often used as the h1
by default for most web systems and templates.
Google recommends that the title of a page is also branded i.e. has your site name in it somewhere.
But if we are using the title
as an h1
then that works for Google, but not the user.
I amended it to be:
<title>{{ .Title | default .Site.Title }}
{{ if not .IsHome }} - {{ .Site.Params.Shorttitle }}{{ end }}
</title>
The above means:
- use the page title
- if no page title is set then use the Site .title variable set in
config.toml
- if this page is not the home page then also append the param called
shorttitle
in theconfig.toml
This provides me with a default if I forget to create a title for the page, and brands the title without having to have the branding in my h1
Description
My Basic description code in my ‘head’ template was:
<meta name="description"
content="{{.Description | default .Site.Params.Description}}"/>
If no description is provided in the page meta data then the description set in the config.toml
file is used.
I moved it over to:
<meta name="description" content="{{ with .Description }}
{{ . }}
{{ else }}
{{if .IsPage}}{{ .Summary }}
{{ else }}{{ with .Site.Params.description }}
{{ . }}
{{ end }}{{ end }}{{ end }}">
This:
- uses the local page description
- if there is not one then use the summary for the page (auto generated from the text)
- otherwise use the site global description
The above code creates a unique description which may not be SEO optimised but is better than a standard default throughout the entire site.
H1
I then wanted to have the option of creating a separate H1
from the title
meta tag.
It is arguable if this helps SEO or not, but the title
tag is the ‘sales copy` heading that we want people to click through on the search engine.
The h1
tag is the ’title’ of the article people see when they visit the page.
I view this more as book title
and chapter title
. They might well be the same, but I want the option of making them different.
I have seen people argue over this online - should they be different, should they not? But the SEO guidance on Google leads me to believe that they can be different and it will not impact the rankings.
Clearly the title can’t be click bait and must accurately reflect the content, but I don’t think they need to be the same.
If I discover that they do need to be the same, then a quick template change will bring this back in line.
<h1 id="title" class="text-center">
{{if isset .Params "h1"}}{{ .Params.H1 }}{{else}}{{ .Title }}{{end}}
</h1>
- if there is an
h1
param in page meta data then use that - if not then use the
title
param from the meta data
Robots meta tag
I also wanted to exclude taxonomy index pages from the site indexing, so I added a robots meta tag
{{ if and (eq .Kind "taxonomy") (eq .Type "categories")}}
<meta name="robots" content="noindex, follow"/>
{{ else }}
<meta name="robots" content="index, follow"/>
{{ end }}
This says that if the page is a Taxonomy Index page then tell the robot not to index it, but do follow the links there to make sure that the pages are indexed.
And if it is not an index page then so “index, follow” (index the page, and follow the links)
Canonical
I also wanted to take control of the canonical tags, but only for pages that are actually content - not indexes:
{{ if or (eq .Kind "home") (eq .Kind "page")}}
{{ if isset .Params "canonical" }}
<link rel="canonical" href="{{ .Params.Canonical}}" />
{{ else }}
<link rel="canonical" href="{{ .Permalink}}" />
{{ end }}
{{ end }}
This basically says:
- if this is not an index page then
- if there is a
canonical
meta data defined then use that - otherwise use the permalink for the page
- if there is a
The page by default is the canonical version of the content, but I have the ability to redirect the search engine to another place on the internet if this is duplicate content, e.g. an archive of some other post.