Hugo Tutorial Series 1: Meta Tags for SEO

2024-08-24T13:41:35+08:00 | 2分钟阅读 | 更新于 2024-08-28T13:02:00+08:00

g1eny0ung

Hugo Tutorial Series 1: Meta Tags for SEO

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="{{ .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.

上一页 Hugo Theme Dream: Post Page Features

下一页去香港办卡