Metadane obrazu opengraph w generatorze statycznych stron Hugo
Jak dodać metadane opengraph do hugo?
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.
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
- 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.
- 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 }}
- 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:
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
- Hugo Cheat Sheet
- Obsługa obrazów w motywie Mainroad
- Jak przechowywać obrazy miniatur w folderze pakietu strony dla stron Hugo z motywem Mainroad
- Wdrażanie strony wygenerowanej przez Hugo na AWS S3
- Dodawanie strukturalnego markup do Hugo
- Wypełnianie formularza Google w stronie Hugo
- Najpopularniejsze motywy dla Hugo