SEO Meta Tags With Hugo
In this article, the proper way explained on how to add meta tags to your Hugo website and effectively improve SEO in Hugo.
I have been making static web sites with Hugo for some time now and I really like the speed, reliability and usability of it. After making a website, I usually move on to SEO for the site immediately after the first deployment is made. Hugo gives the final output as static HTML pages which is the best way to get easily indexed on Google and other search engines.
This post is taken from the original source listed at skript.com and posted by Karthik Kamalakannan. I decided to add it here since it is a proper method to add meta tags to the Hugo website.
First of all, we need to add relevant info to the hugo.toml file.
hugo.toml
The hugo.toml file is placed at the root of the folder and we can add some useful meta-information about the site here. For example, all our social media information, all languages of the site, etc.
baseURL: "https://www.example.org/"
title: "Example Site"
languageCode: "en-us"
DefaultContentLanguage: "en"
paginate:12
enableEmoji:true
enableGitInfo:true
enableRobotsTXT:true
canonifyURLs:true
[params]
author: "Name Surname"
github: "https://github.com/username"
facebook: "https://facebook.com/username"
og_image: "/images/sitename.png"
sitename: "Example Site Name"
twitter: "@username"
[languages]
[languages.en]
languageName: "English"
languageCode: "en-us"
weight:1
[languages.ru]
languageName: "Russian"
languageCode: "ru"
weight:2The above file is referenced in our HTML tags for meta-information on the site.
baseof.html
Next comes the base file in which we build the skeleton of the website, here is a default baseof.html file with best SEO practices.
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" lang="{{ .Language }}">
<head itemscope itemtype="{{ .Site.BaseURL }}">
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- All the meta tags below will come under this meta partial -->
{{ partial "meta" . }} {{ partial "links" . }}
</head>
<body>
{{ partial "header" . }}
<main id="main">{{ block "main" . }} {{ end }}</main>
{{ partial "footer" . }} {{ partial "js" . }}
</body>
</html>Use the following meta tags in the meta partial.
Title Tags
<title itemprop="name">{{ .Title }} | {{ .Site.Title }}</title>
<meta property="og:title" content="{{ .Title }} | {{ .Site.Title }}" />
<meta name="twitter:title" content="{{ .Title }} | {{ .Site.Title }}" />
<meta itemprop="name" content="{{ .Title }} | {{ .Site.Title }}" />
<meta name="application-name" content="{{ .Title }} | {{ .Site.Title }}" />
<meta property="og:site_name" content="{{ .Site.Params.sitename }}" />Description Tags
<meta name="description" content="{{ .Params.description }}" />
<meta itemprop="description" content="{{ .Params.description }}" />
<meta property="og:description" content="{{ .Params.description }}" />
<meta name="twitter:description" content="{{ .Params.description }}" />Link Tags
<base href="{{ .Permalink }}" />
<meta name="url" content="{{ .Permalink }}" />
<meta name="twitter:url" content="{{ .Permalink }}" />
<meta property="og:url" content="{{ .Permalink }}" />For proper use of the canonical tag in Hugo, I recommend to specify canonical parameter on the page front matter and add the following code to the layout:
{{ with .Params.canonical }}
<link rel="canonical" href="{{ . }}" itemprop="url" />
{{ else }}
<link rel="canonical" href="{{ .Permalink }}" itemprop="url" />
{{ end }}Language Tags
<meta property="og:locale" content="{{ .Language.Lang }}" />
<meta name="language" content="{{ .Language.LanguageName }}" />
{{ range .AllTranslations }}
<link
rel="alternate"
hreflang="{{ .Language.Lang }}"
href="{{ .Permalink }}"
title="{{ .Language.LanguageName }}"
/>
{{ end }}Image Tags
{{ with .Params.image }}
<meta itemprop="image" content="{{ . | absURL }}" />
<meta property="og:image" content="{{ . | absURL }}" />
<meta name="twitter:image" content="{{ . | absURL }}" />
<meta name="twitter:image:src" content="{{ . | absURL }}" />
{{ else }}
<meta itemprop="image" content="{{ .Site.Params.ogimage | absURL }}" />
<meta property="og:image" content="{{ .Site.Params.ogimage | absURL }}" />
<meta name="twitter:image" content="{{ .Site.Params.ogimage | absURL }}" />
<meta name="twitter:image:src" content="{{ .Site.Params.ogimage | absURL }}" />
{{ end }}Date Tags
<meta property="og:updated_time" content={{ .Lastmod.Format
"2006-01-02T15:04:05Z0700" | safeHTML }} /> Sitemap & RSS Feed Tags
<link
rel="sitemap"
type="application/xml"
title="Sitemap"
href="{{ .Site.BaseURL }}sitemap.xml"
/>
{{ with .OutputFormats.Get "RSS" }}
<link
href="{{ .Permalink }}"
rel="alternate"
type="application/rss+xml"
title="{{ $.Site.Title }}"
/>
<link
href="{{ .Permalink }}"
rel="feed"
type="application/rss+xml"
title="{{ $.Site.Title }}"
/>
{{ end }}Tags for Article Pages
These meta tags are specific for article or blog pages. Example.org/blog/example-blog/.
<!-- To make sure this renders only in the article page, we check the section -->
{{ if eq .Section "blog" }}
<!-- Pagination meta tags for list pages only -->
{{ $paginator := .Paginate (where .Pages "Section" "blog") }} {{ if $paginator
}}
<link rel="first" href="{{ $paginator.First.URL }}" />
<link rel="last" href="{{ $paginator.Last.URL }}" />
{{ if $paginator.HasPrev }}
<link rel="prev" href="{{ $paginator.Prev.URL }}" />
{{end }} {{ if $paginator.HasNext }}
<link rel="next" href="{{ $paginator.Next.URL }}" />
{{end }} {{end }}
<meta property="og:type" content="article" />
<meta property="article:publisher" content="{{ .Site.Params.facebook }}" />
<meta property="og:article:published_time" content={{ .Date.Format
"2006-01-02T15:04:05Z0700" | safeHTML }} /> <meta
property="article:published_time" content={{ .Date.Format
"2006-01-02T15:04:05Z0700" | safeHTML }} /> {{ with.Params.author }}
<meta property="og:article:author" content="{{humanize . }}" />
<meta property="article:author" content="{{humanize . }}" />
<meta name="author" content="{{humanize . }}" />
{{ end }} {{ with.Params.category }}
<meta name="news_keywords" content="{{ index . 0 }}" />
<meta property="article:section" content="{{ index . 0 }}" />
{{ end }}
<script defer type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"headline": {{ .Title }},
"author": {
"@type": "Person",
"name": "{{ .Site.Params.github }}"
},
"datePublished": "{{ .Date.Format "2006-01-02" }}",
"description": {{ .Description }},
"wordCount": {{ .WordCount }},
"mainEntityOfPage": "True",
"dateModified": "{{ .Lastmod.Format "2006-01-02" }}",
"image": {
"@type": "imageObject",
"url": "{{ with .Params.image }}{{ .Permalink }}{{ end }}"
},
"publisher": {
"@type": "Organization",
"name": "{{ .Site.Title }}",
"logo": {
"@type": "imageObject",
"url": "https://www.example.com/images/brand/favicon.png"
}
}
}
</script>
{{ end }}Meta Tags for Website Pages
For pages such as /contact, /about, etc.. Don’t include these tags on an article or blog pages.
<meta property="og:type" content="website" />
<meta name="author" content="{{ .Site.Params.author }}" />
<script defer type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "{{ .Permalink }}",
"sameAs": ["{{ .Site.Params.facebook }}", "{{ .Site.Params.github }}"],
"name": "{{ .Title }}",
"logo": "https://www.example.com/images/brand/favicon.png"
}
</script>Favicon Tags
<link rel="shortcut icon" href="/favicon.png" />
<link rel="icon" type="image/x-icon" sizes="16x16 32x32" href="/favicon.png" />
<link
rel="apple-touch-icon"
sizes="152x152"
href="/favicons/favicon-152-precomposed.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="/favicons/favicon-144-precomposed.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="/favicons/favicon-120-precomposed.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="/favicons/favicon-114-precomposed.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicons/favicon-180-precomposed.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="/favicons/favicon-72-precomposed.png"
/>
<link rel="apple-touch-icon" href="/favicons/favicon-57.png" />
<link rel="icon" href="/favicons/favicon-32.png" sizes="32x32" />
<link rel="icon" sizes="192x192" href="/favicons/favicon-192.png" />Search Engine Crawler Tags
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />Specific Social Media Tags
<meta name="twitter:site" content="{{ .Site.Params.twitter }}" />
<meta name="twitter:creator" content="{{ .Site.Params.twitter }}" />
<meta property="fb:app_id" content="538089519640705" />
<meta property="fb:admins" content="100000686899395" />Other Tags
<!-- Manifest File -->
<link rel="manifest" href="{{ .Site.BaseURL }}manifest.json" />
<!-- Theme Color -->
<meta name="theme-color" content="#141414" />
<meta name="msapplication-TileColor" content="#141414" />
<meta name="keywords" content="" />
<meta name="imagemode" content="force" />
<meta name="coverage" content="Worldwide" />
<meta name="distribution" content="Global" />
<meta name="HandheldFriendly" content="True" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="apple-mobile-web-app-title" content="{{ .Site.Params.sitename }}" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="apple-touch-fullscreen" content="yes" />So that’s it, by using this method, it is possible to add (properly) any meta tags while developing a Hugo static website.
Receive my updates
Follow me via email, RSS, Twitter, and other options.
