Liquidsのロゴ Liquids

1

Nuxt3でsitemap.xmlを生成する方法

Nuxt.js

Nuxtでsitemap.xmlを生成するライブラリとしてnuxt-simple-sitemapがある。


nuxt/sitempapを紹介する情報もあるが、こちらはNuxt2のためのライブラリであるため、Nuxt3ではnuxt-simple-sitemapを使用すること。

npm install -D nuxt-simple-sitemap

or

yarn add -D nuxt-simple-sitemap

インストールできない場合はNuxt3とのバージョンを考慮すること。インストールするnuxt-simple-sitemapのバージョンを下げることも考えられる。

sitemap.xmlを生成するにはnuxt.config.tsを編集します。

nuxt.config.ts
export default defineNuxtConfig({ modules: [ 'nuxt-simple-sitemap' ], sitemap: { urls: [ { url: 'https://yourdomain.com', lastmod: '2023-11-16', priority: 1.0 } ] } })

サーバーを起動して/sitemap.xmlを確認すると、生成されたsitemap.xmlを確認することができます。

例えば、記事などのURLが動的に変わる場合には、sitemap.xmlも動的に生成したい。

その場合は、fetch APIを使用してsitemap.xmlに必要なデータを取得してくることにより実現できる。

nuxt.config.ts
export default defineNuxtConfig({ modules: [ 'nuxt-simple-sitemap' ], sitemap: { urls: async () => { const res = await fetch(endpointForSitemapXmlGen); const datas = await res.json(); return datas.map(data => ({ 'url': data['url'], 'lastmod': data['lastmod'] })) }, } })

nuxt-simple-sitemapで生成されたsitemap.xmlをエンドポイント(/sitemap.xml)にアクセスして確認してみると、次のような見た目になる。

しかし、他サイト(今回はmeta.com)のsitemap.xmlを確認すると次のような見た目になっている。

これはnuxt-simple-sitemapではデフォルトで、XSL stylesheetが設定されているためである。
ただ、XSL stylesheetは設定されていてもSEOに悪影響はないので問題ない。
このことについてはnuxt-simple-sitemapのissueでも言及されている。

それでも無効化したい場合には、下記のようにxsl: falseと設定すれば良い。

nuxt.config.ts
export default defineNuxtConfig({ modules: [ 'nuxt-simple-sitemap' ], sitemap: { urls: [ { url: 'https://yourdomain.com', lastmod: '2023-11-16', priority: 1.0 } ], xsl: false } })
Liquidsのロゴ Liquids

Liquidsは誰でも投稿・編集ができる技術Wikiコミュニティ📝です。

あなたもLiquidsで技術Wikiを
書いてみませんか?