2019/05/11

GatsbyJSでサイトマップを作成する

gatsby-plugin-sitemapをインストール
とりあえず使う
オプション設定
感想

そういやGatsbyJSでサイトマップでどうやって作るんだということで導入してみました。

gatsby-plugin-sitemapをインストール

サイトマップを作成するために、gatsby-plugin-sitemapというプラグインが用意されています。
npmもしくはyarnでインストールします。

npm install --save gatsby-plugin-sitemap

or

yarn add gatsby-plugin-sitemap

インストールが完了したことを確認出来たら早速設定していきます。

とりあえず使う

siteMetadataの項目にsiteUrlを追加します。

gatsby-config.js

siteMetadata: {
    siteUrl: `https://nakawork.net/`
},
plugins: [`gatsby-plugin-sitemap`]

追加し終えたらnpm run buildを実行してください。
publicディレクトリ直下にsitemap.xmlが追加されていることが確認できると思います。
とりあえずサイトマップを作成したいだけの場合は、これでOKです。

このプラグインはproduction用ビルドの時だけ動きます。
サイトマップの中身をテストしたい場合はgatsby build && gatsby serveを実行すると良いです。

オプション設定

このプラグインでは、デフォルトで以下のように設定されています。

export const defaultOptions = {
  query: `
    {
      site {
        siteMetadata {
          siteUrl
        }
      }
      allSitePage {
        edges {
          node {
            path
          }
        }
      }
  }`,
  output: `/sitemap.xml`,
  exclude: [
    `/dev-404-page`,
    `/404`,
    `/404.html`,
    `/offline-plugin-app-shell-fallback`,
  ],
  createLinkInHead: true,
  serialize: ({ site, allSitePage }) =>
    allSitePage.edges.map(edge => {
      return {
        url: site.siteMetadata.siteUrl + edge.node.path,
        changefreq: `daily`,
        priority: 0.7,
      }
    }),
}

上記の設定を変更するにはgatsby-config.jsに変更を加えます。
例えば、出力されるサイトマップのファイル名と、除外するURLを追加するには以下のように設定します。

gatsby-config.js

plugins: [
  {
    resolve: `gatsby-plugin-sitemap`,
    options: {
      output: `/hoge-sitemap.xml`,
      exclude: [`/path/to/page`]
    }
  }
]

これでビルド時のサイトマップのファイル名はhoge-sitemap.xmlとなります。
また、/path/to/pageというurlがサイトマップから除外されます。

感想

サイトマップの作成が予想以上に簡単に出来ました。
GatsbyJSではプラグインが豊富に用意されています。
気を配るべきサイトのデザインや記事の作成に集中できるので、非常に嬉しいですね。