関連記事を自動表示する―記事末尾の回遊導線を作る

Astroの記事データから関連記事を選び、記事末尾へ自動表示する方法を記録します。既存のcategory・tagsを使った候補判定、自記事の除外、候補不足時の処理を確認します。

公開：更新：
関連記事を自動表示する―記事末尾の回遊導線を作る

記事を最後まで読んでもらったあと、

「次にどの記事を読めばいいのか分からない」
「本文中に毎回関連記事リンクを手作業で追加するのは面倒」
「記事数が増えるたびに過去記事を全部直したくない」

という問題があります。

ゆまラボでも記事数が増えてきたため、記事末尾に関連記事を自動表示する仕組みを追加しました。

本文中の内部リンクは、その文章と直接関係する記事を手動で置きます。

一方、記事を読み終えた後の「次に読む候補」は、記事データから自動で出す方が運用しやすいと考えました。

この記事では、Astroの記事データから関連記事を選び、記事末尾へ自動表示した方法と、実際に運用して決めた役割分担をまとめます。

記事末尾には関連記事の一覧がなかった#

もう1つの対象は通常の記事ページ。

修正前は、本文末尾の「参考」が終わると、そのまま既存の末尾領域へ続いていた。本文中には必要な記事への手動リンクを置いているが、記事の分類から自動で候補を出す一覧はなかった。

修正前の記事末尾。参考の後に関連記事一覧はない

関連記事は専用Frontmatterを増やさず、すでに各記事が持つcategory、subcategory、tagsから候補を選ぶ。表示件数は最大3件。候補が1件なら1件、2件なら2件だけ表示し、条件を広げて無関係な記事を埋める処理は追加しない。

タグページの検索・並び替えも当時は試した#

関連記事の実装とは別に、当時のタグ一覧では人気タグ、タグ名検索、記事数順・タグ名順の並び替え、カード表示も試した。これは現在の仕様ではなく、タグページを運用していた時期の実験記録である。

修正前のタグ一覧。タグ名と記事件数を文字中心で表示している

タグ名でaiを検索し、タグ名順へ切り替えた状態

確認時点ではタグ件数や表示内容を実測しているが、現在はタグ一覧・個別タグページともに生成していない。タグデータ自体は記事Frontmatterに残している。

関連記事の候補をどう選ぶか#

関連記事の候補判定はsrc/utils/posts.ts側へ追加し、記事ページを生成するsrc/pages/blog/[...slug].astroからArticleLayout.astroへ渡す構成にした。

現在のsrc/utils/posts.tsでは、候補を次の順で比較する。

1. 同じcategoryかどうか
2. 正規化後のtagsが共通する数
3. 条件が同じ場合は既存の記事順

subcategoryを独立した優先条件にはしていない。候補は同じcategoryか、共通するtagが1件以上ある記事に絞っている。

現在の記事自身は候補から除外する#

現在表示している記事自身と同一URLの記事は除外する。自記事が関連記事カードへ出ないことを生成HTMLで確認する。

関連記事専用Frontmatterは追加しない。カード表示にも新しい専用デザインを作らず、既存のArticleCardを再利用した。

この方式なら、新しい記事を追加したときも関連記事用の設定を別に書く必要がない。記事側で普段どおりcategory、subcategory、tagsを設定すれば、その値が候補判定にも使われる。heroImageがない記事についても関連記事だけ特別な画像処理を追加せず、現在の記事一覧で使っている既存の表示方法へ任せる。

候補が足りない場合の処理#

候補が3件未満のときは件数を優先せず、該当した記事だけを出す。候補が0件なら「関連記事」見出し自体を表示しない。関連記事のために分類条件を緩め続ける処理は入れていない。

記事末尾へ関連記事を表示する#

修正後は、本文と参考リンクの後に「関連記事」が表示される。

修正後の記事末尾。関連記事を既存の記事カード形式で表示

確認画面では、「見出しアンカーは必要？」とコードブロックのコピーボタン記事などが候補として表示されている。

配置は本文終了後、既存の連載導線や前後記事ナビゲーションより前。既存導線は残し、その前へ一覧を追加している。

生成HTMLでは関連記事は最大3件、自記事参照は0件。候補が0件なら空の「関連記事」見出しも表示しない。

その後タグページは廃止した#

タグ一覧と個別タグページは廃止し、カテゴリ、テーマ別まとめ、記事一覧、検索、関連記事へ導線を集約した。タグデータそのものは記事Frontmatterに残している。

タグページを作ってから廃止するまでの経緯はタグページを整理する―noindex・サイトマップ除外から廃止までにまとめている。

ビルドと生成HTMLを確認#

当時の実装後にnpm run buildを実行し、成功した。

生成ページ        211ページ
Pagefind           68ページ
内部リンク          8,052件
壊れたリンク        0件
タグカード          110件
人気タグ            7件
関連記事            最大3件
自記事参照          0件

PC向けは自動グリッドを使用し、狭い幅では検索欄と並び替えを縦方向へ配置するCSSになっている。長いタグ名もカード内で折り返す。

ただし、Codexを実行した環境には実機ブラウザがなかったため、狭幅表示はCSSと生成HTMLでの確認に留めている。スマートフォン実機まで確認したとは扱わない。

既存のverify.mjsも実行したが、今回とは別の記事codex-luna-astra-astro-comparisonでpubDate: 2026-09-09、updatedAt: 2026-09-12となっている既存の検証条件により停止した。タグ一覧と関連記事の実装で発生した停止ではないため、別件として記録に残している。

関連記事を入れて分かったこと#

タグページの検索・並び替えは当時の実験として残し、現在の主役は記事末尾の関連記事に絞った。

記事ページでは、既存のcategoryと正規化後のtagsから関連記事を選び、最大3件を既存のArticleCardで表示する。自記事は除外し、候補不足時は存在する記事だけを表示する。

本文中の直接的な内部リンクは手動で置き、記事を読み終えた後の候補は自動表示に任せる。この役割分担なら、記事が増えても過去記事へ関連記事リンクを一括追加する必要がない。