Vite でサイトマップを生成する方法

vite-plugin-sitemap というプラグインを使えば簡単に生成できます。

https://www.npmjs.com/package/vite-plugin-sitemap

まずインストール

npm install vite-plugin-sitemap

インポート

import Sitemap from 'vite-plugin-sitemap'

plugins に追加

export default defineConfig({
  plugins: [
    vue(),
    Sitemap({
      hostname: 'https://gametsukurukun.com/',
    }),
  ],
  ...
})

これだけで実際に存在するページ情報だけを含んだ sitemap.xml を生成して dist ディレクトリ以下に置いてくれます。簡単。

追記

vite-plugin-sitemap を使った方法だと、URL の一番最後にスラッシュ / がつかないため、クロールの際に「ページにリダイレクトがあります」というエラーが出てしまうという問題がありました。

今は sitemap-generator という npm パッケージを使ってサイトマップを生成しています

sitemap-generator の使い方はこんな感じになります

インストール

npm install sitemap-generator

サイトマップ生成用のスクリプト

import SitemapGenerator from 'sitemap-generator'

const generator = SitemapGenerator('https://gametsukurukun.com', {
  filepath: './dist/sitemap.xml',
})

generator.on('done', () => {

})

generator.start()

このスクリプトを実行すると ./dist/sitemap.xml が生成されます。

まとめ

sitemap-generator の場合、実際にサイトを見に行ってクロールした結果を元にサイトマップを生成するため、若干が時間がかかります。

とはいえ、多少時間がかかっても正確なサイトマップを作るのが大事だと思うので、こちらの方法を採用した方が良いかと。

一方で、Google はクロールの際に URL の最後の '/' を勝手に補ってくれるため、特に気にせず vite-plugin-sitemap を使っても良いのかもしれません。

個人的には警告レベルであってもエラーが出るのは嫌だなあと思ったので sitemap-generator を使うようにしています。