Vue/Nuxt

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

あきぞらです。

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が生成されているはずです。

-Vue/Nuxt

Copyright© あきぞらてっく , 2025 All Rights Reserved Powered by AFFINGER5.