<p>Google アナリティクスを眺めていると、改善できそうな指標があることに気づきました。<br>
その指標はセッション辺りのページ閲覧数・平均セッション時間・直帰率ですが、それぞれの指標を出すと次の通りになります。</p>
<table>
<thead>
<tr>
<th>指標</th>
<th>直近 7 日の平均</th>
</tr>
</thead>
<tbody>
<tr>
<td>セッション辺りのページ閲覧数</td>
<td>1.17</td>
</tr>
<tr>
<td>平均セッション時間</td>
<td>00:00:26</td>
</tr>
<tr>
<td>直帰率</td>
<td>90.75%</td>
</tr>
</tbody>
</table>
<p>まあ悪そうな値ということが分かります。<br>
この原因として、記事を読み終わったあとに他のページへ遷移するリンクがタグぐらいしかなく、記事を読み終わった後はそのままタブを閉じてしまうからという仮説を立てました。</p>
<p>なので何かしらのリンク一覧を提供して、記事を読み終わった後に他のページへ遷移してもらえば先ほど挙げた指標が改善するのではないかというのが、今回の背景となります。</p>
<h2>関連記事を表示するようにしてみた</h2>
<p>ということで、各記事の下部に関連する記事の一覧を載せるようにしてみました。</p>
<p>実装は<a href="https://github.com/kubosho/blog.kubosho.com/blob/master/src/entry/relatedEntryList.ts">blog.kubosho.com/relatedEntryList.ts</a>にありますが、軽く説明すると記事に付けられたタグとカテゴリーを元に、同じタグやカテゴリーの記事を最大 5 件返します。</p>
<p>タグのほうを優先したのは、このブログにおけるカテゴリーは割とざっくりした分類になっているので、タグのほうがより関連する記事が表示されるのではないかと考えたためです。</p>
<h2>実際に表示されている様子</h2>
<p><a href="https://blog.kubosho.com/entry/remove-twitter-trend">Twitter の右サイドバーを非表示にする</a>では CSS 関連の記事が良い感じに表示されているはずです。</p>
<p><img width="800" height="553" src="https://blog-assets.kubosho.com/related_entry_list.png" alt="記事の下に表示されている関連記事の一覧" loading="lazy"></p>
<p>記事によってはあまり関連してなさそうな記事が表示される場合もあります。<br>
たとえば<a href="https://blog.kubosho.com/entry/wh-1000xm4-review">WH-1000XM4 を買うかどうか迷っている人は今すぐ買おう</a>という記事で表示されている関連記事は、ヘッドホンのレビューという内容からするとあまり関連してない記事が出ています。</p>
<p><img width="793" height="318" src="https://blog-assets.kubosho.com/related_entry_list_2.png" alt="ヘッドホンのレビュー記事だが、関連記事はF1について語った記事やAtomic Designに関する記事など関係なさそうなものが表示されている" loading="lazy"></p>
<p>この辺はタグの付け方を工夫するなどして、改善していきたいと思っています。</p>
<h2>余談: Google アナリティクスのオプトアウトについて</h2>
<p>ちなみに、このブログを見ているときに Google アナリティクスによる解析をされたくないという人は、<a href="https://blog.kubosho.com/policy">ポリシー</a>内の「Google アナリティクスによる解析のオプトアウト」からオプトアウトできます。<br>
「オプトアウトの有効化」というボタンを押して、次の文言がボタンの下に表示されていれば、Google アナリティクスによる解析はされないようにしています。</p>
<blockquote>
<p>オプトアウトが有効になっています。<br>
Google アナリティクスによるアクセス解析はおこなわれません。</p>
</blockquote>

(ブログ v6.0.0) 関連記事を追加した

