あきぞらです。
Nuxt.jsで開発をしていて、サイトマップを作成したい場面がありました。
そんなとき、簡単に作成できる方法があったので紹介していきます!
目次
nuxt/sitemapを使って簡単にサイトマップを作成
nuxt/sitemap
を使って簡単にサイトマップを作成することができます。
公式サイトはこちら。
公式でも十分わかりやすく書いてあります。
nuxt/sitemapのインストール
まずはインストールをします。
npmであればこちら。
$ npm install @nuxtjs/sitemap
yarnはこちら。
$ yarn add @nuxtjs/sitemap
nuxt.config.jsのmoduleに追記
nuxt.config.js
を修正します。
moduleの欄に@nuxtjs/sitemap
を追記します。
{ modules: [ '@nuxtjs/sitemap' ], }
サイトマップの設定を追記
次に、nuxt.config.js
にサイトマップの設定を書いていきます。
{ modules: [ '@nuxtjs/sitemap' ], }, { sitemap: { // サイトのホスト名を記載 hostname: 'https://example.com', // 除外するパスを記載 exclude: [ '/secret', '/admin/**' ], } }
オプションの記載は、
hostname
にサイトのホスト名を記載します。
exclude
の欄に除外するパスを記載します。
他にもオプションはありますが、詳しくはこちら。
ビルドしてファイルを生成する
build
を実行したあと、generate
を実行します。
npm
であれば、
$ npm run build ...(省略)... $ npm run generate
yarn
であれば、
$ yarn build ...(省略)... $ yarn generate
これで、dist
フォルダ配下にsitemap.xml
が生成されているはずです。