Metadane obrazu opengraph w generatorze statycznych stron Hugo

Jak dodać metadane opengraph do hugo?

Page content

Opengraph image metadata to właściwość meta og:image. Podstawowo chcemy poprawnie wygenerowany tag <meta property="og:image" content="https://....jpg"> dla każdej strony naszej strony opartej na hugo.

Hugo logo i slogan

Jak są włączone metadane OpenGraph

Szukaj w kodzie swojego motywu frazy

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

Prawdopodobnie już ją zawiera. Jeśli nie znajdziesz jej nigdzie – możesz spróbować ją samodzielnie dodać.

  • Utwórz lub skopiuj z motywu layouts/_default/baseof.html
  • Dodaj ją wewnątrz nagłówka:
<head>
  .....
  {{ template "_internal/opengraph.html" . }}

Gotowe? Teraz wygeneruj swoją stronę za pomocą polecenia hugo i sprawdź wygenerowany plik index.html dla jakiejś strony.

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

Nie widzisz tam tagu <meta property="og:image"..., prawda?

Dobrze… w standardowej implementacji są jeszcze kilka dodatkowych warunków.

Oficjalna dokumentacja Hugo

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

  1. Podstawowo musisz określić w frontmatter strony obrazy, które mają zostać opublikowane w metadanych, na przykład
---
title: "Moja testowa strona hugo"
description: "Opis mojej testowej strony hugo"

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

tags:
  - Hugo
  - Obrazy

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

Ale to może być zbyt późno, ponieważ już masz stronę z tysiącem stron. Nie martw się, istnieje inna opcja.

  1. Przechowuj obrazy w swoim pakiecie strony z nazwami specjalnymi.

Ten _internal/opengraph.html wywołuje _funcs/get-page-images.html, który szuka w pakiecie strony plików obrazowych zawierających feature (np. feature.png), a jeśli obraz feature nie zostanie znaleziony, to szuka plików z nazwami zawierającymi cover lub thumbnail.

Część kodu 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. Ustawienie domyślnego obrazu w parametrach globalnych strony – pobiera tylko pierwszy obraz.

Gdzieś w hugo.toml

[params]
  description = 'Moja wspaniała strona'
  images = ['default-feature-image.jpg']

lub w hugo.yaml, jeśli używasz tego formatu

params:
  description: 'Moja wspaniała strona'
  images:
  - default-feature-image.jpg

Możesz to znaleźć w kodzie tam, w get-page-images.html:

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

Ta strona

Jak możesz się domyślać i widzieć, ta strona również korzysta z Hugo. Tu mam obrazy miniatury odniesione w standardowy sposób w frontmatter strony Hugo/MainRoad:

thumbnail: this-page-thumbnail.jpg 

Ale moje miniatury już są odpowiednio przeskalowane do szerokości 235px… Och… to za mało na obraz okładki strony. A inne obrazy mają wszystkie inne nazwy…

Zrobiłem to łatwym sposobem – po prostu dodałem do konfiguracji strony domyślne parametry obrazu. I teraz wszystkie strony przed tym postem mają jako opengraph meta obraz tego małego klastra Kubernetes:

dell usff stack

Może w przyszłości zmienię coś, np. napiszę jakiś automatyczny skrypt, który zaktualizuje sekcje frontmatter wszystkich stron, ale teraz wystarczy to.

Przydatne linki