uiuifree.com

- サイト制作のノウハウと最適化を目指して-

2020.6.8Nuxt.jsで動的にサイトマップを生成する方法

Nuxt.jsで動的にサイトマップを生成する方法

Nuxt.jsでサイト構築した時にSEO対策で必要になるサイトマップ
サーバサイドで個別にサイトマップを生成してサイトマップファイルを生成してもいいのですが、もっと簡単に実装する方法もあるので紹介します。

@nuxtjs/sitemap

@nuxtjs/sitemapはNuxt.jsでサイトマップを生成するモジュールです。

インストール

npm install --save @nuxtjs/sitemap

設定方法

nuxt.config.js にサイトマップの設定を行います。

nuxt.config.js
module.exports = {
  modules: [
    ...,
    '@nuxtjs/sitemap'
  ],
 sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://example.com',
    routes (callback) {
      const api = 'https://example.com/'
      axios.get(api)
        .then((response) => {
          const posts = response.data
          const routes = posts.map((post) => {
            return post.url
          })
          callback(null, routes)
        })
        .catch(callback)
    }
}

サイトマップオプション

項目 default 概要
routes [] 設定する動的サイトマップ
path /sitemap.xml 生成されたサイトマップのUR
hostname ホストネーム
cacheTime 1000 * 60 * 15 (15 Minutes) SSRのキャッシュ設定
exclude [] 除外する静的ページ
filter
gzip false .xml.gzgzipで圧縮されたサイトマップの作成を有効にします。
trailingSlash false 各ルートURLに末尾のスラッシュを追加します(例:/page/1=> /page/1/)

複数サイトマップを設定したい場合

nuxt.config.js
{
  sitemap: {
    path: '/sitempap/index.xml',
    hostname: 'https://example.com',
    sitemaps: [
      {
        path: '/sitemap/static.xml',
      }, 
      {
        path: '/sitemap/sitemap2.xml',
        exclude: ['/**'], // 静的ファイル除外
        routes (callback) {
           // 生成したいURL
        }
    ]
  }
}

このように設定することでSSRでも自由にサイトマップができました。
非常に便利ですので是非一度利用してみてください。

PROFILE

このサイトを運営してるuiuifreeです。
渋谷のベンチャー企業で2年ほど新規事業を担当した後にフリーランスエンジニアにキャリア転換。
求人サイトの開発が多くエンジニア/看護師/保育士などの分野でサイトを運営しています。

アウトプット中の技術

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)