Adjusting Hugo Internal Twitter Card Template

Hugo provides many functions and templates, which is very nice. But sometimes your site configuration might not be compatible with the Hugo standard / assumptions. This is my case recently, Hugo internal template for twitter cards has produced wrong URL. This is a short documentation for what I’ve done to make it work.

For my site, I use a headless images folder inside content. This images path didn’t show in the rendered pages. This may be a specific issue of the theme I currently using.

Below is the current code for twitter_cards.html as provided at Hugo Codebase.

{{- with $.Params.images -}}
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
{{ else -}}
    {{- $images := $.Resources.ByType "image" -}}
    {{- $featured := $images.GetMatch "*feature*" -}}
    {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
    {{- with $featured -}}
        <meta name="twitter:card" content="summary_large_image"/>
        <meta name="twitter:image" content="{{ $featured.Permalink }}"/>
    {{- else -}}
        {{- with $.Site.Params.images -}}
            <meta name="twitter:card" content="summary_large_image"/>
            <meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
        {{ else -}}
            <meta name="twitter:card" content="summary"/>
        {{- end -}}
    {{- end -}}
{{- end }}

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

{{ with .Site.Social.twitter -}}
    <meta name="twitter:site" content="@{{ . }}"/>
{{ end -}}

{{ range .Site.Authors }}
    {{ with .twitter -}}
        <meta name="twitter:creator" content="@{{ . }}"/>
    {{ end -}}
{{ end -}}

Adjustment

I’ve added a new site param called imageFolder in config.toml.

[params]
  imagesFolder = 'images'

Then I did a minor adjustment to use that .Site.Params.imagesFolder as follows. Note the use of Scratch variable imgurl in the snippet.

{{- $var := newScratch -}}
{{- with $.Params.images -}}
  {{ $var.Set "imgurl" (index . 0) }} 
  {{- if $.Site.Params.imagesFolder -}}
     {{ $var.Set "imgurl" (print $.Site.Params.imagesFolder "/" (index . 0))}}
  {{- end -}}  
  
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:image" content="{{  $var.Get "imgurl" | absURL }}"/>
{{ else -}}
  {{- $images := $.Resources.ByType "image" -}}
  {{- $featured := $images.GetMatch "*feature*" -}}
  {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}

  {{- with $featured -}}
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:image" content="{{ $featured.Permalink }}"/>
  {{- else -}}
    {{- with $.Site.Params.images -}}
      <meta name="twitter:card" content="summary_large_image"/>
      <meta name="twitter:image" content="{{ index . 0 | absURL }}"/>
    {{ else -}}
      <meta name="twitter:card" content="summary"/>
    {{- end -}}
  {{- end -}}
{{- end }}

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

{{ with .Site.Social.twitter -}}
  <meta name="twitter:site" content="@{{ . }}"/>
{{ end -}}

{{ range .Site.Authors }}
  {{ with .twitter -}}
    <meta name="twitter:creator" content="@{{ . }}"/>
  {{ end -}}
{{ end -}}

Twitter Card Validator

Use the official Twitter Card Validator to check whether the metadata is correct. If there is a reloading issue, put an arbitrary query string at the end of the url, e.g. ?utm=unyilorwhatever.