Programming / Travel / Liquor

Nuxtで構築したブログでサイトマップを生成する方法

Nuxt ブログ構築

Nuxt.jsで作ったアプリ(本ブログ)でサイトマップを自動生成する方法を紹介します。

Sitemap Moduleを使う

Nuxt公式でライブラリが提供されているので、それを導入するだけで簡単にサイトマップを自動生成することができます。

導入手順

基本的に公式にある通りの手順で問題ありません。オプション設定が結構あるので必要に応じて設定が必要になります。

yarn add @nuxtjs/sitemap

nuxt.configのmodulesにsitemap-moduleを含めます。また、オプション設定を利用する場合はsitemapセクションを定義してそこにオプション設定を追記します。

// export default ...
modules: ["@nuxtjs/sitemap"],
sitemap: {
  hostname: "https://knote.life",
  gzip: true,
  exclude: ["/Preview/"],
  trailingSlash: true,
  routes: async () => {
    const api = await initGenerateApi();
    const entrys = await api.query(
      Prismic.Predicates.at("document.type", "entry")
    );
    const tmp1 = entrys.results.map(entry => `/entry/${entry.uid}`);
    return [...tmp1];
  }
},

↑が現状このブログで使用している設定です。使用しているオプションについて下記に記載します。

gzip

trueにするとgzip圧縮されたサイトマップを追加で生成します(default:false)

大量のページになる場合は圧縮したものが必要になりますが、サイトマップに書き出すページが少ないうちは不要。今はサーチコンソールのサイトマップ指定でも通常の圧縮されていないxmlを指定しています(とりえあえずtrue)

exclude

ここにパスを指定すると、サイトマップで書き出されるパスから除外されます(配列形式で指定)

trailingSlash

trueにするとサイトマップで書き出されるパスの末尾にスラッシュが付与されます。

以下の記事で書きましたが、NuxtのtrailingSlashオプション(sitemapのtrailingSlashとは別)を有効にしている場合はtrueにしないとtrailing slashが無い無効なパスが書き出されてしまいます。

routes

サイトマップに書き出すパスを指定します。

記事ページは動的ルーティングを使用しているため、APIで記事データを全件取得して記事ページのパスを生成して配列形式で返却するかたちで指定します。

動的ルーティングページ部分のところの考え方としては以下の記事で紹介した「動的ルーティングページの静的ページ生成」と同様です。

サイトマップ書き出し

上記の設定をした後はnuxt generate時にsitemap.xmlおよび、gzip圧縮されたsitemap.xml.gzを生成してくれるようになり、デフォルトではdistフォルダ直下に吐き出されます。簡単ですね。

おわりに

サイトマップを自動生成する方法について書きました。

Nuxtコミュニティの公式でこういうライブラリが用意されているので導入も非常に簡単で便利ですね~

About
K

旅行とお酒、そしてプログラミングが大好きなエンジニアです。

バックエンド、言語としてはJava(Spring FW)・Cが専門ですが、最近はVue/Nuxtをはじめとするフロントエンドまわりも勉強中。

旅行は国内・海外問わず、海外旅行は現在12か国、国内は色々。東南アジアの旅行ならカンボジアが大好き(3回ほど渡航)

お酒はビール・ウイスキー・日本酒があればOK。

Portfolio

QT Visualizer

Portfolio Site

プライバシーポリシー

Frontend by Nuxt & Vuetify / Contents by Prismic.io

© 2019 K note.life