How to modify particular OpenGraph (OG) tags?

support
1

I feel like I have almost the same question as How to set open graph image for a specific page?, but I don’t see the proper answer there.

I’ve just created a new blog-like website with Hugo and used Tailwind theme. The theme has layouts/partials/head.html which contains bunch of code, including {{ template "_internal/opengraph.html" . }}. I don’t have my own templates, heads, partials or what’s not, I would like to use theme as much as possible.

And I want to do two things:

  • First, modify og:title that it always matches HTML tag title (now it only has post title while I’d like to have Post Title | Blog title (what’s already today in HTML tag title)
  • Second, improve og:image that it takes post’s image automatically. Today it uses some page images which doesn’t seem to work for me.

What I do not want is to copy the full source code of neither theme’s layouts/partials/head.html nor _internal/opengraph.html. Is there a way to do it?

Alternatively, at least, is there a way to “override” _internal/opengraph.html alone (I’ll still need to copy-paste the full code and modify two lines I need, right?)?

2

In your project, add layouts/partials/opengraph.html

This will override the default template.

Copy-paste Hugo’s internal template into that file and make your changes.

Call your customized template with {{ partial opengraph.html . }} in head.html

3

So I read it as “you still need to copy-paste the whole head.html from the theme”, correct? (and the whole source code of Hugo’s opengraph.html as well)

4

Yes, you’ll need to overwrite head.html in layouts/partials to add the custom partial call.