Contents
まとめ
- ブログ記事の末尾に 関連記事 を追加
- 関連記事 は同じタグを持つ記事の中からランダムに3つ選ばれる
- 関連記事 がない場合は なし と表示される
はじめに
どうも，たける@typememo です．
typememo.jp のブログ記事の末尾に 関連記事 を表示するようにしました．
この記事ではその実装方法のエッセンスをメモしておきます．
現状，こんな感じの表示になりました．
本当はアイキャッチ画像と合わせてタイル状に配置しようと思っていたのですが， Gatsby.JS でのアイキャッチ画像データのやりとりがわからなかったので諦めました．
1–2ヶ月後にアイキャッチ画像取得に再チャレンジしたいと思います．
それでは，参りましょう．
参考文献
実装内容
実装内容の概要を箇条書きで説明すると，こんな感じです．
- GraphQL で
allMarkdownRemark.edgesを取得する - 同じタグを持つブログ記事をランダムに3つ選択する
- 同じタグを持つブログ記事がない場合は “なし” と表示する
allMarkdownRemark.edges を取得する
GraphQL に
allMarkdownRemark.edges.node.frontmatter.[slug, tags, title]
が欲しいとリクエストを書きます．
const RelatedPostsQuery = graphql`
{
allMarkdownRemark {
edges {
node {
frontmatter {
slug
tags
title
}
}
}
}
}
` GraphQL からのレスポンスを受け取ります．
const data = useStaticQuery(RelatedPostsQuery)
const {
allMarkdownRemark: {
edges,
},
} = dataあとは
edges.node.frontmatter.[slug, tags, title]
を使いたい時に呼び出して使えば良いです
ランダムに記事を選定するために記事をシャッフルする
ページを訪れたユーザーのクッキーとかを使ってリコメンドする， なんてことはできないのでランダムに記事を3つ選んで表示するようにしました．
ランダムに記事を選ぶときは，関連記事をシャッフルしてその中から3つ選ぶ，という実装にしました．
なのでデプロイの度に異なる関連記事が表示されるようになります．
シャッフルの方法はよくあるアルゴリズムを使いました．
const shuffle = ([...array]) => {
for (let i = array.length - 1; i >= 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
array[i] = array[j]
array[j] = array[i]
}
return array
}特定の共通タグは関連記事としては無視するようにした
なお #tech #life #science タグは多くの記事に共通しているタグなので， 関連記事の対象からは外しました．
これらのタグを対象外にしておかないと，
docker の記事の関連記事が python ってどういうことだよ？
となってしまうので．
おわりに
typememo.jp のブログ記事の末尾に関連記事を表示するようにしましたよ，という報告記事でした．
これで少しでも直帰率が低下することを期待しています．
Google 検索ではヒットしない SEO の弱い記事の閲覧率が増えることを願うばかりです．
2021年は 直帰率: 70% (現在 直帰率: 85%) まで下げられるように努力します．
関連記事に飛んでいただけるととっても嬉しいです．
最後までお読みいただきありがとうございました．
執筆機材
- Xiser Pro Trainer (ステッパー)
- HHKB Professional 墨 (キーボード)
- HHKB キートップセット 白 (キートップ)
- Apple Magic Mouse 2 (マウス)
- Apple MacMini (PC)
- iiyama Display 27inch FullHD (ディスプレイ)
- KINTO UNITEA 550ml (コップ)
