February 18, 2020

498 words 3 mins read

Adjusting Hugo Internal Twitter Card Template

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.

comments powered by Disqus