Nuxt.jsでサイトマップを生成する
目次
サイトマップとは
サイトマップは、Webサイトのページ構成を表すものです。
サイトマップを置くことでGoogleなどの検索エンジンがサイトマップの情報を読み取り、効率的にクロールを行えるようになります。
具体的にはWebサイトのもつ各ページのURLのリストを sitemap.xml といったXML形式で、サイトマップとして作成します。
それをGoogle等検索エンジンにサイトマップとして認識させることになります。
この記事では Nuxt.js を利用して sitemap.xml を作成する方法を記載します。
インストール
Nuxt.js でサイトマップを作成するのに便利なライブラリをインストールします。
今回は @nuxtjs/sitemap を利用します。
yarn add @nuxtjs/sitemap設定
@nuxtjs/sitemapが有効になるように nuxt.config.js の修正をします
nuxt.config.js
/*
** Nuxt.js modules
*/
modules: [
[
'@nuxtjs/sitemap'
}
]
],最低限はこれだけでサイトマップの導入は完了します。
/sitemap.xml にアクセスするとsitemapが作られていることがわかります。
しかしこの状態では動的なルーティングをしている場合時にはうまくサイトマップに反映されません。
詳細な設定
動的ルーティングを含めたい場合等は、詳しく設定が可能です。
詳しい設定は nuxt-sitemapのドキュメントを見てください。
@nuxtjs/sitemap
sitemap: {
path: '/sitemap.xml',
hostname: 'https://example.com',
generate: true, // nuxt generateで静的にした際にも、サイトマップを生成する設定
exclude: [],
routes() {
// 動的ルーティングで list/1~10 までページがあるとした場合
const paths = []
for (let i = 1; i <= 10; i++) {
paths.push('list/' + i)
}
return paths
}
},例えば、動的ルーティングで list/1~10 までページがあるとした場合に上記のように routes()メソッドの返り値として、サイトマップに含めたいパスの配列を返してあげれば、サイトマップに含めることができます。
まとめ・感想
今回は、Nuxt.jsでサイトマップの作成方法についてまとめました。
@nuxtjs/sitemapを導入するだけで、作成することができるので非常に簡単でした。