HugoでOGP対応を行う方法

Mon, 17 Mar 2025 18:08:46 +0900

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 を作成します。

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

Hugo on oeight.me

HugoでOGP対応を行う方法

OGPとは？

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

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

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

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