Hugo Fix for Facebook OpenGraph og:image not pulling images

tips & tricks
1

Way back in 2012 it was reported that Facebook has trouble pulling images from relative URLs and over HTTPS

I can confirm that in 2017 (5 years later) FB still has these issues. The images don’t show up always.

So here are the steps I took to fix this annoying issue with Hugo, following the discussion I had with @rdwatters at this thread [SOLVED] Hugo Not Rendering CSS but Hugo Server Is - #8 by rdwatters - support - HUGO

First in config.toml use the following:

baseURL = "//example.com" [params] og_image = "/some-image.jpg"

Then in a post’s frontmater set a parameter for the OpenGraph image

og_image = "/images/1.jpg"

And in the HEAD partial put the following:

            {{ if .Params.og_image }}
      `<meta property="og:image" content="http:{{ .Params.og_image | absURL }}"/>`
      `<meta property="og:image:secure_url" content="https:{{ .Params.og_image | absURL }}"/>`
      {{ else }}
      `<meta property="og:image" content="http:{{ .Site.Params.og_image | absURL }}"/>`
      `<meta property="og:image:secure_url" content="https:{{ .Site.Params.og_image | absURL }}"/>`
      {{ end }}

And that’s it.

EDIT
If your site is served under HTTPS and you want to put this protocol in your baseURL then you will need to use relURL in the og:image meta tag and enter the http version of your domain manually like so:

{{ if .Params.og_image }}
<meta property="og:image" content="http://example.com{{ .Params.og_image | relURL }}"/>
<meta property="og:image:secure_url" content="{{ .Params.og_image | absURL }}"/>
{{ else }}
<meta property="og:image" content="http://example.com{{ .Site.Params.og_image | relURL }}"/>
<meta property="og:image:secure_url" content="{{ .Site.Params.og_image | absURL }}"/>
{{ end }}

1 Like