I have been having difficulty getting Twitter Cards to work for my posts featured images. The featured images appear for post url's on both Facebook and Linkedin, yet I can't get the twitter card to work.
I have tried reviewing the twitter card code in the academic header and also by following the Hugo documentation. I am unsure if its something that missing or overlooking? Any help or advice would be greatly appreciated.
I found this code in the academic header.html partial, yet I am still unsure as to why it is not working:
{{ $featured_image := (.Resources.ByType "image").GetMatch "*featured*" }}
{{ $og_image := "" }}
{{ $twitter_card := "summary_large_image" }}
{{ if $featured_image }}
{{ $og_image = $featured_image.Permalink }}
{{ else if .Params.header.image }}
{{ $og_image = printf "img/%s" .Params.header.image | absURL }}
{{ else if .Site.Params.sharing_image }}
{{ $og_image = printf "img/%s" .Site.Params.sharing_image | absURL }}
{{ else if .Site.Params.avatar }}
{{ $og_image = (printf "img/%s" site.Params.avatar) | absURL }}
{{ $twitter_card = "summary" }}
{{ else }}
{{ $og_image = "img/icon-192.png" | absURL }}
{{ $twitter_card = "summary" }}
{{ end }}
<meta property="twitter:card" content="{{ $twitter_card }}">
{{ with .Site.Params.twitter }}
<meta property="twitter:site" content="@{{ . }}">
<meta property="twitter:creator" content="@{{ . }}">
{{ end }}
<meta property="og:site_name" content="{{ .Site.Title }}">
<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:title" content="{{ if not .IsHome }}{{ .Title }} | {{ end }}{{ .Site.Title }}">
<meta property="og:description" content="{{ $desc }}">
{{- with $og_image }}<meta property="og:image" content="{{ . }}">{{end}}
<meta property="og:locale" content="{{ .Site.LanguageCode | default "en-us" }}">
{{ if .IsPage }}
{{ if not .PublishDate.IsZero }}<meta property="article:published_time" content="{{ .PublishDate.Format "2006-01-02T15:04:05-07:00" | safeHTML }}">
{{ else if not .Date.IsZero }}<meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}">{{ end }}
{{ if not .Lastmod.IsZero }}<meta property="article:modified_time" content="{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}">{{ end }}
{{ else }}
{{ if not .Date.IsZero }}<meta property="og:updated_time" content="{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}">{{ end }}
{{ end }}
The twitter card validator log says the following:
INFO: Page fetched successfully
INFO: 18 metatags were found
INFO: twitter:card = summary_large_image tag found
INFO: Card loaded successfully
Yet, no image appears. Any help or tips on resolving this would be greatly appreciated?
As it happens the problem I experienced was due to an incorrect baseURL in the config.toml file in Hugo. Once, I corrected this error, the Twitter summary card began to appear as normal.