nuxt.jsでサイトマップを生成&設置する

2020-06-11

(LastUpdated: 2020-06-11)

まずは、サイトマップについておさらい

サイトマップとは、サイトのウェブページのリストを指定して、Google や他の検索エンジンにサイトのコンテンツの構成を伝えるファイルです。 Googlebot などの検索エンジンのウェブクローラは、このファイルを読み込んで、より高度なクロールを行います。

サイトマップについて - Search Console ヘルプ

googleに対して、サイト全体のページを伝えることによって、「クロール漏れが無いようにしてもらうためのもの」 というイメージでしょうか。 どうやら、絶対必要ってわけでもないようです。 数ページのwebサイトでは、用意しなくても影響は少なそうという情報を見かけました。 ブログはページ数が多く増え続けていくので、用意したほうが無難ですね。

  1. nuxt.jsでサイトマップを自動生成

nuxt.jsでサイトマップを自動生成

Sitemapをページgenerate時に自動で設定したいです。 やはりこの方のブログが参考になります。 というか、そのままでいけちゃいます。

Nuxt.js で Markdown ベースのブログを構築する(Nuxt.js 編) - jmblog.jp

モジュールがnuxt communityに存在していますので、スムーズに導入できます。 GitHub - nuxt-community/sitemap-module: Sitemap Module for Nuxt.js

まずはモジュールをnpm インストール

yarn add @nuxtjs/sitemap --dev
または、
npm install @nuxtjs/sitemap --save-dev

nuxt.config.jsに設定を書き込みます。 ルーティングと同じ処理を入れる必要があります。 こちらの方の設定をそのままでもいけちゃうかと。

Nuxt.js で Markdown ベースのブログを構築する(Nuxt.js 編) - jmblog.jp

あとはnuxt generateすればファイルが出力されています。 すばらしいっ!


タグに関連づけられた記事

AM2

JAMstacなブログにまつわる、技術的なことなどを記録しています。