エミ眠太の自由帳
 エミ眠太の自由帳
    
 
 基本      2023-08-11      

Next.jsで作ったWebサイトがGoogleの検索結果に出てこない！？

Language：
 JavaScript
Framework/Library：
 React Next.js
Technology：
 bot 検索エンジン クローラ
Platform/Tool：
 Google Search Console
記事一覧へ

目次


はじめに

これまでWebサイト作成についていろいろとまとめてきました。Next.jsでWebサイト作成のための環境構築をして、アクセス解析のためにGA4設定をして、Vercelにデプロイして、サブドメイン設定して。。。ただ、Google検索しても出てこないんです！！！これは大ごとです。せっかく作っても流入経路がTwitterしかないなんてふざけ倒しています。。。まあ、これはGoogleにインデックス登録されていないからなんですがね。 ということで、Google検索結果に出てくることを目指して、そして自然検索からの流入爆増を目指して対処しました。

Google検索結果に表示されるまで・・・

インデックスへの登録

そもそもここから学ぶべきなのです。Googleにおけるインデックスとは、「Googleが持つ検索エンジンの大規模なデータベース」です。（参考：Google の検索エンジンの仕組み、検索結果と掲載順位について）このインデックスに登録されないと、誰かがGoogle検索を実施した際、検索結果に表示されません。つまり誰にも見られないのです。ではどのような仕組みでインデックスに登録されるのでしょうか？

ウェブクローラーによるインデックス登録

Google の検索エンジンの仕組み、検索結果と掲載順位についてによると、Googleが持つウェブクローラーというソフトウェアが定期的にWebを探索することで、基本的には自動で見つけたページをインデックス登録されているとのことです。このウェブクローラーをGooglebotと言います。私のWebサイトは見つかっていないのですね。。。では、このGooglebotとやらにはなぜ見つけてもらえていないのでしょうか？

インデックス登録されるには？

インデックス登録されないワケ

いくつかあるのですが、多くの原因は下の通りです。

  1. ドメインが新しいため・・・これはそういうもんだと覚えておいた方が良いかもしれません。新しいドメインはクロールの優先順位が下がるようです。
  2. Googleガイドライン違反により、ペナルティを受けているため・・・Google検索には、Webサイト・アプリ制作者向けにガイドラインが存在します。これに違反するとせっかく作っても掲載順位が上がらなかったり、場合によってはGoogle検索から除外されたりする可能性があるようです。詳しくはGoogle ウェブ検索のスパムに関するポリシーをご確認ください。要するにしょうもないことすなと書いてあります。
  3. プログラムでnoindexを指定しているため・・・内でnoindexを指定してしまうと、インデックス登録がされなくなってしまいます。
  4. robots.txtでクロールを禁止にしているため・・・robots.txtとは、収集されたくないコンテンツがある場合に、Googlebotに対してクロールを拒否するためのファイルです。

インデックス登録されるための対処法

上記の通り原因をいくつか並べましたが、開発側で技術的に対処が可能な3と4の原因に対してそれぞれ対処していきましょう。

3.プログラムでnoindexを指定しているため

文字通りですが、noindexを指定しなければ良いのです。タグを利用している場合は、その中に以下の記述がないか確認してみてください。

<meta>という記述があれば、これを消すだけで大丈夫です。

4.robots.txtでクロールを禁止にしているため

robots.txtにおいて、以下の通りDisallowの記述をしている場合、Disallowの中身が空の場合は問題ありませんが、下のようにディレクトリ（もしくはディレクトリ+ページ）が記述されている場合、そのディレクトリ（今回の場合はpages以下のコンテンツ）が表示されなくなります。表示させたくないコンテンツがない場合には、Disallowの中身は空に保っておきましょう。

Disallow:/pages/

Googleにインデックス登録されやすくするためには？

ここまでインデックス登録されない原因についてまとめてきましたが、全部対応したからといってすぐにインデックス登録されるわけではありません。だからと言って、ほな指咥えて待っとき！という話でもなく、インデックス登録されやすくするための工夫はできるんです。

サイトマップ（sitemap.xml）の生成、Google Search Console（サーチコンソール）への送信

インデックスへの登録のためにGoogleはGooglebotを利用してクロールしている、しかし新しいドメインの場合はインデックス登録に時間がかかるというのは前述の通りです。というわけで、GooglebotにWebサイトの内容・構造を理解してもらうために（=クロールしてもらいやすくするために）、サイトマップを作ってあげましょう。

