Metadati dell'immagine Opengraph nel generatore di siti statici Hugo

Come aggiungere i metadati opengraph a Hugo?

Indice

Metadati dell’immagine Opengraph è la proprietà meta og:image. In sostanza, vogliamo che venga generato correttamente il tag <meta property="og:image" content="https://....jpg"> per ogni pagina del nostro sito web basato su Hugo.

Logo e slogan di Hugo

Come vengono inclusi i metadati OpenGraph

Cerca nel codice del tuo tema per

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

Probabilmente è già incluso. Se non riesci a trovarlo, puoi provare ad includerlo tu stesso.

  • Crea o copia dal tuo tema layouts/_default/baseof.html
  • Aggiungi all’interno del tag <head>:
<head>
  .....
  {{ template "_internal/opengraph.html" . }}

Fatto? Ora genera il tuo sito con il comando hugo e controlla il file index.html prodotto per una pagina.

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

Non vedi il tag <meta property="og:image"... lì, giusto?

Okay… ci sono alcune altre condizioni nell’implementazione standard.

Documentazione ufficiale di Hugo

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

  1. In sostanza devi specificare nell’frontmatter della pagina le immagini che desideri vengano pubblicate nei metadati, ad esempio
---
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
---

Ma potrebbe essere troppo tardi, visto che hai già un sito web con migliaia di pagine. Non preoccuparti, c’è un’altra opzione.

  1. Memorizza le immagini nel tuo bundle di pagina con nomi speciali.

Quello _internal/opengraph.html chiama _funcs/get-page-images.html che cerca nel bundle della pagina per i file immagine che contengono feature (come feature.png), quindi, se non trova un’immagine di feature, cerca quelle con nomi che contengono cover o thumbnail.

Parte del codice di 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. Rientro globale ai parametri del sito web - prenderà solo la prima immagine.

Qualche parte in hugo.toml

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

o in hugo.yaml nel caso tu lo usi

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

Puoi trovare quel codice lì, in get-page-images.html:

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

Questo sito web

Come hai probabilmente indovinato e puoi vedere, anche questo sito web utilizza Hugo. Qui ho immagini miniature riferite nell’frontmatter della pagina in modo standard Hugo/MainRoad:

thumbnail: this-page-thumbnail.jpg

Ma le mie miniature già ridimensionate correttamente alla larghezza di 235px… Ops… non è sufficiente per l’immagine di copertina della pagina. E altre immagini hanno tutti nomi diversi…

Ho risolto in modo semplice - ho aggiunto semplicemente i parametri di immagine predefiniti alla configurazione del sito. Ora tutte le pagine prima di questo post hanno l’immagine di questo piccolo cluster Kubernetes come loro meta opengraph:

dell usff stack

Potrei cambiare qualcosa in futuro, tipo scrivere un piccolo script automatico per aggiornare tutte le sezioni dell’frontmatter delle pagine, ma per ora è sufficiente.