This article will show you how to add SEO related meta tags to your Hugo site.
This is an experimental article in my Hugo tutorial series. I will show you how to add SEO related meta tags to your Hugo site, with a real-world example.
Before starting
For anybody unfamiliar with SEO, it stands for Search Engine Optimization. It is the practice of increasing the quantity and quality of traffic to your website through organic search engine results.
For more information, I recommend you to read the SEO Starter Guide from Google.
How Hugo can help us with SEO
Hugo provides several embedded templates for generating meta tags, you can find them in
Embedded templates
. Some of them are
useful for SEO, such as opengraph.html.
We will use them in this article.
Create a new partial template
First, we can create a head.html in the layouts/partials directory and include opengraph.html and twitter_cards.html in it.
{{ template "_internal/opengraph.html" . }}
{{ template "_internal/twitter_cards.html" . }}
The Open Graph protocol enables any web page to become a rich object in a social graph. For more information, you can visit the Open Graph protocol .
And the Twitter Cards enable you to attach media experiences to Tweets that link to your content. For more information, you can visit the Twitter Cards .
Besides, we can also add hugo.Generator to the head.html, to indicate that this site is generated by Hugo.
{{ hugo.Generator }}
Then, we can include this partial template in the head section of our baseof.html template.
<!DOCTYPE html>
<html>
<head>
{{ partial "head.html" . }}
</head>
<body>
</body>
</html>
Ok, now we have added basic SEO related meta tags to our Hugo site.
Next, we can add some custom meta tags.
Refer to Standard metadata names
,
some of the most common meta tags are author, description, keywords, etc:
{{ if eq .Type "posts" }}
<!-- Page Author & Description -->
<meta name="author" content="{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ site.Params.author }}{{ end }}" />
<meta name="description" content="{{ (or .Description .Summary) | plainify }}" />
<!-- Keywords -->
{{- $keywords := slice }}
{{- with .Keywords }}
{{- $keywords = . }}
{{- else }}
{{- range .GetTerms "tags" }}
{{- $keywords = $keywords | append .Title }}
{{- else }}
{{- range $taxonomy, $_ := site.Taxonomies }}
{{- range $.GetTerms $taxonomy }}
{{- $keywords = $keywords | append .Title }}
{{- end }}
{{- end }}
{{- end }}
{{- end }}
<meta name="keywords" content="{{ delimit $keywords `,` }}">
{{ else }}
<!-- Site Author & Description -->
<meta name="author" content="{{ site.Params.author }}" />
<meta name="description" content="{{ site.Params.description | plainify }}" />
{{ end }}
In the if block, we set the author and description meta tags for the post page,
and the keywords meta tag is calculated from the post’s keywords front matter
with fallbacks (code related to keywords is taken from here
).
Note Depending on your situation, you may need to judge other page types, like
{{ if eq .Type "articles" }}.
Then in the else block, we set the global author and description meta tags for fallbacks.
This requires you to set the author and description in the hugo.toml:
[params]
author = "Your Name"
description = "Your site description"
Real head.html example
You can view the full code in the head.html
,
it is part of templates of the theme I created and used. It also includes some other useful tags, like canonical etc.
Add structured data
Structured data is a standardized format for providing information about a page and classifying the page content. For more information, you can visit the Introduction to structured data markup in Google Search .
We can add structured data to our Hugo site by adding the internal schema.html template to single templates.
For example, you may have the below code in your single.html:
<article>
<header>
<h1>{{ .Title }}</h1>
</header>
{{ .Content }}
</article>
To add structured data, just include the schema.html template in the article tag
and mark the item* attributes with the corresponding schema.org types:
<article itemscope itemtype="http://schema.org/Article">
{{ template "_internal/schema.html" . }}
<header>
<h1 itemprop="headline">{{ .Title }}</h1>
</header>
{{ .Content }}
</article>
In this example, we assume that the content of the single.html is an article, so we use the http://schema.org/Article type.
And then we include the schema.html template to generate the microdata.
Besides, we also set the headline property for the article title.
Thanks to Hugo for the powerful embedded templates, we can easily add structured data to our site!
Real single.html example
You can view the full code in the single.html
and author.html
,
where author.html is used to generate the Person type for the author.
Conclusion
It is very easy to add SEO related meta tags to your Hugo site, thanks to the powerful embedded templates.
But it is not enough, to master SEO for your Hugo site, you need to learn more about SEO and keep updating your site.
I recommend you start with Embedded templates , read the source code of these templates, and then further explore the knowledge extended by these codes. By doing this, you will have a better understanding of Hugo & SEO.
