Tips2021.04.02

Gatsbyでブログやメディアを作る時に使いたいプラグイン

Gatsbyでブログやメディアを作る時に必須なプラグインがあります。

いくつかサイトを作っているうちに大体同じプラグイン使っているな、というものが出揃って来ました。

中には使うのを忘れると致命的なプラグインも存在するので、今回はいつも忘れずに使っているプラグインを紹介します。

目次

サイトマップを生成
URLを正規化
Google Analyticsを設定
react-helmetの内容をSSR
フィードを生成
まとめ

サイトマップを生成

サイトマップはクローラーにページの存在を伝えるためにどのようなサイトでも作っておいて損はありません。
そのためサイトを作る際には必ずサイトマップを作るようにしています。

Gatsbyでサイトマップを生成するためにはgatsby-plugin-sitemapを使います。

[gatsby-plugin-sitemap | GatsbyJS](https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap/)

gastby-config.jsに追加するだけで使うことができます。
デフォルトではビルドして静的に作られるHTMLのパスがすべてサイトマップにのりますが、都合が悪いこともあるためオプションを指定します。

1
2
3
4
5
6
{
  resolve: `gatsby-plugin-sitemap`,
  options: {
    exclude: [`取り除きたいパス/**/*`]
  }
}

Options.excludeにパスを指定するとそのパスはサイトマップから取り除かれます。

URLを正規化

linkタグの1つにcanonicalがあります。
指定をすることで類似ページや重複ページを正規化が可能です。

この記事では説明しませんが、URLの正規化について知りたい場合は下記リンクを参照してみてください。

[重複した URL を統合する - Search Console ヘルプ](https://support.google.com/webmasters/answer/139066?hl=ja)

Gastbyでcanonicalを指定するにはgatsby-plugin-canonical-urlsを使います。

[gatsby-plugin-canonical-urls | GatsbyJS](https://www.gatsbyjs.org/packages/gatsby-plugin-canonical-urls/)

1
2
3
4
5
6
{
  resolve: `gatsby-plugin-canonical-urls`,
  options: {
    siteUrl: `https://example.com`
  }
}

このように設定することで各ページのheadに

1
<link rel="canonical" href="https://example.com/ページのパス" data-baseprotocol="https:" data-basehost="example.com"/>

のようなコードを生成されます。

Google Analyticsを設定

多くサイトで使われているであろうアクセス解析のGoogle Analytics。
Gatsbyではgatsby-plugin-google-analyticsを使うことで簡単に設定が可能です。

[gatsby-plugin-google-analytics | GatsbyJS](https://www.gatsbyjs.org/packages/gatsby-plugin-google-analytics/)

1
2
3
4
5
6
{
  resolve: `gatsby-plugin-google-analytics`,
  options: {
    trackingId: 'UA-○○○○○○○○-○'
  }
}

プラグインのオプションでトラッキング用のIDを設定するだけで、ページへのアクセスをトラッキングしてくれるようになります。

react-helmetの内容をSSR

Reactで動的にheadのタグを更新するためにreact-helmetは有名なパッケージです。
SEOを考慮するサイトでは適切なheadタグの指定はかかせません。

Gatsbyでもreact-helmetを使うことができますが、注意点があります。
それはGatsbyではreact-helmetの内容がデフォルトでSSRされないことです。

開発時は開発者ツールなどでmetaタグが設定されていることを確認することになるので、うっかりしてしまいがちです。
Gatsbyでreact-helmetをSSRにするはgatsby-plugin-react-helmetを使用します。

[gatsby-plugin-react-helmet | GatsbyJS](https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet/)

1
2
3
plugins: [
  `gatsby-plugin-react-helmet`
]

このようにプラグイン名を記述するだけ特にオプションを設定することなくSSRできます。
標準で搭載してほしいくらい必要な機能なので、忘れないうちに入れてしまうこと推奨です。

フィードを生成

Gatsbyはマークダウンをデータ化してHTMLを生成したり、WordPressやContenfulのデータをAPIでやりとりすることできます。
データを利用して静的なHTMLを生成できるのでブログやメディアサイトとの相性がとても良いです。

ブログやメディアを作っていると必要になることが多いRSSフィード。
自分で用意するのは手間ですがGatsbyではgatsby-plugin-feedを使うことで、簡単にRSSフィードを生成できます。

[gatsby-plugin-feed | GatsbyJS](https://www.gatsbyjs.org/packages/gatsby-plugin-feed/)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
  resolve: `gatsby-plugin-feed`,
   options: {
     feeds: [
       {
         serialize: ({ query: { allContentfulPost } }) => {
            return allContentfulPost.edges.map(edge => {
              return {
                title: edge.node.title,
                url: `${url}/${edge.node.slug}`,
                guid: `${url}/${edge.node.slug}`,
                description: edge.node.body.body
               }
            })
        },
        query: `
          {
            allContentfulPost {
              edges {
                node {
                  title,
                  slug,
                  body {
                    body
                  }
                }
              }
            }
          }
          `,
         output: '/rss.xml'
      }
    ]
  }
}

これはcontentfulからデータを取得するgatsby-source-contentfulを合わせて使う場合の設定です。

QueryにGatsbyでデータを取得するためのクエリを指定することで、searializeでデータを受け取ることができます。
Searializeで返したデータをoutputで指定したファイルに生成してくれます。

まとめ

Gatsbyはプラグインも充実していて、自分でやるとめんどくさいこともプラグインですぐに実現できることが多くあります。

今回紹介したプラグインは**ブログやメディアなどSEOを考慮したサイトでは特に使いたいプラグイン**です。

まだ使ったことのないプラグインがあれば使ってみてはどうでしょうか！