はてなブログの記事ページに同じカテゴリの記事を表示して回遊性をUP

直帰率が高い

飲んだお酒の紹介やはてなブログの改造ネタなど話題がバラバラで各順番もランダムなせいか、このブログは直帰率が高いです。（90％前後です）

はてなブログは回遊性が低い

はてなブログは特に古い記事への導線が弱いので、せっかく検索エンジン経由できてくれても、その記事だけ読んで終わりになってしまいます。

標準の機能では直帰率を下げるのは難しそう

はてなブログの最新記事や注目の記事を表示しているのですが、あまりにも脈絡の無いものが並ぶので、どれかの記事に興味を持ってきてくれても、似たような分野の記事をなかなか見てもらえないのです。

関連記事の実装について調べてみた

はてなブログのデザインから設定だけで使えるzenbackは遅いとあまり評判がよくなく、linkwithというサービスも良く分からないサービスに依存するのも嫌なので、結局この記事を参考に自作することにしました。

motemen.hatenablog.com

カテゴリ毎のRSSフィードを読み込んで関連記事を表示

こちらの方法はページ内からjavascriptで自分のブログの同じカテゴリの記事をRSS経由で取得して関連記事を表示する方法なのですが、外部サービスに依存しないで利用できるのがいい感じです。

因みにページを表示するたびにjavascriptでXMLのパースを行うので少し表示が遅れますが、記事の下なのであまり気づかないので良しとしました。

少しカスタマイズ

元々のjavascriptのままだと記事のタイトルの下に概要文を表示するようになっているのですが、スマホで見たときに言葉が多すぎて見づらいので、カスタマイズすることにしました。

といっても、元々のロジックが良くできているので、見た目を少しだけいじっただけです。

完成版の見た目

修正結果はこのような形になりました。

PCでの見た目

スマホでの見た目

本当はサムネイルを出したかった

本来は目を引くサムネイル画像を表示したかったのですが、なんとはてなブログのRSSにはサムネイル画像のURLが入っていないのです。

ちょっと驚きました。

記事のRSSのフィードって大抵サムネイル画像を入れていたりするので、まさか無いとは。

しょうがないので何とかそれっぽい見た目にでき無いものかといろいろなサイトを見て、今の見た目にしました。

でもやっぱりサムネイル画像を出したい

 RSSフィードではなく、カテゴリ毎のページを読み込めばサムネイル画像があるので、時間があるときにでも、RSSではなくカテゴリページ自体を読み込んで出力できるように改造したいと思います。

※因みにTOPページでは表示されません。こちらもいつか対応しようと思います。