frontend
Perfect SEO Meta Tags with Hugo
Do you want to be found easily on web? Read this article to learn how to effectively do SEO in Hugo.
![Karthik Kamalakannan Karthik Kamalakannan](https://assets.production.skcript.com/cdn-cgi/image/width=64,quality=40/skcript/site-assets/images/people/karthik.jpg)
Karthik Kamalakannan / 05 September, 2019
![Perfect SEO Meta Tags with Hugo Perfect SEO Meta Tags with Hugo](https://assets.production.skcript.com/cdn-cgi/image/width=3840/skcript/site-assets/svrmedia/heroes/perfect-seo-meta-tags-with-hugo@1.5x.png)
All code used in this article can be found here: https://github.com/praveenjuge/hugo-SEO-meta-tags
I have been making web pages with Hugo for over a year now and I simply love the speed and usability of it. After making a website, I usually move on to SEO for the site, Hugo gives the final output as static HTML pages which is the best way to get easily indexed on google.
In this article, I will show you some examples of how to effectively do SEO in Hugo. Firstly,
config.toml
The config.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: "Praveen Juge"
github: "https://github.com/praveenjuge"
facebook: "https://facebook.com/praveenjuge"
og_image: "/images/og.png"
sitename: "Example Site Name"
twitter: "@praveenjuge"
[languages]
[languages.en]
languageName: "English"
languageCode: "en-us"
weight:1
[languages.ae]
languageName: "Arabic"
languageCode: "ae"
weight:2
The 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 }}" />
<link rel="canonical" href="{{ .Permalink }}" itemprop="url" />
<meta name="url" content="{{ .Permalink }}" />
<meta name="twitter:url" content="{{ .Permalink }}" />
<meta property="og:url" content="{{ .Permalink }}" />
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, these are all of the meta tags I use while developing a Hugo website. Hope you find it useful.
Last updated: January 23rd, 2024 at 1:50:36 PM GMT+0