Adding Social Meta Tags into <head> for Hugo

Adding social media tags to the <head> section of your website helps Facebook and Twitter know how to show your page when someone shares it. For example, what image to use and what the title should be. Hugo themes will often come with these tags added already - but if they don’t we wanted to look at how you can add them.

Facebook uses Open Graph tags and Twitter uses Cards.

config.toml

The first step is we are going to add our Twitter handle into our config file. This will enable the Twitter section in the next step.

1
2
[params]
    twitter = "makewithhugo"

Your theme’s head element

The second step is to add this code into your theme - where ever the <head> element is (it changes on each theme).

Note: This uses the featured_image data from each post, if you have a different way of specifying the image, you’ll want to change this to what you already use.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
{{ if isset .Site.Params "twitter" }}
  <meta name="twitter:card" content="{{ if .Params.featured_image }}summary_large_image{{else}}summary{{end}}">
  <meta name="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} &middot; {{ .Site.Title }}{{ end }}">
  <meta name="twitter:description" content="{{ if .IsHome }}{{ .Description }}{{ else }}{{ htmlEscape .Summary }}{{ end }}">
  <meta name="twitter:site" content="{{ .Site.Params.twitter }}">
  <meta name="twitter:creator" content="{{ .Site.Params.twitter }}">
  {{ if .Params.featured_image }}<meta name="twitter:image" content="{{ .Params.featured_image }}">{{ end }}
{{ end }}

<meta property="og:locale" content="en_GB">
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} &middot; {{ .Site.Title }}{{ end }}">
<meta property="og:description" content="{{ if .IsHome }}{{ .Description }}{{ else }}{{ htmlEscape .Summary }}{{ end }}">
<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:site_name" content="{{ .Site.Title }}">
{{ if .Params.featured_image }}
  <meta property="og:image" content="{{ .Params.featured_image }}">
  <meta property="og:image:secure_url" content="{{ .Params.featured_image }}">
{{- end }}
{{ range .Params.categories }}<meta property="article:section" content="{{ . }}">{{ end }}
{{ if isset .Params "date" }}<meta property="article:published_time" content="{{ (time .Date).Format "2006-01-02T15:04:05Z" }}">{{ end }}

Output

If everything’s setup correctly, it should end up looking like this - for example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Add Social Media Meta Tags with Hugo">
<meta name="twitter:description" content="Adding social media tags to the...">
<meta name="twitter:site" content="eddturtle">
<meta name="twitter:creator" content="eddturtle">

<meta property="og:locale" content="en_GB">
<meta property="og:type" content="article">
<meta property="og:title" content="Add Social Media Meta Tags to with Hugo">
<meta property="og:description" content="Adding social media tags to the...">
<meta property="og:url" content="https://makewithhugo.com/social-meta-tags/">
<meta property="og:site_name" content="Make with Hugo">
<meta property="article:section" content="Tutorials">
<meta property="article:published_time" content="2021-01-01T09:00:00Z">

Test

Once you’ve made these changes, you can check them to make sure they are correct with the links below.

Facebook Debugger Twitter Cards Validator

That should be all there is to it - let us know how you got on in the comments below.


Site illustrations (of Hugo the rabbit) drawn by Carina Roberts.