vue.js

Nuxt.jsでsitemapを生成する方法解説【sitemapモジュールをインストールするだけ】

こんにちは、フルスタックエンジニアの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.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)

さらに詳しく勉強したい方はこちらの参考書がオススメです。

About me
大手メーカのIT部門→上場ベンチャーでインフラエンジニアやってます。エンジニア歴は8年目。 サーバ、ネットワーク、セキュリティ、クラウドについて投稿します。 AI、ARも勉強中です! youtubeでも技術ネタを発信していきます。↓のアイコンよりご覧ください!