ほしもちレコード

WIP — この記事は追記・更新される可能性があります。

ブログ全記事のフッターに「5大ハブ一覧コンポーネント」を自動挿入して回遊率と使い勝手を爆上げした話

Design Ops / 設計・制作

#Next.js · #ブログ改修 · #SEO · #UI/UX · #Design Ops

公開
更新

ブログ全記事のフッターに「5大ハブ一覧コンポーネント」を自動挿入して回遊率と使い勝手を爆上げした話

ブログ記事数が80件を超え、テーマごとの【ハブページ】も5つに増えてきたため、個別記事を読み終わった読者がそのまま別テーマへ巡回できる 「全自動ハブ一覧コンポーネント（<HubDirectory />）」 を構築し、記事ページの末尾（サイトフッター直前）に導入しました。

記事ごとに手動でリンクを貼る運用を減らし、記事共通の [slug]/page.tsx 側で一括管理することで、運用コストほぼゼロで回遊と自分用の使い勝手を上げた記録です(^^)

背景と課題

  1. 記事末尾での離脱（直帰）防止
    検索から個別記事に流入した読者が、読み切ったあとに次のアクション（他テーマへの巡回）を起こしにくく、そのまま離脱しやすい。
  2. 手動更新の限界とリンクの風化
    記事末尾への手動リンク（または半自動挿入）だけでは、新しいハブが増えたときに過去記事へ反映しきれない。
  3. 自分用ノート（Obsidian / Web）としての回遊性
    過去の知見や愛用品マスタを振り返るとき、どの記事からでも主要ハブへ1タップで飛べる導線が欲しかった。

設計・カイゼン内容（Design Ops）

1. 「カテゴリ」ではなく「意思のある5大ハブ」へ誘導

ただの時系列リストである自動カテゴリではなく、自前でキュレーションした 5つのハブ に導線を絞りました（定義は lib/hub-directory.ts）。

2. コンポーネント化と記事ページへの自動挿入

MDX 側にコンポーネントを書くのではなく、app/blog/[slug]/page.tsx の本文直後（フッターの手前）に <HubDirectory /> を配置しています。

  • MDX の編集は不要（過去記事・未来記事すべてに自動適用）
  • ハブの追加やラベル変更は lib/hub-directory.ts（＋表示は components/HubDirectory.tsx）の修正で全域反映
  • hub: true のハブ本体では非表示（一覧の二重表示を避ける）
  • 印刷時は既存の印刷用 CSS にあわせて .hub-directory を非表示

今後の期待効果

  • 読者目線：1セッションあたりの回遊と、興味テーマへのスムーズな誘導
  • SEO / クローラー目線：主要ハブへの内部リンクが記事全域から張られ、巡回しやすい構造になる
  • 自分目線：Obsidian や Web で記事を開いたとき、末尾を見るだけで脳内データベースの入口へワープできる

関連：

（本文 随時追記予定）