Add OpenGraph image height & width (for Facebook pre-caching)

I’d like to propose adding the height and width to images in the Hugo OpenGraph internal template

Why this matters
If we add this to the internal template then any page using it will be able to show an image upon the first share. Right now the first person sharing it couldn’t show an image. I’m assuming that most of the times the first sharer is also the site so this should impact many shares from Hugo.

From Facebook

Facebook will generate a warning with the current implementation and considers this a best practice for OpenGraph and says:

When content is shared for the first time, the Facebook crawler will scrape and cache the metadata from the URL shared. The crawler has to see an image at least once before it can be rendered. This means that the first person who shares a piece of content won’t see a rendered image:

Example (untested) code:

  {{ with (imageConfig {{ . }}) }} 
    <meta property="og:image:width" content="{{ .Width }}"/>
    <meta property="og:image:height" content="{{ .Height }}"/>
  {{ end }}

What do y’all think of this addition?

1 Like