Perfect SEO Meta Tags with Hugo

Perfect SEO Meta Tags with Hugo

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 }}" />
<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.