タグページへのリンク作成

タグページの作成 にて、タグごとの記事一覧を作成しました。

記事内に表示されているタグの部分を、このページへのリンクに修正します。
SEO的にも関連ページへの内部リンクはあったほうが良いでしょう。

記事ページのテンプレート修正

タグに設定されている単語はGraphQLにて配列形式で取得しています。

markdownRemark(fields: { slug: { eq: $slug } }) {
  html
  frontmatter {
    title
    tags
  }
}

この配列を使って、以下のようなURLへのリンクを生成します。

タグページ(gatsby)

記事ページのテンプレートを修正します。
/src/template/blog-post.js

こんな感じですね。

タグ：{post.frontmatter.tags.map(( value , id ) => (
<Link 
  key={id}
  to={`/tags/${kebabCase(value)}/`}
>
    {value}
</Link>
))}

記事上部のタグ部分がリンクになりました。
タグで絞り込んだ一覧ページへ遷移できるようになりました。

タグ一覧ページの内容

現在はトップページとほぼ同じで、該当するタグに合致する記事のみ絞り込む状態になっています。 できれば、SEOの対策としてタグごとの概要などをかければいいですが、一旦このままにしておきます。

とりあえずですが、タグのリンクはできました。結構簡単にできます。Gatsbyの情報はあまりないのですが、このへんまでなら結構見つかります。もっと独自の改修をしようと思うと困ることが多いです。

各記事の下部とかに、「同じタグのおすすめ記事」のような内部リンクを足して回遊をしやすくする機能を追加する予定もあります。また実装したら記事にします。