Метаданные изображения OpenGraph в генераторе статических сайтов Hugo

Как добавить метаданные OpenGraph в Hugo?

Содержимое страницы

Метаданные изображения OpenGraph — это свойство мета og:image. Основная цель — правильно сгенерировать тег <meta property="og:image" content="https://....jpg"> для каждой страницы нашего сайта на основе Hugo.

Логотип Hugo и слоган

Как включить метаданные OpenGraph

Поищите в коде вашей темы:

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

Вероятно, он уже включен. Если нигде не найдено — вы можете включить его самостоятельно

  • Создайте или скопируйте из вашей темы layouts/_default/baseof.html
  • Добавьте туда где-то внутри head:
<head>
  .....
  {{ template "_internal/opengraph.html" . }}

Готово? Теперь сгенерируйте ваш сайт с помощью команды hugo и проверьте сгенерированный index.html для какой-то страницы.

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

Вы не видите там <meta property="og:image"..., верно?

Хорошо… в стандартной реализации есть еще несколько условий.

Официальная документация Hugo

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

  1. Основная задача — указать в frontmatter страницы изображения, которые вы хотите опубликовать в метаданных, например
---
title: "Заголовок моей тестовой страницы Hugo"
description: "Описание моей тестовой страницы Hugo"

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

tags:
  - Hugo
  - Images

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

Но это может быть слишком поздно, потому что у вас уже есть сайт с тысячей страниц. Не волнуйтесь, есть другой вариант.

  1. Храните изображения в пакете страницы с особыми именами.

Этот _internal/opengraph.html вызывает _funcs/get-page-images.html, который ищет в вашем пакете страницы файлы изображений, содержащие feature (например, feature.png), затем, если изображение с функцией не найдено, ищет файлы изображений с именами, содержащими cover или thumbnail.

Часть 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. Резервное копирование глобальных параметров сайта — возьмет только первое изображение.

Где-то в hugo.toml

[params]
  description = 'Мой потрясающий сайт'
  images = ['default-feature-image.jpg']

или в hugo.yaml, если вы используете его

params:
  description: 'Мой потрясающий сайт'
  images:
  - default-feature-image.jpg

Вы можете найти этот код там, в get-page-images.html:

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

Этот сайт

Как вы, вероятно, догадались и видите, этот сайт также использует Hugo. Здесь у меня есть изображения миниатюр, указанные в frontmatter страницы стандартным способом Hugo/MainRoad:

thumbnail: this-page-thumbnail.jpg

Но мои миниатюры уже красиво отмасштабированы до ширины 235px… Ой… этого недостаточно для изображения обложки страницы. И другие изображения имеют разные имена…

Я сделал исправление простым способом — просто добавил в конфигурацию сайта параметры изображения по умолчанию. И теперь все страницы до этого поста имеют изображение этого небольшого кластера Kubernetes в качестве метаданных OpenGraph:

dell usff stack

В будущем я могу что-то изменить, например, написать автоматический скрипт для обновления разделов frontmatter всех страниц, но пока этого достаточно.

Полезные ссылки