<p>年末年始から継続してこのブログの改修をおこなっています。<br>
年末年始の前は<a href="https://github.com/kubosho/blog.kubosho.com/releases/tag/v2.5.0">v2.5.0</a>が最新でしたが、現在は<a href="https://github.com/kubosho/blog.kubosho.com/releases/tag/v5.0.0">v5.0.0</a>までバージョンが上がっています。</p>
<p><a href="https://github.com/kubosho/blog.kubosho.com/releases">Releases · kubosho/blog.kubosho.com</a><br>
この記事では v2.5.0 から v5.0.0 までの主要な更新を紹介していきます。</p>
<h2>v2.6.0</h2>
<p><a href="https://github.com/kubosho/blog.kubosho.com/releases/tag/v2.6.0">Release v2.6.0 · kubosho/blog.kubosho.com</a></p>
<p>styled-component を使うのをやめて、<a href="https://nextjs.org/docs/basic-features/built-in-css-support">Next.js でサポートしている CSS Modules</a>を使うようにしました。<br>
styled-components をやめた理由は次の通りです。</p>
<ul>
<li>まずコンポーネントを定義してそこからスタイルを定義していくことが、どうにも馴染めなかったこと</li>
<li>コンポーネントの判別をするのに、次の 2 つが混在してだるい
<ul>
<li>機能を持ったコンポーネント</li>
<li>スタイルを適用するためのコンポーネント</li>
</ul>
</li>
<li>CSS をそのまま書いたほうがツールとの相性が良いこと</li>
</ul>
<h2>v3.0.0</h2>
<p><a href="https://github.com/kubosho/blog.kubosho.com/releases/tag/v3.0.0">Release v3.0.0 · kubosho/blog.kubosho.com</a></p>
<p>プライバシーポリシーと題していたページを<a href="https://blog.kubosho.com/policy">ポリシー</a>と称するようにしました。<br>
それに伴ってパスの名前を <code>/privacy</code> から <code>/policy</code> に変更しています。</p>
<p>今まではプライバシーポリシーだけを書いていましたが、Amazon アソシエイトのことや免責事項を書きたくなったので、ページの名前とパスを変えました。</p>
<h2>v3.13.0</h2>
<p><a href="https://github.com/kubosho/blog.kubosho.com/releases/tag/v3.13.0">Release v3.13.0 · kubosho/blog.kubosho.com</a></p>
<p><a href="https://github.com/kubosho/blog.kubosho.com/commit/ee34efd2d5b06187db7f33fe5e877e32fd5f1f52">フォーカスのスタイルを改善</a>しました。</p>
<p><a href="https://forkwell.connpass.com/event/198726/">Front-End Study #3「『当たり前』をつくりだす Web アクセシビリティ」 - connpass</a>を見ていたら、フォーカスのスタイルについて話があったのですが、自分のブログを見返したところ Safari でフォーカス時のスタイルが適用されてなくて <code>outline</code> が表示されないことに気づいたので直しました。</p>
<h3>関連リンク</h3>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/:focus-visible#selectively_showing_the_focus_indicator">:focus-visible - CSS: カスケーディングスタイルシート | MDN</a></li>
</ul>
<h2>v4.0.0</h2>
<p><a href="https://github.com/kubosho/blog.kubosho.com/releases/tag/v4.0.0">Release v4.0.0 · kubosho/blog.kubosho.com</a></p>
<p>ブログのフィードの本文を今までは部分的な配信にしていましたが、全文を配信するように変更しました。<br>
部分配信にしていた理由としては、ブログに訪問させてアクセス解析の対象としたいということだったり、今後広告を表示したときに広告をクリックしてほしいという気持ちがあった気がします（あやふや）。</p>
<p>ただ全文配信のほうがさまざまな環境で読めてよりアクセシブルになりそうという考えを持ったのと、自分自身 Feedly でフィードを読んでいたときに全文配信されていないと嫌だなと思ったのを思い出したので、全文配信するように変更しました。</p>
<p><a href="https://github.com/kubosho/blog.kubosho.com/pull/603">BREAKING CHANGE: deliver to full text on feed reader by kubosho · Pull Request #603 · kubosho/blog.kubosho.com</a></p>
<p>変更自体は 1 行変更しただけの楽な変更ですが、部分配信から全文配信に変更することで互換性はなくなるのではと思い、breaking change 扱いにしています。</p>
<h3>関連リンク</h3>
<ul>
<li><a href="https://www.geekpage.jp/web/blogging-theory/rss-all-part.php">RSS 全文配信/部分配信:Geek なぺーじ</a></li>
<li><a href="https://digiper.com/topics/article/187.shtml">RSS フィードの全文配信と部分配信 | トレンドウォッチ | デジパ株式会社</a></li>
</ul>
<h2>v5.0.0</h2>
<p><a href="https://github.com/kubosho/blog.kubosho.com/releases/tag/v5.0.0">Release v5.0.0 · kubosho/blog.kubosho.com</a></p>
<p>ブログのフィードの配信フォーマットを RSS 2.0 から Atom に変更しました。</p>
<p><a href="https://github.com/kubosho/blog.kubosho.com/pull/604">Change feed format from RSS 2.0 to Atom by kubosho · Pull Request #604 · kubosho/blog.kubosho.com</a></p>
<p>自分自身はずっとフィードを Atom で配信していると思いこんでいたのですが、よく見たら RSS2.0 のフォーマットになっていてビックリしました。<br>
幸いにも<a href="https://validator.w3.org/feed/">W3C Feed Validation Service, for Atom and RSS</a>で valid にはなっていたので、フィード配信には問題なかったと思います。それはそうと思い込みは怖いですね。</p>
<h2>まとめ</h2>
<p>今年は、ブログ自体の更新だけでなく、ブログの記事もたくさん書いていきたいなあという気持ちです。</p>

学ぶ、考える、書き出す。

ブログの記事一覧