Nuxt.jsでsitemap.xmlを生成する

@nuxtjs/sitemapを使ってsitemap.xmlを生成する機会があったので、設定方法についてメモ。

設定方法

今回は以前作成したデモサイトをベースに設定を試してみます。
サイト構成は以下のようになっていて、新着情報詳細だけ動的なURLになります。

• トップ(pages/index.vue)
• 会社概要(pages/company.vue)
• 新着情報一覧(pages/info/index.vue)
• 新着情報詳細(pages/info/_slug/index.vue)

まずはNuxt.jsの環境にインストールします。

yarn add @nuxtjs/sitemap

npmの場合は下記になります。

npm install @nuxtjs/sitemap

nuxt.config.jsのmodulesに@nuxtjs/sitemapを追加します。

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

これで準備ができたのでブラウザで/sitemap.xmlにアクセスしてみると、以下のように新着情報詳細以外の静的なページのみが追加されました。

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  <url>
    <loc>http://localhost:3000/company</loc>
  </url>
  <url>
    <loc>http://localhost:3000/info</loc>
  </url>
  <url>
    <loc>http://localhost:3000/</loc>
  </url>
</urlset>

sitemap.xmlの設定の追加は、nuxt.config.jsにsitemapを追加して行います。

export default {
  modules: [
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    hostname: 'https://example.com',
    exclude: [
      '/company'
    ],
    routes: [
      '/sample/aaa',
      {
        url: '/sample/bbb',
        changefreq: 'daily',
        priority: 1,
        lastmod: '2017-06-30T13:30:00.000Z'
      }
    ]
  }
}

上記の場合、hostnameがホスト名、excludeが除外するページパス、routesが追加したいページの指定になります。
再度ブラウザで確認してみると、設定内容の反映が確認できました。

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  <url>
    <loc>https://example.com/sample/aaa</loc>
  </url>
  <url>
    <loc>https://example.com/sample/bbb</loc>
    <lastmod>2017-06-30T13:30:00.000Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/info</loc>
  </url>
  <url>
    <loc>https://example.com/</loc>
  </url>
</urlset>

sitemapのroutesでは関数の指定もできるので、これを使って動的なページの追加も行えます。

const axios = require('axios');
export default {
  modules: [
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    hostname: 'https://example.com',
    exclude: [
      '/company'
    ],
    routes: async () => {
      const res = await axios.get(
        process.env.API_URL,
        {
          headers: {
            'X-API-KEY': process.env.API_KEY
          }
        }
      )
      return res.data.contents.map((info) => `/info/${info.id}`)
    }
  }
}

ブラウザで確認すると、新着情報詳細も追加されていることが確認できました。

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  <url>
    <loc>https://example.com/info/z4yk0ox_tqa</loc>
  </url>
  <url>
    <loc>https://example.com/info/1hpnqckp0j_i</loc>
  </url>
  <url>
    <loc>https://example.com/info/e5evol2afqgv</loc>
  </url>
  <url>
    <loc>https://example.com/info/6irp7tjwo_qj</loc>
  </url>
  <url>
    <loc>https://example.com/info/v249mt0p71</loc>
  </url>
  <url>
    <loc>https://example.com/info/3hn_7p6e1m</loc>
  </url>
  <url>
    <loc>https://example.com/info</loc>
  </url>
  <url>
    <loc>https://example.com/</loc>
  </url>
</urlset>