Opengraph image metadata in Hugo static site generator

Howto add opengraph metadata to hugo?

Page content

Opengraph image metadata is the meta property og:image. Basically, we want correctly generated tag <meta property="og:image" content="https://....jpg"> for each page in our hugo-based website.

Hugo logo and slogan

How OpenGraph metadata included

Search in your theme code for the

{{ template "_internal/opengraph.html" . }}

Probably it’s already including it. If it nowhere can be found - you can try to include yourself

  • Create or copy from your theme layouts/_default/baseof.html
  • Add there somthere inside a head:
<head>
  .....
  {{ template "_internal/opengraph.html" . }}

Done? Now generate your site with hugo command and check the produced index.html for some page.

hugo
head -100 public/post/test/index.html

You don’t see the <meta property="og:image"... there, right?

Ok… there are few more conditions in standard implementation.

Hugo official documentation

https://gohugo.io/templates/embedded/#open-graph

  1. Basically you need to specify in the page frontmatter the images you want to be published in meta, for example
---
title: "My hugo test page title"
description: "Description of my hugo test page"

date: "2025-07-15"
lastmod: "2025-07-15"

tags:
  - Hugo
  - Images

images:
  - post-cover1.png
  - post-cover2.png
---

But this might be too late because you already have a website with a thousand pages. Do not worry, there is anothere option.

  1. Store images in your page bundle with special names.

That _internal/opengraph.html calls _funcs/get-page-images.html which is searching in your page bundle for the image files which contain feature (like feature.png), then, if feature image isn’t found for image files with names containing cover or thumbnail.

Part of get-page-images.html:

{{- $featured := $resources.GetMatch "*feature*" -}}
  {{- if not $featured }}{{ $featured = $resources.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
  {{- with $featured }}
    {{- $imgs = $imgs | append (dict
      "Image" .
      "RelPermalink" .RelPermalink
      "Permalink" .Permalink) }}
  {{- end }}
  1. Fallback to global website parameters - will take first image only.

Somewhere in hugo.toml

[params]
  description = 'My awesome website'
  images = ['default-feature-image.jpg']

or in hugo.yaml in case you use that

params:
  description: My awesome website'
  images:
  - default-feature-image.jpg

You can find that code there, in the get-page-images.html:

{{- if and (not $imgParams) (not $imgs) }}
  {{- with site.Params.images }}
    {{- $imgParams = first 1 . }}
  {{- end }}
{{- end }}

This website

This website as you have guessed and see is also using Hugo. Here I have thumbnail images referenced in page frontmatter the standard Hugo/MainRoad way:

thumbnail: this-page-thumbnail.jpg

But my thumbnails already nicely resized to the width 235px… Ops… that’s not enough for the cover image of the page. And other images have all different names…

I did the fix the easy way - I have just put to the website config default image params. And now all pages before this post have the image of this small kubernetes cluster as their opengraph meta:

dell usff stack

I might change something in the future, kind of write some automatic script to update all pages frontmatter sections, but for now it’s food enough.