ブログを運営していると、「回遊率」という言葉が気になりはじめます。
回遊率とは、1人の読者がサイト内で複数のページを見てくれる割合のことです。 1記事だけ読んで離脱するのではなく、「次の記事も読みたい」と思ってもらえる状態が、回遊率の高いサイトです。
WordPress を使っていたころは、プラグインを入れれば関連記事が自動で表示されました。 しかし Next.js で自分のブログを作り直すとき、プラグインという選択肢はありません。 回遊率を上げたければ、自分で仕組みを作るしかありませんでした。
回遊率を上げるためにできることを整理した
最初に、「どんな導線を設けると読者が次の記事へ進みやすくなるか」を整理しました。
私が考えた導線は3種類です。
① 前後ナビゲーション
記事の最後に「前の記事」「次の記事」へのリンクを置くものです。 日付順で隣り合う記事へ移動できる、最もシンプルな導線です。
同じシリーズを連続して読んでいる読者には有効ですが、テーマが変わると「前の記事」が全く関係ない記事になることもあります。
② カテゴリー・タグページ
カテゴリーやタグごとに記事一覧を表示するページです。 「同じテーマの記事をまとめて読みたい」という読者に向けた導線で、特定のテーマに興味を持った読者が自分で探せるようになります。
③ 関連記事
記事ページの下部に、今読んでいる記事と関連性の高い記事を自動表示するものです。 読者が「次に何を読めばいいか」を考えなくても、自然に次の記事へ進めます。
3つの導線で役割が違う
整理してみると、3つの導線はそれぞれ性質が異なることがわかりました。
| 導線 | 読者の状態 | 提供するもの | |---|---|---| | 前後ナビ | 連続して読んでいる | 次の記事への自動的な誘導 | | カテゴリー・タグ | 自分で探している | 同テーマの記事一覧 | | 関連記事 | 読み終わった直後 | 次に読む記事の提案 |
前後ナビは「流れで読む読者」向け、カテゴリー・タグページは「探している読者」向け、関連記事は「読み終わった読者」向けです。
どれか1つだけでは読者のすべての状態をカバーできません。 3つを組み合わせることで、どのような状態の読者にも次の記事へ進む導線を提供できます。
ブログサイトを運営する者としては、せっかく書いた記事なので、なるべく多くの方に読んでもらいたい、なるべく多くの記事を読んでもらいたいと強く願っています。 そのためには、サイトに訪問してくれた読者が迷うことなく、記事を見ることができるように準備することは大切なことだと考えています。 WordPress であればプラグインやテーマによって、そうした仕組みを簡単に作ることができますが、Next.js でゼロからサイトを構築していくと、すべて自分で作る必要があります。 今回の作業では、あらためて、どうやったらより多くの記事を見てもらえるようになるか、サイトに訪問してくれた方が便利だと感じてもらえるかを考えるきっかけになり、自分で作っていく過程も楽しく作業することができました。
実装の順序を決めた
3つの導線を同時に実装することはできないため、優先順位を決めました。
まず前後ナビから着手しました。 実装が最もシンプルで、全記事を日付順に並べるだけで成立するからです。
次にカテゴリー・タグページを実装しました。 ヘッダーにカテゴリーリンクを設置していたものの、リンク先のページが存在しないという状態を解消するためです。 リンクがあって遷移先がない状態は、読者の信頼を損ねると判断しました。
最後に関連記事を実装しました。
関連記事の選定には tags と category のデータが必要なため、カテゴリー・タグページが完成していることが前提になります。
実装の順序には依存関係があり、この順番が自然な流れでした。
関連記事の選び方で迷ったこと
関連記事の実装では、「どうやって関連性の高い記事を選ぶか」という設計の部分で一番時間をかけました。
最初に検討したのは「同じカテゴリーの記事をすべて表示する」というシンプルな方法です。 しかしカテゴリーは大きな分類なので、内容が近くない記事が混じる可能性があります。
次に「タグが1つでも一致する記事を優先する」という方法を検討しました。 タグはカテゴリーより細かい分類なので、タグが一致する記事は内容が近い可能性が高いです。
最終的に採用したのは、タグ一致を優先してカテゴリーで補完する2段階の方式です。
タグが1つでも一致する記事を優先して選ぶ
↓ 件数が足りない場合
同じカテゴリーの記事で補完する
↓
合計最大6件に絞り込む
「なるべく内容が近い記事を優先しつつ、件数も確保できる」という点でこの設計に落ち着きました。
実装の詳細はメインブログに書いています。
Next.js構築｜第17回 個別記事ページへの関連記事表示の実装
導線を実装してから気づいたこと
3つの導線を実装してから、記事を書く前の段階で意識が変わりました。
関連記事はタグの一致で選ばれます。つまり、タグを丁寧に設定しておくほど、関連記事の精度が上がります。
実装前は、タグは「なんとなく付けるもの」でした。 実装後は、「このタグを付けておくと、この記事と関連記事としてつながる」という意識で記事を書くようになりました。
導線の仕組みを自分で作ったことで、記事の書き方にまで影響が出てきたのは、予想していなかった変化です。
今後の課題
現在の関連記事はタグとカテゴリーをもとに、日付の新しい順で選ばれます。
しかしこれは「本当の意味での関連記事」ではありません。 読者が実際に読んだかどうか、どれだけ読まれているかという情報が反映されていないからです。
将来的には、閲覧数データをもとに「よく読まれている関連記事」を優先表示する仕組みに改善したいと考えています。 現時点では閲覧数のデータベースがないため、まずはデータの蓄積を始めることが次のステップです。
回遊率を上げる仕組みは、一度作れば終わりではなく、データが積み重なるほど精度が上がっていくものだと実感しています。
