How to set open graph image for a specific page?


#1

How to set open graph image for a specific page?


#2

I call a partial from the appropriate template for the specific page.

This code is old though, and in need of refactoring to work with the latest hugo.


#3

Here’s what I use currently.

<!-- open graph -->
          <meta property="og:type" content="website" />
          <meta property="og:title" content="{{ if ne .URL "/" }}{{ .Title }} &middot; {{ end }}{{ .Site.Title }}"/>
          <meta property="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}"/>
          <meta property="og:site_name" content="{{ .Site.Title }}"/>
          <meta property="og:url" content="{{ .Permalink }}"/>
          <meta property="og:locale" content="en">
            {{ 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 }}
          <meta property="og:type" content="website"/>

I have an og_image parameter in the config.toml for site wide use.
And in content files I use the same parameter to declare an Open Graph image for each piece of content.

Also take a look at this thread for making image previews work in FB.


#4

Fantastic, thank you both. Onedrawingperday, thank you for sharing what you use, that’s great