Nuxt.jsでコーポレートサイトやメディアサイトなどを作成する際でも、やはりSEO対策というのは重要になってきます。そんな時にやっておきたいのがサイトマップの導入です。Nuxt.jsではサイトマップを自動的に生成する公式のモジュールが用意されているので、今回はその導入から設定までまとめてみたいと思います。  

Nuxt.jsでサイトマップの導入と基本的な設定

ではサイトマップ用のモジュールである「@nuxtjs/sitemap」をインストールしていきます。下記のコマンドを実行します。

$ npm install --save @nuxtjs/sitemap
もしくは
$ yarn add @nuxtjs/sitemap

  インストール後はpackage.jsonに追加されているのが確認できます。そしてこの後はサイトマップの設定を行なっていきます。 【package.json】

{
  "dependencies": {
    "@nuxtjs/sitemap": "^2.4.0",
    .......
  },
  .......
}

  サイトマップの設定は「nuxt.config.js」に記述していきます。「modules」のオプションでモジュールを指定し、「sitemap」のオプションでサイトマップの設定を行なっていきます。基本的には「hostname」のキーに対象となるホスト名を指定する形でOKですが、「path」のキーではサイトマップのファイル名を指定できたり、「exclude」のキーではサイトマップの対象外とするルーティングを配列の形で指定できます。エラーページやログインが必要なページを含めておいたりします。 【nuxt.config.js】

export default {
  .......
  modules: [
    '@nuxtjs/sitemap',
    .......
  ],
  sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://example.com',
    exclude: [
      '/404',
      '/login',
      '/login/admin'
    ]
  }
}

  実際にビルドを実行すると、distフォルダ配下にサイトマップのXMLファイルが生成されており、ルーティングに合わせたURLがリストされているのが確認できます。 【dist/sitemap.xml】

<?xml version="1.0" encoding="UTF-8"?>
<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</loc>
  </url>
  <url>
    <loc>https://example.com/about/</loc>
  </url>
  <url>
    <loc>https://example.com/contact/</loc>
  </url>
  ......
</urlset>

  後は本番用のサーバーにビルドファイルと合わせてアップロードしていきます。アップロード後はサーチコンソールなどでクローラーに認識されるように設定などを行います。  

サイトマップを動的ルーティングに対応させる

上記の方法では、静的ルーティングの場合には問題ないのですが、動的ルーティングの場合にはURLがリストアップされないので、以下のように「route」オプションで指定する必要があります。今回はAxiosでAPIから非同期でページのデータを読み込み、動的ページを表示させる前提で進めています。コンテンツの取得と同じようにAPIからデータを取得し、そこからページのIDを取得し、ルーティングのパスに変換させ配列にまとめていきます。 【nuxt.config.js】

import axios from 'axios'

export default {
  .......
  sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://example.com',
    exclude: [
      '/404',
      '/login',
      '/login/admin'
    ],
    routes(callback) {
      axios.get('https://example.com/api/blog/')
        .then((response) => {
          const routeList = response.data.map((post) => {
            return `/blog/${post.ID}`
          })
          callback(null, routeList)
        })
        .catch(callback)
    }
  }
}

  ちなみに複数のAPIのエンドポイントが存在する場合には、下記のようにそれぞれ個別にデータを取得してルーティングの配列を作成し、最後に1つの配列にまとめて一括でサイトマップの情報として渡してあげるようにします。

routes(callback) {
  Promise.all([
    axios.get('https://example.com/api/blog/'),
    axios.get('https://example.com/api/news/'),
    axios.get('https://example.com/api/column/')
  ])
  .then((axios.spread((blog, news, column))) => {
    const routeBlogList = blog.response.data.map((post) => {
      return `/blog/${post.ID}`
    })
    const routeNewsList = news.response.data.map((post) => {
      return `/news/${post.ID}`
    })
    const routeColumnList = column.response.data.map((post) => {
      return `/column/${post.ID}`
    })
    callback(null, routeBlogList.concat(routeNewsList, routeColumnList))
  })
  .catch(callback)
}

  これでビルド後に生成されたサイトマップを確認すると実際に動的ルーティングのURLもきちんと含まれていることが確認できました。 【dist/sitemap.xml】

<?xml version="1.0" encoding="UTF-8"?>
<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</loc>
  </url>
  <url>
    <loc>https://example.com/about/</loc>
  </url>
  <url>
    <loc>https://example.com/contact/</loc>
  </url>
  <url>
    <loc>https://example.com/blog/100</loc>
  </url>
  <url>
    <loc>https://example.com/blog/101</loc>
  </url>
  <url>
    <loc>https://example.com/blog/102</loc>
  </url>
  ......
</urlset>

 

---

  今回はNuxt.jsでサイトマップを導入する方法とその設定についてまとめていきました。今回は基本的な部分になりますが、コーポレートサイトやメディアサイトなどのSEO対策には役立つのではないでしょうか。ぜひ一度試してみてはいかがでしょうか。