next-sitemapの利用

Next.jsのWebサイト・アプリでサイトマップを作成するためには、next-sitemapというパッケージを利用します。対象のGitHubリポジトリはこちらです。それではまず下の通りインストールします。

npm i --save next-sitemap

next-sitemap.config.jsファイルの設定

インストールできたら、プロジェクト直下にnext-sitemap.config.jsファイルを新規作成します。ファイルの中身には以下の通り記述します。

  • 3行目にはWebサイト・アプリのURLを記述します。ここはベースとなるURLを入力してください。
  • 4行目で、オプションですがrobots.txtファイルを生成します。デフォルトではfalseなので、trueの場合のみ記載しましょう。
  • 5行目で、こちらもオプションですがsitemapSizeを指定します。ここでは7,000という値を指定していますが、サイト内のURLが7,000を超過すると自動的にサイトマップが分割され、index（e.g. sitemap.xml）ファイルと詳細サイトマップファイル（e.g. sitemap-0.xml, sitemap-1.xml）ができるという設定です。
  • 6行目で、こちらもオプションですがexcludeを指定して、サイトマップから除外したいページ・サブディレクトリを配列形式で指定します。

package.jsonファイルの設定

続いて、package.jsonファイルに必要事項を追記して、ビルド時にpublicディレクトリの下にsitemap.xmlファイルを作成するようにします。

  • 3行目にはbuildの記述をします。こちらはすでに記述があるかもしれません。
  • 4行目には新しくpostbuildを追加し、next-sitemap.config.jsを実行するよう記述をします。

buildの実行

npm run buildを実行します。すると、ビルドする度に、postbuildで記述したようにビルド後にnext-sitemap.config.jsが実行されます。

またpostbuild完了後には、publicディレクトリの下に、sitemap.xmlファイルとrobots.txtファイルが新しく生成されていると思います。

生成されたsitemap.xmlファイル

sitemap.xmlファイルは以下の通りになっていると思います。

  • 3行目はWebサイト・アプリのURL（ベース）が表示されています。
  • 5行目はWebサイト・アプリ内に存在する、別ページのURLが表示されています。今回は、aboutというページをWebサイト内に作成したため、このような表記になっているはずです。また、この下にも同Webサイト・アプリ内に存在する全てのURLが書き出されていると思います。

生成されたrobotx.txtファイル

robots.txtファイルは以下の通りになっていると思います。

  • 3行目はAllowとなっていると思います。これは、今回Disallowを設定していないためです。
  • 6行目にはWebサイト・アプリのURL（ベース）が表示されています。
  • 9行目には今回生成されたサイトマップのURLが表示されています。これでURLとしてサイトマップにアクセスできるようになりました。

Vercelへのデプロイ

通常通りVercelへデプロイします。これで"https://~（Webサイト・アプリのURL（ベース））/sitemap.xml"にアクセスできるようになります。

Google Search Console（サーチコンソール）への登録

最後に、Google Search Console（サーチコンソール）にサイトマップを登録していきましょう。 何も登録されていない場合、サーチコンソールを開くと下のような画面が表示されます。「URLプレフィックス」の方に、"https://~（Webサイト・アプリのURL（ベース））/"を入力しましょう。 すると、下のような「所有権の確認」というモーダルが表示されます。「おすすめの確認方法」という表示とともに「HTMLファイル」のダウンロードが可能となっていますがこちらは利用せず、今回は「その他の確認方法」から「HTMLタグ」を選択しましょう。ここでは指示通り<head>タグ内に表示されているメタタグを追加します。※メタタグ追加後反映に時間がかかる可能性があります。

少し時間を空けてから上の画面で「確認」を押すと所有権の確認が完了し、下のような管理画面に移動できます。 管理画面に移動したら、画面左側のナビゲーションから「サイトマップ」をクリックすると「新しいサイトマップの追加」というセクションが表示されるので、ここでsitemap.xmlと入力し、「送信」ボタンを押してください。「サイトマップを送信しました」というダイアログが表示されたらサイトマップ送信の作業完了です。ダイアログで隠れて見えませんが、「送信されたサイトマップ」のセクションが表示され、ステータスが「成功しました」となっていることが確認できます。

まとめ

なお、作業完了後すぐにインデックス登録されているわけではないため、この時点でGoogle検索をしても検索結果には表示されないかもしれませんが、気長に待ちましょう。

参考


記事をシェアする


関連する記事

よろしければこちらの記事も参考にしてみてください。

Loading...



記事一覧へ