How to set open graph image for a specific page?

support
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.

2 Likes