はじめに

SEO対策をする上で必要不可欠なサイトマップですが、今回はNuxt.js環境で静的ジェネレートを行った時に、サイトマップを自動で作成してくれる仕組みをご紹介していきます。

作成手順

Step1. モジュールのインストール

$ yarn add @nuxtjs/sitemap

Step2. 設定ファイルにモジュールを追加

// nuxt.config.js

export default {
  modules: [
    '@nuxtjs/sitemap',
  ],
}

Step3. サイトマップに関する設定を追記

// nuxt.config.js

export default {
  sitemap: {
    // サイトマップが作成される場所
    path: '/sitemap.xml',
    // サイトのURL
    hostname: 'https://papadays.com',
    // サイトマップから除外するURL
    exclude: [
      '/admin'
    ],
    // サイトマップの更新頻度（ms）
    cacheTime: 1000 * 60 * 60 * 24,
    // サイトの全ページのURL
    routes() {
      // URLが動的な場合、ここでaxios等を使って動的なURLの配列を生成する。以下は静的な例。
      const pageList = [
        ‘/sample.com’,
        ‘/sample.com/categoryList’,
        ‘/sample.com/tagList’,
        ‘/sample.com/about’,
        ‘/sample.com/post/123’,
        ‘/sample.com/post/456’,
      ]
      
      // サイトの全ページのURLの配列を生成して返す
      return pageList
    },
  },
}

以上で完了です。

さいごに

こちらの記事で紹介している自動デプロイの環境と組み合わせれば、常にサイトマップを最新に保てるため、おすすめです。
ただしデプロイされたサイトマップをサーチコンソールがすぐに更新してくれるとも限らないので、なるべく早くサイトマップを反映させたい場合は、サーチコンソールから手動でサイトマップを送信し直すと良いと思います。
それでは今回はこのへんで。