【Nuxt.js】【すぐできる】sitemap.xmlを作成する方法！

あきぞらです。

Nuxt.jsで開発をしていて、サイトマップを作成したい場面がありました。

そんなとき、簡単に作成できる方法があったので紹介していきます！

nuxt/sitemapを使って簡単にサイトマップを作成

nuxt/sitemapを使って簡単にサイトマップを作成することができます。

公式サイトはこちら。

公式でも十分わかりやすく書いてあります。

Nuxt Sitemap Module

Introduction

https://sitemap.nuxtjs.org

Sitemap Module for Nuxt

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の欄に除外するパスを記載します。

他にもオプションはありますが、詳しくはこちら。

Nuxt Sitemap Module

Sitemap options

https://sitemap.nuxtjs.org/usage/sitemap-options

Sitemap options module

ビルドしてファイルを生成する

buildを実行したあと、generateを実行します。

npmであれば、

$ npm run build
...(省略)...
$ npm run generate

yarnであれば、

$ yarn build
...(省略)...
$ yarn generate

これで、distフォルダ配下にsitemap.xmlが生成されているはずです。