Perfect SEO Meta Tags with Hugo | Skcript

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 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 }}" />
<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 }}" />
<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 }}
{{ 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 }}
<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>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" type="image/x-icon" sizes="16x16 32x32" href="/favicon.ico" />
<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" />
<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" />
<!-- 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.

Comments and Discussions Please enable JavaScript to view the comments.


This is a companion discussion topic for the original entry at https://www.skcript.com/svr/perfect-seo-meta-tags-with-hugo/

Very cool recap, thanks very much, very useful
Vincent

Do you need to execute tasks with percision and accuracy?

Grow and scale your organization easily by automating business crucial functions with Robotic Process Automation (RPA).