Loading...

はてなブログカスタマイズ。はてなブログの関連記事を外部サーバーで生成して本文に追加するようにした。

f:id:nasust:20161207160032j:plain

自分のブログの記事下に関連記事を表示するようにした。 ちょっと違うのがブログの本文の一部として表示していることだ。

はてなブログのカスタマイズで記事下に関連記事を表示する場合は、 JavaScriptで頑張って動的に表示するか、外部サービスを使用して表示するかだ。

でもその方法だとGoogleでクロールしてくれるか微妙だし、動的だから表示も遅い。 一番良い方法は、手動で厳選して関連記事のリンクを本文に入れることだ。

http://www.pojihiguma.com/entry/naibu-link-effect http://www.pojihiguma.com/entry/naibu-link-effect

ポジ熊さんの記事にも手動で行うのが良いと書かれている。 (ポジ熊さんへ、SEO系の記事を参考にしています!! ありがとうございます!!)

それと問題じゃないかもしれないが、手動だと古い記事の関連記事へのリンクが、古い記事のままになってしまう。 できれば検索で古い記事に辿り着いても、新しい記事に誘導したい。

手動が良いけど、それは僕にとって超めんどくさい。 だからプログラマーらしく解決しました。

Rubyスクリプトで関連記事のリンクを生成して、本文に末尾に追加するようにした。 本文に追加の形なので静的に表示されるので表示が速い。 自作のプログラムなので関連記事の選び方も調整できる。 そして古い記事でも、新しい関連記事へのリンクに入れ変える事ができる。

ちょっと得なのが、無料はてなブログのモバイル表示でも、本文なので関連記事のリンクが表示される。

こうやってブログの更新を効率的にしていきたいと思う。

以下、スクリプトの技術的内容を軽く解説

大した技術は使っていないのでRubyが書ければ誰でもできる。 以下の様に実装している。

  1. rubyのatomutilでブログの全部のエントリー情報をsqlite3に記録する
  2. エントリのカテゴリから、同じカテゴリの記事一覧を生成する。
  3. 投稿時間でソートして6記事のリンクを選ぶ。ちなみに現在は、3記事最新、3記事ランダムで選んでいる。
  4. 関連記事のアイキャッチが画像を取得する。これはatomutilで取得できないので、直接ブログのHTMLを取得してmetaタグのog:imageのURLをNOKOGIRIで検出している。
  5. アイキャッチ画像が無い場合は、代替えの画像を表示するようにする。
  6. atompubでブログの記事本文を取得して、関連記事が有無を検出。具体的には<!!-- 関連記事ここから -->のような文章を検出している。無ければ追加、有れば入れ替えしている。
  7. 関連記事のHTMLを生成して本文に追加する。アイキャッチ画像はサムネイル用に縮小する。
  8. atomutilで記事をアップデートする。
  9. 2回目以降の実行は、関連記事を生成した時刻を記録しているので、7日以上古かったら関連記事を入れ替えるようにしている。

今後は、キーワード検出と機械学習でより良い関連記事を生成するようにアップデートしたい。