【Hugo機能】回遊率を上げる「関連記事(Related Content)」の自動表示と設定カスタマイズ

「この記事の内容に興味を持ってくれた読者には、ぜひあっちのテーマの記事も合わせて読んでほしい！」
そう願っていても、読者が自力でサイト内を検索して関連する記事を見つけ出してくれるとは限りません。

そこで極めて重要になるのが、記事の終わりに配置する 「関連記事 (Related Content)」 の表示です。
Hugoには、記事同士の関連度を自動的に計算して的確な「おすすめ」を提示する機能が標準で備わっています！

1. 関連記事を表示する仕組み

Hugoは、以下の要素を使って記事同士の「関連度」を計算しています。

date (日付)
keywords (キーワード)
tags (タグ)

特に タグ (tags) が一致していると、関連度が高いと判断されやすくなります。
つまり、タグをしっかり設定しておけば、自動的に精度の高い「おすすめ記事」が出せるようになるんです！

2. 実装方法

テンプレートファイル（このテーマの場合は layouts/page.html）の、記事本文の下あたりに以下のコードを追加します。

{{ $related := .Site.RegularPages.Related . | first 3 }}
{{ with $related }}
<div class="related-content">
    <h3>あわせて読みたい 📚</h3>
    <ul>
        {{ range . }}
        <li>
            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
            <small>({{ .Date.Format "2006-01-02" }})</small>
        </li>
        {{ end }}
    </ul>
</div>
{{ end }}

コードの解説

.Site.RegularPages.Related .: サイト内の記事全体から、現在のページ (.) に関連する記事を探します。
| first 3: 全部表示すると多すぎるので、関連度の高い順に 3つだけ 取り出します。
{{ with $related }}: もし関連記事が見つかった場合だけ、<div> ブロックを表示します（1つもない時は何も表示しません）。
変数の表示: {{ range . }} の中では、. が「その関連記事」自体を指すようになります。
- 日付: .Date.Format "2006-01-02" で表示できます。
- カテゴリー: .Params.categories でカテゴリーの配列にアクセスできます。
- 概要: .Summary で記事の書き出し部分を表示できます。
- サムネイル: Front Matterに image を設定しているなら .Params.image で画像パスを取得できます。

3. もっと細かく設定したい場合（上級編）

「タグの一致をもっと重視したい！」「日付は無視したい！」といった場合は、hugo.toml で計算式をカスタマイズできます。

[related]
  includeNewer = true # 新しい記事も対象にするか
  threshold = 80      # 関連度の足切りライン (0-100)
  toLower = false     # キーワードを小文字に統一するか

  [[related.indices]]
    name = "tags"
    weight = 100      # タグの一致を最重要視！

  [[related.indices]]
    name = "categories"
    weight = 50       # カテゴリーの一致もそこそこ考慮
    
  [[related.indices]]
    name = "date"
    weight = 10       # 日付の近さはオマケ程度

この weight（重み）の数字を変えることで、あなた好みのアルゴリズムでリコメンドできるようになります。

【Hugo機能】回遊率を上げる「関連記事(Related Content)」の自動表示と設定カスタマイズ

1. 関連記事を表示する仕組み

2. 実装方法

コードの解説

3. もっと細かく設定したい場合（上級編）

関連記事機能を活用してサイトの回遊率アップを狙おう

あわせて読みたい 📚