How to set open graph image for a specific page?

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

2 Likes
4

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

1 Like
5

So, I have a question. Really new to hugo. Could you maybe explain a bit better how to do it? I mean. I want to use a og: image only for www.site.com/pages How would you do it???

By your example I would do.

<meta property="og:image" content="http://site.com{{ .Params.og_image | relURL }} " />

And in the reURL I should apply the www.site.com/pages inside my yaml file configuration. Am I correct?? @alexandros

6

Or maybe I should put in the pages I want to use the specific image an og: image tag inside the table like below:

---
Description: "Some Description"
graysection: false
title: Some Title
skipbodyheader: true
image: relative_path_of_the_folder_structure
---

And in the header.html use something like this:

    <meta
      property="og:image"
      content="{{ if .Params.image }}{{.Site.BaseURL}}/carrers/{{.Params.image}}
      {{ else }}
        {{ .Params.ogimage }}
      {{
        end
      }}"
    />
7

Have a look at the head.html partial I use pretty much in every Hugo project I manage.

It can be customized to suit your needs but you should get the general idea.

8

Not sure if useful given the awesome answers you’ve gotten, but when I added Twitter metadata to my website, I found these blog posts very useful including for the difference between home page and other pages.

9

Worked like charm!

10

I understand the majority of this conversation but I am still having trouble with what I am putting in the partials/head.html to actually show up in my generated posts.

I am new to Hugo so I am sure it is just me not quite hooking it up correctly. Am I supposed to have a certain file structure for each of the posts to properly pick up this head.html layout?