こんにちは、フルスタックエンジニアのryuです。
今回の記事では、Nuxt.jsでsitemapを生成する方法を解説します。sitemapを生成するためには、モジュールをインストールすれば完了です。サイトマップの更新日時(lastmod)や優先度(priority)の設定方法などオプションも併せて解説します。
※本ページには、プロモーション・アフィリエイトリンクが含まれています
目次
Nuxt.jsでsitemapを生成する方法解説
Nust.jsでどうやってsitemapを作ればいいの？
今回の記事では、Nuxt.jsでsitemapの生成方法を解説します。Nuxt.jsでブログなどを作成した際は、sitemapを作成すると思います。どうやってsitemapを作成したらよいのか詳しく解説します。
今回の内容は以下の通りです。
- sitemapモジュールのインストール
- Nuxt.jsのビルド
- sitemapにlastmodを入れる方法
- sitemapにpriorityを入れる方法
sitemapモジュールのインストール
まず、sitemapモジュールをインストールします。
npm install @nuxtjs/sitemap
もしくは
yarn add @nuxtjs/sitemapモジュールのインストールが完了したら、”nuxt.config.js”ファイルでモジュールを読み込むようにしましょう。
{
modules: [
'@nuxtjs/sitemap'
],
},
sitemap: {
path: '/sitemap.xml',
hostname: 'https://engineer-ninaritai.com/'
}pathでsitemapを生成する場所を指定します。hostnameでは、ベースのURLを指定します。
これで準備が完了です。
Nuxt.jsをビルドしてSitemapを生成する
次に、Nuxt.jsをビルドしてSitemapを生成します。
npm run generateコマンドを入力すると、“dist”ファイルの中にsitemap.xmlが生成されます。
sitemapはモジュールをインストールするだけで完了です。しかし、sitemapにURLのみしか表示されていないので、更新日時や優先順位などを表示する方法を解説します。
sitemapモジュールのオプション解説
ここからは、sitemapモジュールのオプションを解説します。ファイルの更新日時や優先度などをsitemapに含めてみましょう。
sitemapにlastmodを入れる方法
sitemapに更新日時(lastmod)を入れる方法を解説します。”nxut.config.js”ファイルを以下のように編集します。
sitemap: {
path: '/sitemap.xml',
hostname: 'https://engineer-ninaritai.com/',
defaults: {
lastmod: new Date() //←更新日時の設定
}
},先ほど入力したsitemapの設定の内部に”defaults”を入力して、そこにlastmodの設定を行います。
sitemapにpriorityを入れる方法
次に優先度(priority)の設定を入れる方法です。これも更新日時同様”nuxt.config.js”ファイルの設定を変更します。
sitemap: {
path: '/sitemap.xml',
hostname: 'https://engineer-ninaritai.com/',
defaults: {
priority: 1
}
},これで設定完了です。”npm run genareta”コマンドを使ってsitemapを生成してみましょう。
その他の設定については、こちらのドキュメントを参考にしてください。
Sitemap options – Nuxt Sitemap Module (nuxtjs.org)
Nuxt.jsでsitemapを生成する方法まとめ
今回の記事では、Nuxt.jsでsitemapを生成する方法を解説しました。まとめると以下のようになります。
- sitemapモジュールのインストール
- nuxt.config.jsでモジュールの設定
- ビルドしてsitemapを生成
Nuxt.jsでブログなどを作成するときに使ってみてください！
当ブログでは、Nuxt.jsやVue.jsに関する記事を発信しています。興味ある方は是非ご覧ください。
vue.js | インフラエンジニアになりたくて。 (engineer-ninaritai.com)
さらに詳しく勉強したい方はこちらの参考書がオススメです。
