GatsbyJSでsitemap.xmlを出力する

現状は全てのページにリンクが張られている状態なので効果が薄いような気もしますがsitemap.xmlを出力します。

とりあえず出力するだけならgatsby-plugin-sitemapを使うのが楽です。

手順

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

yarn add gatsby-plugin-sitemap
# or
npm install --save gatsby-plugin-sitemap

②gatsby-plugin-sitemapを設定する

module.exports = {
  siteMetadata: {
    siteUrl: `https://www.deg84.com`, // siteUrlの設定が必要です
  },
  plugins: [
    // 中略
    {
      resolve: 'gatsby-plugin-sitemap',
      options: {
        sitemapSize: 5000, // 5000件毎にXMLファイルを分割する設定
      },
    },
  ],
}

結果

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url> <loc>https://www.deg84.com/hello-gatsby/</loc> <changefreq>daily</changefreq> <priority>0.7</priority> </url>
<!-- 中略 -->
<url> <loc>https://www.deg84.com/tags/gatsby/</loc> <changefreq>daily</changefreq> <priority>0.7</priority> </url>
<!-- 中略 -->
<url> <loc>https://www.deg84.com/</loc> <changefreq>daily</changefreq> <priority>0.7</priority> </url>
</urlset>

src/pages配下のページと、createPagesで出力したページが対象になるみたいです。404は対象外。

さいごに

今回は基本デフォルトの設定を使いましたがカスタマイズ可能です。詳しくはこちら

lastmodは出力しても良いかなと思うので様子を見て対応したいと思います。