Metadatos de imagen de OpenGraph en el generador de sitios estáticos Hugo

¿Cómo agregar metadatos de OpenGraph a Hugo?

Índice

Metadatos de imagen de Opengraph es la propiedad meta og:image. Básicamente, queremos que se genere correctamente la etiqueta <meta property="og:image" content="https://....jpg"> para cada página en nuestro sitio web basado en Hugo.

Logo y lema de Hugo

Cómo se incluyen los metadatos de OpenGraph

Busca en el código de tu tema por

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

Probablemente ya lo está incluyendo. Si no se puede encontrar en ningún lugar, puedes intentar incluirlo tú mismo

  • Crea o copia desde tu tema layouts/_default/baseof.html
  • Añade allí en algún lugar dentro de la etiqueta <head>:
<head>
  .....
  {{ template "_internal/opengraph.html" . }}

¿Listo? Ahora genera tu sitio con el comando hugo y comprueba el archivo producido index.html para alguna página.

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

¿No ves la etiqueta <meta property="og:image"... allí, ¿verdad?

Bueno… hay algunas condiciones adicionales en la implementación estándar.

Documentación oficial de Hugo

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

  1. Básicamente, necesitas especificar en el frontmatter de la página las imágenes que deseas que se publiquen en los metadatos, por ejemplo
---
title: "Mi título de prueba de página de Hugo"
description: "Descripción de mi página de prueba de Hugo"

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

tags:
  - Hugo
  - Imágenes

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

Pero esto podría ser demasiado tarde, ya que ya tienes un sitio web con mil páginas. No te preocupes, hay otra opción.

  1. Almacena imágenes en tu carpeta de página con nombres especiales.

Ese _internal/opengraph.html llama a _funcs/get-page-images.html que busca en tu carpeta de página por archivos de imagen que contienen feature (como feature.png), y luego, si no se encuentra la imagen destacada, busca en archivos de imagen con nombres que contienen cover o thumbnail.

Parte 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. Recurso de imagen global del sitio web - tomará solo la primera imagen.

En algún lugar en hugo.toml

[params]
  description = 'Mi increíble sitio web'
  images = ['default-feature-image.jpg']

o en hugo.yaml si usas ese formato

params:
  description: Mi increíble sitio web'
  images:
  - default-feature-image.jpg

Puedes encontrar ese código allí, en get-page-images.html:

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

Este sitio web

Este sitio web, como ya has adivinado y puedes ver, también está usando Hugo. Aquí tengo imágenes de miniatura referenciadas en el frontmatter de la página de la manera estándar de Hugo/MainRoad:

thumbnail: this-page-thumbnail.jpg

Pero mis miniaturas ya están redimensionadas correctamente a un ancho de 235px… Ops… eso no es suficiente para la imagen de portada de la página. Y otras imágenes tienen todos nombres diferentes…

Hice la corrección de manera fácil - simplemente puse parámetros de imagen predeterminados en la configuración del sitio web. Y ahora todas las páginas antes de este post tienen la imagen de este pequeño clúster de Kubernetes como su metadato de opengraph:

pila Dell USFF

Podría cambiar algo en el futuro, algo así como escribir un script automático para actualizar todas las secciones de frontmatter de las páginas, pero por ahora es suficiente.

Enlaces útiles