Hugo ステティックサイトジェネレータにおける OpenGraph 画像メタデータ
Hugo に OpenGraph メタデータを追加する方法は？
Opengraph画像メタデータ
とは、og:imageというメタプロパティです。
基本的に、Hugoベースのウェブサイトの各ページに対して、正しく生成されたタグ <meta property="og:image" content="https://....jpg"> が必要です。
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
- 基本的に、ページのフロントマターに、メタデータに掲載したい画像を指定する必要があります。例えば：
---
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
---
しかし、すでに1000ページ以上のウェブサイトを持っている場合、この方法は遅すぎるかもしれません。ご心配なく、もう一つのオプションがあります。
- ページバンドル内に特別な名前の画像を保存してください。
_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 }}
- グローバルなウェブサイトパラメータにフォールバックします。これにより、最初の画像のみが使用されます。
hugo.toml 内のどこかに以下を配置してください：
[params]
description = 'My awesome website'
images = ['default-feature-image.jpg']
または hugo.yaml を使用している場合は：
params:
description: My awesome website'
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 を使用しています。 ここでは、標準的な Hugo/MainRoad の方法で、ページフロントマターにサムネイル画像を参照しています：
thumbnail: this-page-thumbnail.jpg
しかし、私のサムネイル画像はすでに 適切にリサイズ済み で、幅235pxに設定されています… あ、これではページのカバー画像には小さすぎます。他の画像の名前もすべて異なります…
私は簡単に修正しました。ウェブサイトの設定にデフォルト画像パラメータを追加しただけです。これにより、この投稿以前のすべてのページは、この小さなKubernetesクラスターの画像を使用してOpengraphメタデータに表示されます：
今後は、すべてのページのフロントマターを自動的に更新するスクリプトを書くかもしれません。しかし、今のところこれで十分です。
