[gulp]sitemap.xmlをgulpで生成する方法[SPAのインデックス促進にも]

今回ご紹介するのは gulp-sitemap という、 gulp のパッケージになります。

SPA(Single Page Application) を制作したのは良いものの、公開後何日たってもインデックスされずに、Webの検索結果にのってこない。こんな経験をしたことはないでしょうか？

僕自身も Vue.js と Firebase で制作した SPA が検索結果にのってこなかった事があったので、
その際、解決に至った流れを書いていきたいと思います。

SPAをGoogle検索にインデックスしてもらう簡単な流れ

…なんのことはなく、手順自体は「通常のWebサイトと同じ」です。
ただ、静的なサイトの場合はあまり気にせずとも、そのうち勝手にインデックスされるケースもありますが、SPAのように
「実態としてのhtmlはひとつだが、あたかもそこにページがある様に、意図的に擬似的に見せている」サイトの場合は、以下の手順を明示的に行う必要がある、ということです。

(1). まずは通常のWebサイト同様に、 Search Console で対象となるSPAのURLを登録して、自身の所有するWebサイトである事を認識させます。
(2). Search Console で、[URL検査]ページに進み、[インデックス登録をリクエスト]を押して、インデックスさせたいページのURLが登録されるよう、クローラーにリクエストを出します。
(3). 対象となるSPAのURLが書かれた sitemap.xml を作成しておきます。
(4). Search Console の[サイトマップ]ページから、(3).で生成した sitemap.xml を登録します。
(5). 以上の手順を行うと、無事に SPA をインデックスさせることが出来るでしょう。

なかなかインデックスされなかった日々…

上記の (1). と (2). をやっただけでは、僕の場合は数日たってもインデックスされませんでした。
そこで試したのが (3). と (4). だったわけなのですが、この手順を明示的に実施したのが良かったようで、
SPA内に存在するURLが記載された sitemap.xml を送ったところ、ようやく通常のサイトの様にSPAを認識してもらう事ができました。

Gulp を使って sitemap.xml を生成

WordPressサイトであれば、優秀なプラグイン等が存在しているため、それを使えば特に意識しなくても
簡単に sitemap.xmlの生成 → 通知までやってくれますよね。
ただこれを自作しようとすると、それなりに手数もかかり、面倒だったりします。

Web上には sitemap.xml を自動生成してくれるジェネレーターやフリーのサービスがいくつか存在していますが、

・ SPAの様に動的にURL生成をしているサイトに対応していないケース
・そもそも信頼できるのかどうかわからないサイトに、自分のサイト情報を晒すセキュリティ面の問題

上記の様な懸念がありましたので、今回は

「gulpを使って、自分のローカル環境で sitemap.xml を生成する」

という事を試してみました。

sitemap.xmlを生成してくれる「gulp-sitemap」

冒頭でも書きましたが、今回ご紹介するのは gulp-sitemap という gulp のパッケージになります。

gulp自体の使用方法は省略※ するとして、まずは対象ディレクトリに gulp-sitemap をインストールします。
（※ 省略すると書きましたが、ざっくりいうと、node.jsインストール → gulp本体をインストール → gulpfile.js に必要なタスクを書く → npx gulp を実行、です。）

gulp-sitemap のインストール：(もちろんインストールに yarn を使うのもokです)

npm install --save-dev gulp-sitemap

対象ディレクトリに gulp-sitemap のインストールが済んだら、
gulpfile.js に以下のタスクを記述します。

const { src, dest } = require('gulp');
const sitemap = require('gulp-sitemap');

const generateXML = function(done){
  src('./build/**/*.html',{
    read: false
  })
  .pipe(sitemap({
    siteUrl: 'https://*****.com'
  }))
  .pipe(dest('./dist'));
  done();
}

exports.default = generateXML;

上記のタスク作成後、gulpを実行すると sitemap.xml の雛形が生成できます。
5行目で対象とするディレクトリを指定（ここに指定したディレクトリ内に存在するhtmlが sitemap.xml 内に記載されます)、
9行目で対象のWebサイトURLを指定します。

生成された雛形を元に、必要な分だけ正規のURLを追記したら（SPAだと当然 index.html ひとつしかないので、9行目に指定したURLしか記載されないため）、
Serch Console の[サイトマップ]ページから、 sitemap.xml を登録します。

これで、ローカルでの sitemap.xml をgulpで生成 → 通知が完了できます。
なおこの方法は、SPAの場合のみならず、静的なhtmlをいくつも持っているWebサイトに対しても使える方法ですので、
必要に応じて試してみてください。（sitemap.xml の自動生成という意味では、そのケースの方が有効に使えるかもしれません）

また、例えば SPA の場合で、初回ロードを高速化させるために、
SSR(サーバーサイドレンダリング) とまではいかなくとも、「プリレンダリング」という手法を使っている場合などには、
SPAの機能を保ったまま、あらかじめ複数の静的なhtmlが存在することになるため、sitemap.xml の生成方法として有効な手段になるかと思います。
（プリレンダリングの有名なライブラリは以下。
prerender-spa-plugin )

この記事のまとめと今後について：

今回は、自身で SPA(Single Page Application) を制作していて発生した、インデックスされない問題と、それを解決した際の流れについてご紹介しました。
今後はそのSPA制作で使用している Vue.js と Firebase についての記事も、このサイトでより多く扱っていけたらと思っています。

この記事をシェアする：