Nuxt.jsでサイト構築した時にSEO対策で必要になるサイトマップ
サーバサイドで個別にサイトマップを生成してサイトマップファイルを生成してもいいのですが、もっと簡単に実装する方法もあるので紹介します。
@nuxtjs/sitemapはNuxt.jsでサイトマップを生成するモジュールです。
npm install --save @nuxtjs/sitemap
nuxt.config.js
にサイトマップの設定を行います。
module.exports = {
modules: [
...,
'@nuxtjs/sitemap'
],
sitemap: {
path: '/sitemap.xml',
hostname: 'https://example.com',
routes (callback) {
const api = 'https://example.com/'
axios.get(api)
.then((response) => {
const posts = response.data
const routes = posts.map((post) => {
return post.url
})
callback(null, routes)
})
.catch(callback)
}
}
項目 | default | 概要 |
---|---|---|
routes | [] | 設定する動的サイトマップ |
path | /sitemap.xml | 生成されたサイトマップのUR |
hostname | ホストネーム | |
cacheTime | 1000 * 60 * 15 (15 Minutes) | SSRのキャッシュ設定 |
exclude | [] | 除外する静的ページ |
filter | ||
gzip | false | .xml.gzgzip で圧縮されたサイトマップの作成を有効にします。 |
trailingSlash | false | 各ルートURLに末尾のスラッシュを追加します(例:/page/1=> /page/1/) |
{
sitemap: {
path: '/sitempap/index.xml',
hostname: 'https://example.com',
sitemaps: [
{
path: '/sitemap/static.xml',
},
{
path: '/sitemap/sitemap2.xml',
exclude: ['/**'], // 静的ファイル除外
routes (callback) {
// 生成したいURL
}
]
}
}
このように設定することでSSRでも自由にサイトマップができました。
非常に便利ですので是非一度利用してみてください。