[Gatsby.js] gatsby-plugin-sitemapでサイトマップを生成する

GatsbyでSEO戦略のため、サイトマップを設置してSearch Consoleに登録してみました。

プラグインのインストール

今回は公式のプラグインであるgatsby-plugin-sitemap を使用しました。

npm install gatsby-plugin-sitemap

設定

デフォルトの設定では siteMetadata.siteUrlが読み込まれます。またサイトマップから除外したいページがあればパスで指定します。

    siteMetadata: {
      siteUrl: `https://www.example.com`,
    },
    
    //中略

    {
      resolve: "gatsby-plugin-sitemap",
      options: {
        excludes: ["/404", "/404.html", "/thanks"],
      },
    },

ローカルでサイトマップの確認

以下のコマンドでビルドすると、public配下にsitemapが自動的に生成されます。

npx gatsby build

その後、開発サーバーを起動してみます。

npx gatsby develop

http://localhost:8000/sitemap-index.xml , http://localhost:8000/sitemap-0.xml

にアクセスしてみると生成されたサイトマップを確認できます。

ちなみにGoogleは、1つのサイトマップファイルに対して最大50,000件のURLまたは50MBのファイルサイズという制限を設けています。gatsby-plugin-sitemapは、デフォルトで上限が45,000になっていて、それを超えるたびに新しいサイトマップファイルが自動で生成されます。

Google Search Consoleでサイトマップを登録

本番にデプロイしたあと、Google Search Consoleで sitemap-index.xml を登録すると成功できるかと思います。

以上で、Gatsbyでプラグインを使ってサイトマップを登録する流れを記録しました。これでSEOの改善につながるかと思います。