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 / 05 September, 2019

05 September, 2019

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

<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