Gatsby.js のブログにサイトマップが欲しくなったので導入する手順をまとめてみました。
公式に沿って導入しています。
gatsby-plugin-sitemap のインストール
インストールはこれだけ。
npm install --save gatsby-plugin-sitemapsiteMetaData に URL を指定
本番環境で使っている URL を siteMetadata に設定して上げる必要があります。
// gatsby-config.js
siteMetadata: {
siteUrl: `https://www.example.com`,
},プラグインに指定
デフォルトで使うだけなら
plugins: [`gatsby-plugin-sitemap`]サイトマップに載せたくないページがあるなど、オプションを使いたいなら、以下をプラグインに追加
{
resolve: `gatsby-plugin-sitemap`,
options: {
//自分の好きなファイル名にしたい場合はoutputを追加。デフォルトは「sitemap.xml」
output: `/some-other-sitemap.xml`,
//除外したいページを指定する。「*」でワイルドカードも使える。
exclude: [`/admin/*`, `/tags/*`, `/tags/`, `/category/`],
},
},これで、本番にデプロイすると/sitemap.xmlのページが生成されます。
なお、ローカル開発環境でgatsby developした際は生成されません。
ローカルでみたい場合は、一度gatsby buildを実行して、/publicの中を確認してください。
