Next.js アプリをクローラーによるインデックスを防止し、検索結果に表示させない
目的
Next.js のステージング環境を構築したが、検索結果にインデックスされたくない。
将来的に構築する本番環境は、インデックスして欲しい。
どのように設定すると実現できるか。
前提条件
対象アプリは Next.js v14.0.4 を使用している。
現在、ステージング環境を Vercel にホスティングしている。
本番環境は未構築であるが、将来的に構築予定である。
インデックス防止の必要性を把握する
インデックスされた後、検索結果から削除するための作業に対し、手間がかかると感じる。
ステージング環境がGoogleの検索結果に乗ってしまった時にやった対処方法まとめ.md
検索結果にステージング環境がインデックス防止したい場合、アプリケーションを公開する時点で設定すると良さそう。
robots.txt とメタデータの robots 比較
類似の単語があるため、意味を把握する。
robots.txt
robots.txt ファイルは、クローラーにサイトのどのファイルへのアクセスを許可するか、管理できるファイルです。
ref: robots.txt の書き方、設定と送信 | Google 検索セントラル | ドキュメント | Google for Developers
Robots.txt は通常、ウェブサイトのルートに配置されているファイルです。このファイルは、クローラー からウェブサイトへのアクセスを許可するか、禁止するかを決定します。
例えば、サイト管理者はクローラーが特定のフォルダー（とそこに含まれるすべてのファイル）にアクセスしたり、特定ファイルをクロールするのを禁止でき、通常はこれらのファイルが他の検索エンジンによってインデックスされることを防ぐために使われます。
ref: Robots.txt - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
メタデータ
robots meta タグを使用すると、個別のページを Google 検索結果でインデックスに登録してユーザーに表示する方法をページ単位で詳細に制御できます。対象ページの <head> セクションに、robots meta タグを次のように配置します。
ref: Robots meta タグ、data-nosnippet、X-Robots-Tag の設定 | Google 検索セントラル | ドキュメント | Google for Developers
協力的なクローラー、つまり「ロボット」がページに対して使用すべき動作です。
ref: 標準メタデータ名 - HTML: ハイパーテキストマークアップ言語 | MDN
Next.js における robots.txt 設定の選択肢
案1: 静的ファイルを作成
Next.js の App Router ならディレクトリ直下に txt ファイルを配置する。
Metadata Files: robots.txt | Next.js
余談だが公式が robots.txt の存在意義を説明してくれている。
What is a robots.txt File? - Crawling and Indexing | Learn Next.js
案2: robots.txt コンポーネントを定義
robots.txt 用のコンポーネントと画面を実装し、ルーティングを用意する。
userAgent やアプリケーション環境など、ロジックでルールを制御したいケースで使用する。
なお、 Next.js なら MetadataRoute.Robots コンポーネントで定義できる。
案3: デプロイ時に自動生成
デプロイフローに robots.txt ファイルを生成する。
実装例として、東京都の新型コロナ保健医療情報ポータルサイトは、デプロイ時において GitHub の Workflow で自動生成する。
案4: アクセス制限
ステージング環境にアクセス制限をかける。
選択肢は多種多様と感じることから、一部のみ抜粋する。
Vercel にデプロイする場合、 Vercel Authentication 機能で設定できる。
How do I add password protection to my Vercel deployment?
flawyte/vercel-basic-auth: How to add BASIC AUTHENTICATION to a VERCEL deployment for FREE using various techniques.
Vercel の無料プランは商用利用が不可なので、商用の場合はレンタルサーバを借りて、Basic 認証を設定する選択肢もあり。
GitHub Actions から Basic 認証つきの格安環境にデプロイする方法 - ahuglajbclajep
Next.js におけるメタデータ robots 設定の選択肢
案1: Head コンポーネントに meta タグを定義
通常の HTML タグとして定義する。
ページやアプリケーション環境など制御したいケースがある場合、動的に定義できる。
import Head from "next/head"
export const MetaTag = () => {
return (
<Head>
<meta name="robots" content="noindex" />
</Head>
)
}
案2: Metadata コンポーネントを定義
layout.js または静的な page.js ファイルにおいて、 Metadata コンポーネントを定義する。
Optimizing: Metadata | Next.js
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: '...',
description: '...',
}
選択肢の検討
robots.txt
案1は、無し。
今回はアプリケーションの環境別に表示分けしたい。
案2は、環境別に表示分け可能なため、選択肢として良い。
案3は、無し。
個人的に Web に公開するファイルの観点から、 robots.txt もリポジトリで管理したい気持ちあり。
案4は、Vercel にデプロイする場合、選択肢としてあり。
個人的に Vercel Authentication を試してみたい。
メタデータ robots
どちらでも良い。
強いて言うなら、Next.js 選定の観点から、メタデータを一括管理できるコンポーネントを持つ案2が良さそう。
選択肢の決定
インデックス防止策として、Metadata コンポーネントを実装する。
よく考えると、robots.txt は不要だったため実装しない。
robots.txt は Web サイト全体に対し、アクセス許可不許可を定義したり、サイトマップを定義する。今回の目的はインデックス防止なので、クロールは気にしなくて良いと判断した。
実装
公式リファレンスの通り、 layout.tsx で Metadata コンポーネントを定義する。
Optimizing: Metadata | Next.js
Functions: generateMetadata | Next.js
robots の設定内容は、Google の提供情報を参考にして、好みに設定する。
Robots meta タグ、data-nosnippet、X-Robots-Tag の設定 | Google 検索セントラル | ドキュメント | Google for Developers
export const metadata: Metadata = {
title: '...',
description: '...',
robots: {
index: false,
follow: false,
nocache: true,
noarchive: true,
noimageindex: true,
nosnippet: true,
},
};
あとがき
上記の実装はステージング環境向けに記述したことから、本番用の設定が今後必要になる。
本番用の Metadata は、本番環境を構築するタイミングで実装すること。
Discussion