Opengraph-afbeeldingsmetadata in de Hugo-staticsitegenerator

Hoe voeg je opengraph metadata toe aan Hugo?

Inhoud

Opengraph afbeeldingsmeta-gegevens is de meta-eigenschap og:image. Bijna altijd willen we dat de tag <meta property="og:image" content="https://....jpg"> correct gegenereerd wordt voor elke pagina in onze hugo-gebaseerde website.

Hugo logo en slogan

Hoe OpenGraph meta-gegevens worden opgenomen

Zoek in de code van je thema naar de

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

Het is waarschijnlijk al opgenomen. Als je het nergens kunt vinden, kun je het zelf proberen op te nemen.

  • Maak of kopieer vanuit je thema layouts/_default/baseof.html
  • Voeg daar ergens binnen de <head> toe:
<head>
  .....
  {{ template "_internal/opengraph.html" . }}

Klaar? Genereer nu je site met de hugo-opdracht en controleer het gegenereerde index.html voor een bepaalde pagina.

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

Zie je de <meta property="og:image"... daar niet, juist?

Goed… er zijn nog een paar extra voorwaarden in de standaardimplementatie.

Officiële Hugo-documentatie

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

  1. Basis is dat je in de frontmatter van de pagina de afbeeldingen moet opgeven die je in de meta wilt publiceren, bijvoorbeeld
---
title: "Mijn hugo testpagina titel"
description: "Beschrijving van mijn hugo testpagina"

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

tags:
  - Hugo
  - Afbeeldingen

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

Maar dit kan te laat zijn, omdat je al een website hebt met duizenden pagina’s. Maak je geen zorgen, er is een andere optie.

  1. Bewaar de afbeeldingen in je pagina-bundel met speciale namen.

De _internal/opengraph.html roept _funcs/get-page-images.html aan, die zoekt in je pagina-bundel naar afbeeldingsbestanden die feature bevatten (zoals feature.png), en als er geen feature-afbeelding is, zoekt het naar bestanden met cover of thumbnail.

Een deel van 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. Terugval naar globale websiteparameters - neemt alleen de eerste afbeelding.

Ergens in hugo.toml

[params]
  description = 'Mijn geweldige website'
  images = ['default-feature-image.jpg']

of in hugo.yaml als je dat gebruikt

params:
  description: Mijn geweldige website'
  images:
  - default-feature-image.jpg

Je kunt dit codefragment vinden in get-page-images.html:

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

Deze website

Deze website, zoals je waarschijnlijk al hebt geraden en ziet, gebruikt ook Hugo. Hier heb ik miniaturenaflaagjes opgenomen in de frontmatter van de pagina op de standaard Hugo/MainRoad manier:

thumbnail: this-page-thumbnail.jpg

Maar mijn miniaturenaflaagjes zijn al mooi gescalde tot een breedte van 235px… Oeps… dat is niet genoeg voor de coverafbeelding van de pagina. En andere afbeeldingen hebben allemaal verschillende namen…

Ik heb de oplossing op de eenvoudige manier gemaakt - ik heb gewoon de standaardafbeeldingsparameters toegevoegd aan de websiteconfiguratie. En nu hebben alle pagina’s voor dit bericht de afbeelding van deze kleine kubernetes cluster als hun opengraph meta:

dell usff stack

Ik kan in de toekomst iets veranderen, zoals een automatisch script schrijven om alle frontmattersecties van de pagina’s bij te werken, maar voor nu is het voldoende.