2024/2/25

Next.jsのサイトがGoogle検索に表示されない

Next.jsのブログ等の各記事がGoogle検索に表示されない時の対処法を紹介します。

はじめに

本ブログを開設した際、Googleで検索しても記事ページが表示されず、 ホームのみが表示されるという問題に遭遇しました。

原因

Google検索に表示されない原因は、クロールされていないためです。 クロールとは、検索エンジンがWebサイトを巡回して情報を収集することです。 この作業を行うことで、Google検索に表示されるようになります。 巡回するBotのことをクローラーといい、Googleの場合はGoogle botという名前らしいです。

このクロールを行うためには、robots.txt やsitemap.xmlを設定する必要があります。

解決方法

robots.txtやsitemap.xmlをNext.jsで設定するには、next-sitemap というパッケージを使用します。 これを使用することで、自動でファイルを生成してくれます。 使用方法はいたって簡単です。

まず、パッケージをインストールします。パッケージマネージャーは各自の環境に合わせてください。

bun i next-sitemap

次に、ルートディレクトリに以下のファイルを作成します。 urlは自分のサイトのURLに置き換えてください。

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.NEXT_PUBLIC_SITE_URL || 'https://www.runfunrun.tech',
  generateRobotsTxt: true,
};

package.jsonに以下のスクリプトを追加します。 postbuildはビルド後に自動で実行されるスクリプトです。

{
  "scripts": {
    ...
    "postbuild": "next-sitemap",
    ...
  }
}

デフォルトでは、/publicディレクトリに生成されるので、.gitignoreに追記します。

# next-sitemap
/public/robots.txt
/public/sitemap*.xml

以上で設定は完了です。

さいごに(もはや一番大事)

これで、検索インデックスに表示されるようになります。 ただし、反映には時間がかかる可能性があります。 Googleがクロールするタイミングによるので、すぐに表示されるとは限りません。 Webサイトの表示回数等にも左右されるようです。

また、サイトマップの設定を行っても、検索に表示されない場合もあるようです。

確認したい場合は、Google Search Consoleに登録して確認してみてください。 Google Search Consoleのサイトマップに登録することで、クロールの状況を確認できます。 Google Search Consoleの登録方法はデプロイ先によって異なるため、各自調べてみてください。 DNSレコード設定でTXT形式の指定の文字列を登録する方法が一般的だと思います。

数日待っても反映されない場合は、Google Search ConsoleからURL検査を行い、 「インデックス登録をリクエスト」することでクロールを優先的にするようにリクエストを送れます。 公開URLがインデックスに登録可能かどうかをテストされ、登録可能な場合リクエストに成功します。 自分の場合は数分で登録されました。 検索に表示されるまでにはさらに時間がかかると思います。

ただし、サイトマップが読み込まれていないとリクエストに失敗するぽいので、 その場合はサイトマップが読み込まれるまで待ちましょう。

検索に表示されてるかの確認はsite:{ドメイン} {記事名等の単語(無くても大丈夫)}で検索すると確認できます。

もやはNext.jsというか、SEOの話になってしまいましたが参考になれば幸いです。 もしかしたら間違っている内容があるかもしれません。 もしあればコンタクトページやDiscord等(ブログホームから連絡先が書いてあるポートフォリオに飛べます) で教えていただけると嬉しいです。 開発の勉強ばかりしていて、SEOについて全く知識がなかったのでいい勉強になりました。 また何かあれば追記します。

追記

urlのパスを変更したら、コンソール画面からURL検査を行ってインデックスのリクエストを行っても 反応がなくなってしまいました。

そこで、GoogleのIndexing APIを使用することで解決しました。

詳しくはこちらのドキュメント を参照してください。

また、bunで作成したコードのリポジトリはこちらです。

https://github.com/RUNFUNRUN/indexing-tool