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 を読み込むようにします。