typememo.jp

関連記事をブログ記事の最後に表示するようにしました

2021.01.09

#tech#gatsby
Takeru Yamada

Contents


まとめ

  • ブログ記事の末尾に 関連記事 を追加
  • 関連記事 は同じタグを持つ記事の中からランダムに3つ選ばれる
  • 関連記事 がない場合は なし と表示される

はじめに

どうも,たける@typememo です.

typememo.jp のブログ記事の末尾に 関連記事 を表示するようにしました.

この記事ではその実装方法のエッセンスをメモしておきます.

現状,こんな感じの表示になりました.

Figure – Related posts

本当はアイキャッチ画像と合わせてタイル状に配置しようと思っていたのですが, 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%) まで下げられるように努力します.

関連記事に飛んでいただけるととっても嬉しいです.

最後までお読みいただきありがとうございました.


執筆機材


関連記事