#vuepress-plugin-sitemap でサイトマップ自動生成

vuepress にブログ移行してから 1 年経ちますが、機能的にしても SEO にしてもとても満足しています。サイトのアクセス速度は Wordpress と比べ物にならないくらい速いので、ページビューも順調に増えています。強いて不満と言えば、自動的にサイトマップできなくて、毎回手動で作成してアップすることかな。
これまではxml-sitemaps(opens new window)というサイトマップ ジェネレーター 使っていましたが、毎回手動で入力しないといけないし、ビルドするのに時間かかるし、作成したサイトマップを再度アップロードする必要があります。慣れたらストレスなく作業はできますが、サイトマップをビルド忘れたら遅れたらするので、自動化できたらいいなあと思って調べました。

調べるとすでにvuepress-plugin-sitemapというプラグインが提供されているので、使ってみます!

プラグインをインストール

Yarn
yarn add vuepress-plugin-sitemap

NPM
npm i vuepress-plugin-sitemap

sitemap プラグインの設定できるオプション

  • hostname
  • outFile
  • urls
  • exclude
  • dateFormatter

hostname は必須ですが、個人的に exclude で 404 ページも除外しておいたほうが良さそうです。

hostname:
  type: string
  required: true
  default: null
  description: website root url
  example: https://pake.web.id

outFile:
  type: string
  required: false
  default: sitemap.xml
  description: sitemap file name
  example: sitemap.txt

urls:
  type: array
  required: false
  default: [],
  description: custom urls to append
  example: [
    { url: '/place', changefreq: 'monthly' }
  ]

exclude:
  type: array
  required: false
  default: [],
  description: pages path to exclude
  example: ['/404.html']

dateFormatter:
  type: function
  required: false
  description: change the date format
  default: time => new Date(time).toISOString()

#.vuepress/config.js 設定ファイル変更

Vuepress v0.x は少し違いますが、1.7 使っているので Vuepress v1.x の設定でやっていきます。

plugin 設定 object

.vuepress/config.js

module.exports = {
  plugins: {
    sitemap: {
      hostname: "https://hapicode.com",
    },
  },
};

plugin 設定 array

.vuepress/config.js

module.exports = {
  plugins: [
    [
      "sitemap",
      {
        hostname: "https://hapicode.com",
      },
    ],
  ];

これで完了?あとは npm run build 叩いたら自動的にdistディレクトリに sitemap.xml 生成される〜〜と思いましたが、エラーが出た。

#error vuepress-plugin-sitemap apply generated failed

generate 失敗でエラー発生 dateFormatter あたりに問題あるかもって感じのエラー

SITEMAP  Generating sitemap...
error vuepress-plugin-sitemap apply generated failed.
RangeError: Invalid time value
    at Date.toISOString (<anonymous>)
    at dateFormatter (/Users/xxxx/Documents/hapicode.com/node_modules/vuepress-plugin-sitemap/index.js:24:60)
    at pages.forEach.page (/Users/xxxx/Documents/hapicode.com/node_modules/vuepress-plugin-sitemap/index.js:69:13)
    at Array.forEach (<anonymous>)
    at generated (/Users/xxxx/Documents/hapicode.com/node_modules/vuepress-plugin-sitemap/index.js:56:13)
    at AsyncOption.asyncApply (/Users/xxxx/Documents/hapicode.com/node_modules/@vuepress/core/lib/node/plugin-api/abstract/AsyncOption.js:33:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hapicode.com@1.2.0 build: `vuepress build docs`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hapicode.com@1.2.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

原因は@vuepress/last-updatedvuepress-plugin-sitemap設定にあります。
@vuepress/last-updatedに設定した最後の修正時間を一日前1時間前vuepress-plugin-sitemapはこのフォーマットサポートしていないからです。

@vuepress/last-updated の設定






 



"@vuepress/last-updated",
  {
    transformer: (timestamp, lang) => {
      const moment = require("moment");
      moment.locale(lang);
      return moment(timestamp).fromNow();
    },
  };

#sitemap plugin に dateFormatter 指定

.vuepress/config.js にある sitemap の dateFormatter 指定することでエラー解消はできます。





 




      "sitemap",
      {
        hostname: "https://hapicode.com",
        exclude: ["/404"],
        dateFormatter: val => {
          return new Date().toISOString()
        }
      },

以上!

npm run build する度に最新の sitemap 生成されるようになります。

2020-12-08
  • vuepress