Hugo Fix for Facebook OpenGraph og:image not pulling images


#1

Way back in 2012 it was reported that Facebook has trouble pulling images from relative URLs and over HTTPS
http://stackoverflow.com/questions/8855361/fb-opengraph-ogimage-not-pulling-images-possibly-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 https://discuss.gohugo.io/t/solved-hugo-not-rendering-css-but-hugo-server-is/6464/8

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 }} > `` > `` > {{ else }} > `` > `` > {{ 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 }}


How to set open graph image for a specific page?
Display first image in post in link preview