Nuxt Contentでサイトマップ(sitemap.xml)を追加する

2021.03.29
2021.04.03
Nuxt Contentでサイトマップ(sitemap.xml)を追加する

検索エンジンにサイトの構造を知ってもらうためのサイトマップ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サイトマップは、サイト内の構造やコンテンツ(画像や動画も含む)を検索エンジンに「早く」「的確に」理解してもらうためのファイルです。

XMLサイトマップ(sitemap.xml)作成&送信方法マニュアル【専門知識不要】 | Web幹事より引用

上記サイトに書かれている通り、

サイトマップを追加する事で、サイト内の構造をGoogleの検索エンジンなどに正確に知らせる事が出来ます



またXMLサイトマップと明示的に書かれているのは、サイトマップには2種類あり、

  • sitemp.html
  • sitemp.xml

htmlはユーザ(人)向け、xmlは検索エンジン(ロボット)向けのためです。



この記事では後者のロボット向けのxmlを追加する方法になります。

sitemp.xmlの記述の仕方

sitemp.xmlの記述は以下のような書き方が基本的な全部入りの書き方になります。

sitemap.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>



使用するタグは6つ

タグ必須
urlset各ページの情報を大きくくくるタグ
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
まで含めて定型文
url1つのページの情報をくくるためのタグ
locページのURL
2048文字以下
lastmodxページの最終更新日
W3C Datetime形式で記述
ex: 2020-10-01
changefreqxページの更新頻度
以下の値が設定可能
  • always
  • hourly
  • daily
  • weekly
  • monthly
  • yearly
  • never
Googleの検索エンジンは無視します
priorityx各ページの優先度
サイト内の他ページと比較し0.0~1.0の間で調整

Googleの検索エンジンは無視します




記事に設定するタグの中だと、

changefreqpriorityはGoogleがインデックス時に無視するため、

重要になってくるのは loclastmodの2つですね。



またlastmodは必須タグではないため、

データの更新日を設定しづらいページやとりあえずsitemap.xmlを追加したい場合には設定しなくても良いかな、という印象。


(sitemap.xmlがなくともページ内にリンクがあれば、時間はかかってもGoogleがインデックスしてくれるため)




そのため、もちろん全てが設定出来るのが理想かと思いますが、

以下のように設定出来ればまずまず良いのかな、と思います。

sitemap.xml
<?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/sitemap



nuxt.config.jsのmodules@nuxtjs/sitemapを使う事を明記。

そしてこの後に新しく追加したsitemapという部分にsitemap.xmlへの設定を書いていきます。

nuxt.config.js
{
  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



その中でも hostnameroutesの2つが重要になってきます。

  • hostname・・サイトトップのURL
  • routes・・各ページの設定(sitemap.xmlの<url>タグ内の設定)

例えば以下のように設定し$yarn run generateを実行すると、

nuxt.config.js
sitemap: {
  hostname: 'https://example.com',
  routes: ['articles/hoge', 'articles/fuga'],
},
sitemap.xml
<?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の最後に配列でラップした、文字列もしくはオブジェクトを返す事が出来ます。

nuxt.config.js
sitemap: {
  hostname: 'https://example.com',
  routes: async () => {
    return [
      'articles/hoge',
      { url: 'articles/fuga', changefreq: 'daily', priority: 1, lastmod: '2021-03-28' },
    ]
  },
},
sitemap.xml
<?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>

オブジェクトを返すことでlastmodpriorityなども設定可能です!


locを設定するプロパティはurlである事に注意です



またasync/awaitを用いる事も出来るため以下のように、

APIに問い合わせてURLを動的に作成する、fsを使ってフォルダからデータを取得する、

といった事が可能です。

nuxt.config.js
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です!

robots.txt
User-Agent:*
Sitemap:<サイトのURL>/sitemap.xml



私のブログの場合は↓のようにしています。

robots.txt
User-Agent:*
Sitemap:https://tech-broccoli.life/sitemap.xml




robots.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を設定する事で書き出し方を変更する事が出来ます。

nuxt.config.js
sitemap: {
  xmlNs: 'xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"',
},

sitemap.xml
<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設定後

sitemap.xml
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

path

書き出されるsitemapのファイル名を変更する場合はpathを設定します

nuxt.config.js
sitemap: {
  path: 'sitemap-foo.xml',
},
$ yarn run generate
・・・
ℹ Generating sitemaps                                                                                                                                                                                            04:09:29
✔ Generated /sitemap-foo.xml

exclude

@nuxtjs/sitemapパッケージには、

動的ルーティングしていないページは自動的にsitemap.xmlに記載してくれる、という機能があります。


便利な反面、場合によってはインデックスしてほしくないページもありますよね。



そのような場合にexcludeを使う事でsitemap.xmlに記載したくないURLを定義出来ます。

nuxt.config.js
sitemap: {
  exclude: ['/secret', '/admin/**'],
},

↑の設定をした場合、

hogehoge.com/admin/のような管理画面ページをsitemap.xmlに記載させなくできます。

おすすめ