Implement Meta Desciption, Open Graph and Twitter Card For Hugo

baseof.html

Edit layouts/_default/baseof.html. Look for the head to insert the template code within.

...<head>  ...  {{ partial "site-meta.html" . }}  {{ partial "site-opengraph.html" . }}  {{ partial "site-twittercard.html" . }}</head>...

Meta description

The template will retrieve description in the following priority for Content Page.

Page description
Page summary (generated from content)
Site description

Main Page will use description.

Edit layout/partials/site-meta.html.

<meta property="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />

Open Graph

Edit layout/partials/site-opengraph.html to implement Open Graph markup.

The template will retrieve in the following priority.

Page image: lua.image.url.
Site image: params.image.url.

<meta property="og:title" content="{{ .Title }}" />
<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
<meta property="og:url" content="{{ .Permalink }}" />
<meta property="og:image" content="{{ with .Param "lua.image" }}{{ .url | absURL }}{{ else }}{{ with .Site.Params.image }}{{ .url | absURL }}{{ end }}{{ end }}" />
{{ with .Site.Language }}<meta property="og:locale" content="{{ .Lang }}" />{{ end }}
{{ with .Site.Params.facebook.appid }}<meta property="fb:app_id" content="{{ . }}" />{{ end }}

Hugo provide an internal opengraph implementation which you could use.

{{ template "_internal/opengraph.html" . }}

Twitter Card

Edit layout/partials/site-twitter.html to implement Twitter Card.

Twiter Card's summary_large_image require minimum image width of 300px.

Main Page will use site's params.image if available, else site's params.logo shall be used.
Content Page will use page's lua.image.url if available, else site's params.logo shall be used.

<meta name="twitter:title" content="{{ .Title }}"/>
<meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end -}}"/>
{{ if .IsHome -}}
  {{ if ge .Site.Params.image.width 300 -}}
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="{{ .Site.Params.image.url | absURL }}"/>
  {{- else -}}
<meta name="twitter:card" content="summary"/>
<meta name="twitter:image" content="{{ with .Site.Params.image }}{{ .url | absURL }}{{ else }}{{ with .Site.Params.logo }}{{ .url | absURL }}{{ end }}{{ end }}" />
  {{- end }}
{{- else -}}
  {{ if ge (.Param "lua.image.width") 300 -}}
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="{{ .Param "lua.image.url" | absURL }}"/>
  {{- else -}}
<meta name="twitter:card" content="summary"/>
<meta name="twitter:image" content="{{ with .Param "lua.image" }}{{ .url | absURL }}{{ else }}{{ with .Site.Params.logo }}{{ .url | absURL }}{{ end }}{{ end }}" />
  {{- end }}
{{- end }}
{{ with .Site.Params.twitter -}}
<meta name="twitter:site" content="@{{ .username }}"/>
{{- end }}

config.toml

Edit config.toml to enable the following site configuration.

baseURL = "https://code.luasoftware.com/"
title = "Lua Software Code"
...
defaultContentLanguage = "en"

[params]
  description = "Tutorials and snippets for programming languages, frameworks, tools, etc."
  images = ["img/cover.png"]

  [params.facebook]
    appid = "xxx"

  [params.twitter]
    username = "xxx"

  [params.logo]
    url = "/img/logo.png"
    width = 127
    height = 40

  [params.image]
    url = "/img/cover.png"
    width = 800
    height = 600

Page markup

---
title: "Implement Meta Desciption, Open Graph and Twitter Card For Hugo"
description: "Hugo template code with sample markup."
...
lua:
  image:
    url: "/img/hugo/markup.jpg"
    width: 800
    height: 600
---
...

Generated Markup

Meta description

<meta property="description" content="Hugo template code with sample markup." />

Open Graph

You can validate Open Graph markup using Facebook Debugger.

<meta property="og:description" content="Hugo template code with sample markup." /><meta property="og:type" content="article" /><meta property="og:url" content="https://code.luasoftware.com/tutorials/hugo/meta-desciption-open-graph-twitter-card-for-hugo/" /><meta property="og:image" content="https://code.luasoftware.com/img/cover.png" /><meta property="og:locale" content="en" /><meta property="fb:app_id" content="xxx" />

Twitter Card

You can use Twitter Card validator to validate your Twitter Card markup.

<meta name="twitter:title" content="Implement Meta Desciption, Open Graph and Twitter Card For Hugo"/><meta name="twitter:description" content="Hugo template code with sample markup."/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://code.luasoftware.com/img/hugo/markup.png" /><meta name="twitter:site" content="@xxx"/>

Schema Markup

You can refer to Schema Markup For Hugo to implement schema.org markup as well.