Opengraph-Bild-Metadaten im Hugo-Statik-Site-Generator

Wie fügt man OpenGraph-Metadaten zu Hugo hinzu?

Inhaltsverzeichnis

Opengraph-Bildmetadaten ist die Meta-Eigenschaft og:image. Grundsätzlich möchten wir den korrekt generierten Tag <meta property="og:image" content="https://....jpg"> für jede Seite unserer hugo-basierten Website.

Hugo-Logo und Slogan

Wie OpenGraph-Metadaten eingebunden werden

Suchen Sie in Ihrem Theme-Code nach dem

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

Wahrscheinlich ist es bereits enthalten. Falls es nirgends gefunden werden kann, können Sie es selbst einbinden.

  • Erstellen oder kopieren Sie aus Ihrem Theme layouts/_default/baseof.html
  • Fügen Sie dort irgendwo im Kopfbereich ein:
<head>
  .....
  {{ template "_internal/opengraph.html" . }}

Fertig? Generieren Sie nun Ihre Website mit dem Hugo-Befehl und überprüfen Sie die erzeugte index.html für eine bestimmte Seite.

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

Sie sehen den <meta property="og:image"... dort nicht, richtig?

Okay… es gibt noch einige weitere Bedingungen in der Standardimplementierung.

Offizielle Hugo-Dokumentation

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

  1. Grundsätzlich müssen Sie in den Seiteneigenschaften die Bilder angeben, die in den Metadaten veröffentlicht werden sollen, zum Beispiel
---
title: "Mein Hugo-Testseitentitel"
description: "Beschreibung meiner Hugo-Testseite"

date: "15.07.2025"
lastmod: "15.07.2025"

tags:
  - Hugo
  - Bilder

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

Aber das könnte zu spät sein, weil Sie bereits eine Website mit tausend Seiten haben. Keine Sorge, es gibt eine weitere Option.

  1. Speichern Sie Bilder in Ihrem Seitenpaket mit speziellen Namen.

Das _internal/opengraph.html ruft _funcs/get-page-images.html auf, das in Ihrem Seitenpaket nach Bilddateien sucht, die feature (wie feature.png) enthalten, und dann, wenn kein Feature-Bild gefunden wurde, nach Bilddateien mit den Namen cover oder thumbnail.

Teil von 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 zu globalen Website-Parametern - wird nur das erste Bild übernehmen.

Irgendwo in hugo.toml

[params]
  description = 'Meine tolle Website'
  images = ['default-feature-image.jpg']

oder in hugo.yaml, falls Sie das verwenden

params:
  description: Meine tolle Website'
  images:
  - default-feature-image.jpg

Sie können diesen Code dort finden, in der get-page-images.html:

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

Diese Website

Diese Website, wie Sie vermutet und gesehen haben, verwendet ebenfalls Hugo. Hier habe ich Miniaturbilder in den Seiteneigenschaften auf die Standard-Hugo/MainRoad-Art referenziert:

thumbnail: this-page-thumbnail.jpg

Aber meine Miniaturbilder sind bereits schön auf eine Breite von 235px skaliert … Ops… das reicht nicht für das Cover-Bild der Seite. Und andere Bilder haben alle unterschiedliche Namen…

Ich habe das Problem auf die einfache Weise gelöst - ich habe einfach die Standardbildparameter in die Website-Konfiguration eingestellt. Und jetzt haben alle Seiten vor diesem Beitrag das Bild dieses kleinen Kubernetes-Clusters als ihr OpenGraph-Meta:

dell usff stack

Ich könnte in Zukunft etwas ändern, zum Beispiel ein automatisches Skript schreiben, um alle Seiteneigenschaften-Abschnitte zu aktualisieren, aber für den Moment reicht es.