Gatsbyでサイトマップを追加する方法

Google Search Consoleに登録するために、Gatsbyで作ったこのサイトにサイトマップを追加しました。gatsby-plugin-sitemapというプラグインを入れると簡単にsitemap.xmlを生成できます。

プラグインを入れてdeployするだけです。Gatsby、便利ですね。ものの5分で作業が完了しました。

gatsby-plugin-sitemapの導入手順

プラグインのウェブサイトに書いてある通りですが、一応日本語で説明を書いておきます。

1. パッケージのインストール

プラグインのパッケージをインストールします。

npm i -S gatsby-plugin-sitemap

2. gatsby-config.jsの編集

gatsby-config.jsに以下の設定を追加します。

• siteMetadataにsiteUrlを追加
• pluginsにgatsby-plugin-sitemapを追加

module.exports = {
  siteMetadata: {
    siteUrl: `https://rnote.work`,
  },
  plugins: [
    `gatsby-plugin-sitemap`
  ]
}

3. Buildする

サイトをbuildするとpublicフォルダにsitemap.xmlが作くられます。

gatsby build && gatsby serve

ちなみに、gatsby developではサイトマップは作られないのでご注意を！

オプション

ファイル名の変更や除外するディレクトリを設定できます。

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-sitemap`,
      options: {
        output: `/some-other-sitemap.xml`,
        exclude: ["/category/*", `/path/to/page`],
      }
    }
  ]
}

以上です！