More than 1 year has passed since last update.

[Gatsby.js] gatsby-plugin-sitemapで作るサイトマップで、特定のディレクトリ配下をサイトマップから除外する

Last updated at 2022-07-14Posted at 2022-06-28

gatsby.jsでのサイトマップ

gatsbyを使用したweb開発でのサイトマップは公式のプラグインである、gatsby-plugin-sitemap を使用します。
導入方法・使用方法は以下を参照
https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/

生成されるサイトマップから除きたいページがある場合、以下のように該当するページのパスを文字列で指定します。

gatsby-config.js

    {
      resolve: "gatsby-plugin-sitemap",
      options: {
        excludes: [`/contact`, `/thanks`]      
      }
    }

次は、特定のディレクトリ名の配下のページを全てサイトマップから除きたい場合です。
これの記述は公式ドキュメントにはありませんでした。
また、/hoge/*こんな感じで指定すればいけるのかなと思っていました。

しかし、
gatsby-plugin-sitemapのexcludesで指定されたパスはminimatchで全ページのパスと照合され一致しているパスが除外される形なので、minimatchで配下のパスを指定する必要がありました。（これが公式に記載がないから全然わからなかった。）

例えば、/posts/pokemon/1 /posts/pokemon/2 のようにあるページのpokemon配下のこの２ページをサイトマップから削除したい場合はこうます。

gatsby-config.js

    {
      resolve: "gatsby-plugin-sitemap",
      options: {
        excludes: [`/pokemon/**`]      
      }
    }

これで、pokemon配下のページを全てサイトマップから除くことができました。

修正後、開発環境でサイトマップの動作確認をしたい場合、まずpublic配下にsitemapを生成する必要があるのでgatsby buildをします。
その後、gatsby developで開発サーバーを起動します。

http://localhost:8000/sitemap/sitemap-index.xml を開くと

こんな感じでホストURL+サイトマップの形でサイトマップの置き場所を教えてくれます。

http://localhost:8000/sitemap/sitemap-0.xml
ホストをローカルホストに書き換えてアクセスするとサイトマップページにアクセスできます。

以上です。gatsby-plugin-sitemapを使用した時に特定のディレクトリ配下をサイトマップから除きたい場合の実装でした。