Hugoで作成したサイトにOGP（Open Graph Protocol）を適用することで、SNSでのシェア時に適切なタイトルや画像が表示されるようになります。本記事では、HugoでOGP対応を行った手順を備忘録としてまとめます。

生成AIにまとめてもらったので、間違いがあったらごめんなさい。一応、目では見ています。

OGPとは？

OGP（Open Graph Protocol）は、FacebookをはじめとするSNSでURLを共有した際に、適切なメタデータ（タイトル、説明、画像など）を表示するための仕組みです。適切なOGP設定を行うことで、SNSでのクリック率向上や視認性の向上が期待できます。

それと、単純に見た目がかっこいい。

1. layouts/partials にOGP用のテンプレートを作成

まず、Hugoのテンプレートシステムを活用し、OGP用のmetaタグを管理するために layouts/partials/ogp.html を作成します。

1
2
3
4
5
6
7

<!-- layouts/partials/ogp.html -->
{{ with .Title }}<meta property="og:title" content="{{ . }}">{{ end }}
{{ with .Description }}<meta property="og:description" content="{{ . }}">{{ end }}
{{ with .Permalink }}<meta property="og:url" content="{{ . }}">{{ end }}
<meta property="og:type" content="website">
{{ with .Site.Params.ogpImage }}<meta property="og:image" content="{{ . }}">{{ end }}
<meta property="og:site_name" content="{{ .Site.Title }}">

ここでは、ページのタイトルや説明、URLを動的に取得し、OGPのメタタグを出力しています。

2. head.html にOGPテンプレートを組み込む

Hugoでは layouts/partials/head.html にサイト共通のメタタグを記述することが一般的です。この中に ogp.html を読み込むようにします。

1

{{ partial "ogp.html" . }}

これにより、各ページに適切なOGPメタデータが自動的に適用されます。

3. config.toml にOGP用の画像を設定

OGPにはデフォルトの画像が必要です。サイト全体で共通の画像を設定する場合は、 config.toml に以下を追加します。

[params]
ogpImage = "https://example.com/images/ogp-default.png"

個別の記事ごとに異なるOGP画像を設定したい場合は、各記事のFront Matterに以下を追加します。

1
2
3
4
5

---
title: "記事タイトル"
description: "記事の説明"
image: "https://example.com/images/article-ogp.png"
---

そして ogp.html を以下のように修正し、個別の image が設定されている場合はそれを優先するようにします。

1
2
3
4
5

{{ if .Params.image }}
<meta property="og:image" content="{{ .Params.image }}">
{{ else }}
<meta property="og:image" content="{{ .Site.Params.ogpImage }}">
{{ end }}

4. Twitterカードにも対応

Twitterでの表示を最適化するために、OGPと合わせてTwitterカードのメタタグも追加します。（将来x:cardとかになるのかもしれませんが……）

1
2
3
4
5

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourTwitterHandle">
<meta name="twitter:title" content="{{ .Title }}">
<meta name="twitter:description" content="{{ .Description }}">
<meta name="twitter:image" content="{{ .Params.image | default .Site.Params.ogpImage }}">

5. OGPの確認方法

設定後、正しくOGPが反映されているかを確認するには、XやThreadsなどのポストの入力欄を使うといいでしょう。画像は取得が遅れるようです。

まとめ

HugoでOGPを適用する手順は以下のとおりです。

  1. layouts/partials/ogp.html を作成
  2. layouts/partials/head.html で ogp.html を読み込む
  3. config.toml にOGP画像の設定を追加
  4. Twitterカードにも対応
  5. デバッガーツールで動作確認

これにより、SNSでのシェア時に最適な表示がされるようになり、サイトの視認性向上に貢献します。

より発展的な方法

以下が参考になります。ベースの画像をHugoのResourcesで扱うことで、Filterでテキスト合成してページ別の画像生成ができます。いいですね。

Hugo で OGP 画像を生成する