I noticed time ago that when sharing my blog posts in social media, the post image was not featured. Finally I decided to look into it… little did I know what a rabbit hole I was getting into!

To make a long story short, and to keep it not too technical, my blog is written using several different technologies, the main one being Hugo.

Hugo is a Static Blog and Site Generator written in Go language. Go is a language founded at Google and it’s a static typed language. Hugo is the fastest and doesn’t have any dependencies like Octopress or Hexo. I’m very happy with it and the whole set up I’ve had for years (Git version control in GitHub, Netlify deployment, Cloudinary CDN, etc).

When I started researching why when sharing my blog posts in social media, the post image was not featured, ALL search results I found pointed in the direction of the inner working of Hugo. The more I read, the more I had to dig deep into its inner workings, dealing with Internal Partial Templates and having to review and re-code and patch many elements of its internal structure. Go ahead, I dare you to research the issue online. It’s crazy. Most posts and tutorials about it have you deal with layout base, partial, meta, open graph, card, and config.

They suggested adding and modifying code like this for Open Graph:

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

Or this for Twitter Card:

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

Or these metatags for the HTML header:

<meta name="title" content="Page Title for Search Engines Results | Website Name" />
<meta name="description" content="Page Description for Search Engine Results" />
<meta property="og:title" content="Page Title for Facebook" />
<meta property="og:description" content="Page Description for Facebook" />
<meta property="og:image" content="https://www.sitename.com/image-for-facebook.png" />
<meta property="twitter:card" content="summary" />
<meta property="twitter:description" content="Page Description for Twitter." />
<meta property="twitter:title" content="Page Title for Twitter" />
<meta property="twitter:image" content="https://www.sitename.com/image-for-twitter.png" />

As I was coding and re-coding and patching… it all struck me as bizarre and overkill. There had to be a better way. Most people using Hugo for blogs do not have the technical knowledge to do all this, yet do not have the same problem with their images when sharing a post, so it had to be something else.

Sure enough, as I paid more attention to other people’s structures and codes, and compared it with mine, I did notice something.

Front matter allows you to keep metadata attached to an instance of a content type—i.e., embedded inside a content file—and is one of the many features that gives Hugo its strength. Hugo allows you to add front matter in yaml, toml, or json to your content files.

I noticed that in my front matter, in line 7, after title and tags and before comments, I had image, while everybody else had images. One letter. One typo from when I set up the whole structure. Could that be it?

Sure enough, I went ahead, and tested it in FaceBook OpenGraph Debugger, and Twitter Card Validator.

Hours “invested” (never “wasted”). One typo. I hate code. I love code.