はじめに
会社のホームページのリニューアルを行いました。当初はFirebase Hostingの利用を考えていたのですがとある問題[1]に遭遇したので、Cloudflare Pagesでのホスティングを行っています。
さて、このホームページの公開に伴ってサイトマップの設定を行ったのでその時の手順やポイントを紹介しようと思います。
開発にはnextjsのSSGを利用しました
そもそもサイトマップとは？
サイト全体のページ構成を一覧で記載しているページであり、検索エンジンにサイト内のページを知らせる役割を持っています。sitemap.xmlというファイルをルートに設置し、Google Search Consoleに設定しておくことで効果を発揮します。
基本的にはSEO対策のためにも設定はしておいた方が良いでしょう。
nextjsでの生成方法
オンラインツールでの生成もできますが、ページ追加やコンテンツ変更のたびに行うのは面倒です。ですので、ビルド時に自動で生成・更新できるように、next-sitemapというライブラリを導入することにしました。
導入はとても簡単です。
- パッケージのインストール
npm i next-sitemap -D
- 設定ファイルの作成
module.exports = {
siteUrl: 'hoge.com', // カスタムドメイン
generateRobotsTxt: true,
sitemapSize: 7000, // 大きなサイトマップになる場合のファイル分割行う閾値
outDir: './out', // 出力先ディレクトリ
};
sitemapSizeの詳細についてはこちら。ファイル名は*.config.jsであればなんでもOKです
- 生成コマンドの追加
"build": "next build && next export && next-sitemap --config sitemap.config.js",
これで手元の設定は完了です。npm run buildしてみましょう。
無事に/outディレクトリにsitemap.xmlとsitemap-0.xmlが生成されました！
CloudFlare Pagesでのビルド設定
手元で問題なく生成されることを確認できたので、次にCouldFlare Pagesにでのビルド設定です。Build commandの部分をnext build & next exportからnpm run buildに変更しましょう。
| 変更前 | 変更後 |
|---|---|
 |
 |
これでCloudFlare Pagesでのビルド時にサイトマップも生成されるようになりました。
Google Search Consoleでの設定
さてあとはGoogle Search Consoleで登録すれば完了です。
プロパティ（＝ドメイン）の設定がまだの人は先に登録して所有権の確認をする必要があります。
CloudFlare Pagesの場合は、わざわざTXTレコードを手動で登録する必要なく、Google Search Console上からCloudFlare Pagesへのアクセスを許可するだけで自動でDNSレコード登録が完了しました。数分もかからないくらいで終わりました。
ちなみに、今回たまたまそうだったのかはわかりませんが、勝手にCloudFlare Pagesの設定していたCNAMEレコードが消えるという現象に遭遇しました。手動で設定は戻したので、再度アクセスできるようにはなりましたが少し気持ち悪さが残る感じに。また別の機会に再度遭遇したらこのことに関して記事書こうと思います[2]。
無事に所有権の確認が終わったらサイトマップの登録に進みます。
もしうまくsitemap.xmlが/outに生成されていない場合は、以下のような表示になります。
ブラウザから対象のカスタムドメイン/sitemap.xmlにアクセスしてみて404になるようであれば改めてサイトマップの生成がうまくいっていないことを確認できます。ビルドコマンドやホスティングサービスのビルド設定を見直してみましょう。
問題なく登録が進んだ場合は、このような画面になります
そしてサイトマップページに戻るとこちらもステータスが成功となってますね！!
めでたしめでたし~
ちなみにダメだったnpmコマンド
調べていると他にもpostbuildやpreexportといったpre-/post-プリフィックスがついたnpmスクリプトを使って、サイトマップ生成を行う方法があるようです。
"build": "next build",
"postbuild": "next-sitemap --config next-sitemap.config.js",
"preexport": "npm run build",
"export": "next export",
しかし、手元で実行してログをみると、サイトマップの生成はされているが、/outにsitemap.xmlが出力されていないという事象に遭遇しました。どなたか原因がわかる方いらっしゃればご教示いただけると幸いです
さいごに
株式会社クロスビットでは、デスクレスワーカーのためのHR管理プラットフォームを開発しています。一緒に開発を行ってくれる各ポジションのエンジニアを募集中です。
-
Firebase内部の証明書発行の問題に遭遇。Firebaseサポートチームに問い合わせを行い、解決まで2週間ほどかかりました。これについてはまた別で記事を書こうと思います。 ↩︎
-
後日原因がわかりましたので、別途記事を書きました。詳しくは「Google Search ConsoleからCloudflare Pagesへの所有権の確認は要注意！」を参照ください。 ↩︎
Discussion