Métadonnées d'image OpenGraph dans le générateur de site statique Hugo

Comment ajouter des métadonnées OpenGraph à Hugo ?

Sommaire

Opengraph image metadata est la propriété meta og:image. En bref, nous souhaitons que le tag <meta property="og:image" content="https://....jpg"> soit correctement généré pour chaque page de notre site basé sur Hugo.

Logo et slogan de Hugo

Comment les métadonnées OpenGraph sont incluses

Recherchez dans le code de votre thème

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

Elles sont probablement déjà incluses. Si vous ne trouvez rien, vous pouvez essayer de les inclure vous-même.

  • Créez ou copiez depuis votre thème layouts/_default/baseof.html
  • Ajoutez-y quelque part à l’intérieur de la balise <head> :
<head>
  .....
  {{ template "_internal/opengraph.html" . }}

C’est fait ? Générez maintenant votre site avec la commande hugo et vérifiez le fichier index.html produit pour une page donnée.

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

Vous ne voyez pas le <meta property="og:image"... là-dedans, n’est-ce pas ?

D’accord… il y a encore quelques conditions supplémentaires dans l’implémentation standard.

Documentation officielle de Hugo

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

  1. En général, vous devez spécifier dans le frontmatter de la page les images que vous souhaitez publier dans les métadonnées, par exemple
---
title: "Mon titre de page de test Hugo"
description: "Description de ma page de test Hugo"

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

tags:
  - Hugo
  - Images

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

Mais cela pourrait être trop tard si vous avez déjà un site web avec des milliers de pages. Ne vous inquiétez pas, il existe une autre option.

  1. Stockez les images dans votre page bundle avec des noms spécifiques.

Ce _internal/opengraph.html appelle _funcs/get-page-images.html qui cherche dans votre page bundle les fichiers d’images contenant feature (comme feature.png), puis, si l’image feature n’est pas trouvée, il cherche les fichiers d’images contenant cover ou thumbnail.

Partie de 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 vers les paramètres globaux du site web - ne prend que la première image.

Quelque part dans hugo.toml

[params]
  description = 'Mon superbe site web'
  images = ['default-feature-image.jpg']

ou dans hugo.yaml si vous utilisez ce format

params:
  description: Mon superbe site web'
  images:
  - default-feature-image.jpg

Vous pouvez trouver ce code là, dans get-page-images.html :

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

Ce site web

Comme vous l’avez deviné et comme vous pouvez le voir, ce site web utilise également Hugo. Ici, j’ai des images d’aperçu référencées dans le frontmatter de la page de manière standard Hugo/MainRoad :

thumbnail: this-page-thumbnail.jpg

Mais mes images d’aperçu sont déjà correctement redimensionnées à une largeur de 235px… Oh, attendez… ce n’est pas suffisant pour l’image de couverture de la page. Et les autres images ont toutes des noms différents…

J’ai fait la correction de manière simple - j’ai simplement ajouté des paramètres d’image par défaut à la configuration du site. Et maintenant, toutes les pages avant ce billet utilisent l’image de ce petit cluster Kubernetes comme leur méta d’OpenGraph :

dell usff stack

Je pourrais peut-être changer quelque chose à l’avenir, comme écrire un script automatique pour mettre à jour les sections frontmatter de toutes les pages, mais pour l’instant, c’est suffisant.

Liens utiles