Hugoで関連記事を表示する方法

Hugoの関連記事機能を活用することで、読者のエンゲージメント向上やサイト回遊率アップが期待できる。ここでは、Hugoのビルトイン機能を使った関連記事表示の手順を、ポイントとともに分かりやすく解説していく。

1. hugo.tomlを設定する

まず、Hugoにどのような条件で関連記事を選定させるか設定する。hugo.toml（またはconfig.toml）に以下を追記する。タグ・キーワード・日付を考慮する例で見ていく。必要に応じて重み（weight）の値は調整できる。

[related]
includeNewer = true   # 現在の記事より新しい記事も含める
threshold = 80        # 関連度のしきい値（0〜100）
toLower = false

[[related.indices]]
name = "tags"
weight = 80

[[related.indices]]
name = "keywords"
weight = 100

[[related.indices]]
name = "date"
weight = 10

注意: [related]セクションを追加した場合、必要なindexをすべて記述する必要がある（一部だけだとデフォルトのindexは補充されない）。また、hugo.tomlとconfig.tomlのどちらかのファイル名になるが、使っているHugoのバージョンに合わせること。

ちょっとしたコツ:

• 日付の範囲を絞りたい時は、date indexにpattern = “2006-01"のような指定も可能。

• 記事のフロントマターでtagsやkeywordsなど、本記事で指定したindexが使われていることを確認しよう。

2. 記事のフロントマターを整える

関連記事を有効にするためには、各記事のフロントマターに対応項目（例：tagsやkeywordsなど）が一貫して記載されている必要がある。例：

---
title: "Hugo入門"
date: 2025-08-01
tags: ["hugo", "静的サイト"]
keywords: ["hugo", "static", "ブログ"]
---

（TOMLやJSON表記でもOK）

3. layouts/partials/related.htmlを作成

次に、関連記事をレンダリングするパーシャルテンプレートを作成する。layouts/partials/related.htmlに以下を記述する。

{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<h3>関連記事</h3>
<ul>
    {{ range . }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
    {{ end }}
</ul>
{{ end }}

（first 5の数字は好きな件数に調整できます）

4. 記事テンプレートにパーシャルを追加

layouts/_default/single.htmlなど、記事ページのテンプレートの表示させたい箇所に、以下を挿入する。

{{ partial "related.html" . }}

これで、すべての記事下などに関連記事リストが表示されるようになる。

5. （オプション）カスタマイズや動作確認

• related.htmlの内容やデザインは自由に編集できる。

• 複数記事をテストし、関連記事が正しく表示されているか必ず確認すること。表示されない場合は、フロントマターや設定ミスを見直そう。

• テーマによっては関連記事パーシャルが既にある場合があるため、その場合はlayouts/partials/related.htmlで上書きする必要がある。

• Hugoの関連記事判定は、本文内容ではなくフロントマター属性だけを参照する。

6. （オプション）高度な使い方

• titleやdescriptionなど、他の属性を追加indexとして指定もできる。

• より複雑な一致（記事内見出し単位など）が必要な場合はフラグメントベースの設定も可能だが、通常のブログ用途では推奨しない。

• 多言語サイトの場合は、各言語ごとのconfigファイル内で関連記事の設定を記述しよう。

トラブルシューティングと注意点

• 関連記事をつけたい記事全てに必要なフロントマター項目を忘れず記載すること。

• パーシャルが反映されない場合は、hugo --ignoreCacheでキャッシュクリアして再構築しよう。

• [related]セクションは必ず完全な形で指定しよう（一部だけだとうまく動作しない）。

おわりに

上記の手順で、Hugoサイトに柔軟でパワフルな関連記事セクションを導入できる。重みや対象項目を色々試しながら、あなたのコンテンツや読者にぴったりの関連記事表示を組み上げてみて欲しい。