検索エンジンにサイトの構造を知ってもらうためのサイトマップ（sitemap.xml）。
ブログやWebサービスを運営しているとSEO対策の観点から欲しくなってきます。
この記事ではNuxt Contentで作ったサイトにsitemap.xmlを作成し、公開出来るようにします。
その際に@nuxtjs/sitemapというパッケージを使います。
特徴として、全て自動で作ってくれるわけではなくマニュアル対応しないといけない部分もあり、
記事やサイトの作り方によっては若干大変さがあるかもしれません。
検証した環境
| 1 | @nuxt/content | 1.11.1 |
| 2 | @nuxtjs/sitemap | 2.4.0 |
sitemap.xmlについて
まず簡単にサイトマップについて記載します
サイトマップとは
XMLサイトマップは、サイト内の構造やコンテンツ（画像や動画も含む）を検索エンジンに「早く」「的確に」理解してもらうためのファイルです。
上記サイトに書かれている通り、
サイトマップを追加する事で、サイト内の構造をGoogleの検索エンジンなどに正確に知らせる事が出来ます。
またXMLサイトマップと明示的に書かれているのは、サイトマップには2種類あり、
- sitemp.html
- sitemp.xml
htmlはユーザ（人）向け、xmlは検索エンジン（ロボット）向けのためです。
この記事では後者のロボット向けのxmlを追加する方法になります。
sitemp.xmlの記述の仕方
sitemp.xmlの記述は以下のような書き方が基本的な全部入りの書き方になります。
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/</loc>
<lastmod>2021-03-28</lastmod>
<changefreq>daily</changefreq>
<priority>1</priority>
</url>
<url>
<loc>https://example.com/articles/1</loc>
<lastmod>2021-01-06</lastmod>
<changefreq>weekly</changefreq>
<priority>0.1</priority>
</url>
<url>
<loc>https://example.com/privacy-policy</loc>
<lastmod>2021-01-06</lastmod>
<changefreq>yearly</changefreq>
<priority>0.1</priority>
</url>
・・・
</urlset>使用するタグは６つ
| タグ | 必須 | |
|---|---|---|
| urlset | ○ | 各ページの情報を大きくくくるタグxmlns="http://www.sitemaps.org/schemas/sitemap/0.9"まで含めて定型文 |
| url | ○ | 1つのページの情報をくくるためのタグ |
| loc | ○ | ページのURL 2048文字以下 |
| lastmod | x | ページの最終更新日 W3C Datetime形式で記述 ex: 2020-10-01 |
| changefreq | x | ページの更新頻度 以下の値が設定可能
|
| priority | x | 各ページの優先度 サイト内の他ページと比較し 0.0~1.0の間で調整Googleの検索エンジンは無視します |
記事に設定するタグの中だと、
changefreqとpriorityはGoogleがインデックス時に無視するため、
重要になってくるのは locとlastmodの2つですね。
またlastmodは必須タグではないため、
データの更新日を設定しづらいページやとりあえずsitemap.xmlを追加したい場合には設定しなくても良いかな、という印象。
（sitemap.xmlがなくともページ内にリンクがあれば、時間はかかってもGoogleがインデックスしてくれるため）
そのため、もちろん全てが設定出来るのが理想かと思いますが、
以下のように設定出来ればまずまず良いのかな、と思います。
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://tech-broccoli.life/</loc>
<lastmod>2021-03-28</lastmod>
</url>
<url>
<loc>https://tech-broccoli.life/articles/engineer/add-algolia-for-nuxt</loc>
<lastmod>2021-01-06</lastmod>
</url>
<url>
<loc>https://tech-broccoli.life/privacy-policy</loc>
</url>
・・・
</urlset>↑は私のブログでの一例です。
トップページやブログの記事ページは極力更新した日を設定。
プライバシーポリシーのような中々更新しないページにはlastmodを設定しない、というやり方。
Nuxt Contentでサイトマップを導入
お待たせしました、本題です！
サイトマップを生成するために@nuxtjs/sitemap というパッケージを使います
公式ドキュメントは ↓ のページ
Introduction - Nuxt Sitemap Module
パッケージの導入・設定
パッケージを導入
$ yarn add @nuxtjs/sitemapnuxt.config.jsのmodulesに@nuxtjs/sitemapを使う事を明記。
そしてこの後に新しく追加したsitemapという部分にsitemap.xmlへの設定を書いていきます。
{
modules: [
'@nuxtjs/sitemap'
],
sitemap: {
// ここにサイトマップに必要な設定を記載
}
}あとは$ yarn run generateを実行すると、
最終的にsitemapに書いた設定に応じたsitemap.xmlが書き出されます。
$ yarn run generate
・・・
ℹ Generating sitemaps 04:09:29
✔ Generated /sitemap.xml 04:09:30
✨ Done in 94.50s.nuxt.config.jsのsitemapの設定について
sitemapに設定出来るプロパティは全てOptionalで、設定出来る項目は結構な数があります。
項目に関しては公式ページ参照:
Sitemap options - Nuxt Sitemap Module
その中でも hostnameとroutesの2つが重要になってきます。
hostname・・サイトトップのURLroutes・・各ページの設定（sitemap.xmlの<url>タグ内の設定）
例えば以下のように設定し$yarn run generateを実行すると、
sitemap: {
hostname: 'https://example.com',
routes: ['articles/hoge', 'articles/fuga'],
},<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://example.com/articles/hoge</loc>
</url>
<url>
<loc>https://example.com/articles/fuga</loc>
</url>
<url>
<loc>https://example.com/</loc>
</url>
</urlset>このように書き出されます。
routesにはfunction（しかもasyncが使える!!）を渡す事が出来て、
functionの最後に配列でラップした、文字列もしくはオブジェクトを返す事が出来ます。
sitemap: {
hostname: 'https://example.com',
routes: async () => {
return [
'articles/hoge',
{ url: 'articles/fuga', changefreq: 'daily', priority: 1, lastmod: '2021-03-28' },
]
},
},<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://example.com/articles/hoge</loc>
</url>
<url>
<loc>https://example.com/articles/fuga</loc>
<lastmod>2021-03-28T00:00:00.000Z</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://example.com/</loc>
</url>
</urlset>オブジェクトを返すことでlastmodやpriorityなども設定可能です！
locを設定するプロパティはurlである事に注意です
またasync/awaitを用いる事も出来るため以下のように、
APIに問い合わせてURLを動的に作成する、fsを使ってフォルダからデータを取得する、
といった事が可能です。
sitemap: {
hostname: 'https://example.com',
routes: async () => {
const axios = require('axios')
const response = await axios.get('https://api.example.com')
return response.data.map(item => ({ url: `articles/${item.slug}`, lastmod: item.createdAt }))
},
},後は自サイトに合わせて諸々設定を変更すればOKです！😄
robots.txtにサイトマップの事を記載する（オプション）
必須事項ではないです！
robots.txtを使う事で検索エンジンにインデックスしてほしい/ほしくないファイルやURLを定義出来ます。
プラスでsitemap.xmlの場所を明示的に伝える事もできます。
robots.txtの追加方法はアドセンス用のads.txtを配置した時の記事と同じくstatic/に配置します
static/
robots.txt
favicon.ico
・・・
robots.txtに書く内容は、
もしsitemap.xmlの事のみ記載する場合、以下のようにすればOKです！
User-Agent:*
Sitemap:<サイトのURL>/sitemap.xml私のブログの場合は↓のようにしています。
User-Agent:*
Sitemap:https://tech-broccoli.life/sitemap.xmlrobots.txtの確認
robots.txtが問題なく書けているか、
Googleのサーチコンソールの機能の一部として提供されているテストツールで確認が出来ます。
https://www.google.com/webmasters/tools/robots-testing-tool
プロパティを選択してエラーが出ていない事が確認出来ればOK！
書き出されるサイトマップの設定を変更
ここからは@nuxtjs/sitemapで設定出来るプロパティの説明になります
オプションを用いる事で書き出されるsitemap.xmlの設定を色々変更する事が出来ます
xmlNs
書き出されたxmlを見てまず思ったのが「ん？xmlns:videoとか書かれてる？？」でした。
xmlns:videoは「動画」、xmlns:imageは「画像」に関するタグが使えるようになります。
例えば<video:title>や<image:title>のような。
XMLサイトマップ（sitemap.xml）とは？正しい記述方法を徹底解説 | デジ研
これらのタグを設定する事で動画や画像などを動画検索、画像検索の項目に素早くインデックスさせる事が出来る、ということなんでしょうね。
xmlns:video等書いてある事は決して悪い事ではなく、
ただその専用のタグが使えるようになる、という事のようです。
そのため、変更する必要は特にありませんが、xmlNsを設定する事で書き出し方を変更する事が出来ます。
sitemap: {
xmlNs: 'xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"',
},<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">↓ xmlNs設定後
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">path
書き出されるsitemapのファイル名を変更する場合はpathを設定します
sitemap: {
path: 'sitemap-foo.xml',
},$ yarn run generate
・・・
ℹ Generating sitemaps 04:09:29
✔ Generated /sitemap-foo.xmlexclude
@nuxtjs/sitemapパッケージには、
動的ルーティングしていないページは自動的にsitemap.xmlに記載してくれる、という機能があります。
便利な反面、場合によってはインデックスしてほしくないページもありますよね。
そのような場合にexcludeを使う事でsitemap.xmlに記載したくないURLを定義出来ます。
sitemap: {
exclude: ['/secret', '/admin/**'],
},↑の設定をした場合、
hogehoge.com/admin/のような管理画面ページをsitemap.xmlに記載させなくできます。
