gatsby.jsでのサイトマップ
gatsbyを使用したweb開発でのサイトマップは公式のプラグインである、gatsby-plugin-sitemap
を使用します。
導入方法・使用方法は以下を参照
https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/
サイトマップから除きたいページがある場合
生成されるサイトマップから除きたいページがある場合、以下のように該当するページのパスを文字列で指定します。
{
resolve: "gatsby-plugin-sitemap",
options: {
excludes: [`/contact`, `/thanks`]
}
}
特定のディレクトリパス配下のページを全て除外したい場合
次は、特定のディレクトリ名の配下のページを全てサイトマップから除きたい場合です。
これの記述は公式ドキュメントにはありませんでした。
また、/hoge/*
こんな感じで指定すればいけるのかなと思っていました。
しかし、
gatsby-plugin-sitemapのexcludesで指定されたパスはminimatchで全ページのパスと照合され一致しているパスが除外される形なので、minimatchで配下のパスを指定する必要がありました。(これが公式に記載がないから全然わからなかった。)
例えば、/posts/pokemon/1
/posts/pokemon/2
のようにあるページのpokemon配下のこの2ページをサイトマップから削除したい場合はこうます。
{
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を使用した時に特定のディレクトリ配下をサイトマップから除きたい場合の実装でした。