Next.js : App Router で noindex を設定する方法

どうもこんにちは、アプリケーションを開発しているフロントエンドエンジニアです。今回は Next.js の App Router において noindex を設定する汎用的な方法について、覚書を兼ねてお伝えしようと思います。

noindex とは

noindex とは、検索エンジンにページをインデックスさせないための指示です。検索結果にページを表示したくない場合に使用します。例えば、ユーザーの個人ページや管理画面など、検索に載せる必要がないページには noindex を設定するのが一般的です。Next.js では、metadata オブジェクトで簡単にこの設定が行えます。

Metadata オブジェクトについては、

Metadata は、アプリケーションのメタデータ（例：HTML の head 要素内の meta タグや link タグ）を定義するための Metadata API 。SEO や Web のシェア性を向上させることができる

とのことです。詳しくは以下のリンクを参照してください。

layout.tsx での noindex の設定

例えば、マイページの noindex を設定したい場合、layout.tsx ファイルで以下のように記述します。このコードは、Google を含む検索エンジンのクローラーにインデックスしないよう指示を出します。openGraph 等は書いても書かなくてもどちらでもよいかと思います。

このように設定することで、metadata オブジェクトに robots プロパティを追加し、index: false を指定することで noindex の設定を行っています。さらに、googleBot プロパティで Google クローラーにも特定の動作を指示できます。

おわりに

noindex の設定は、ユーザーにとって必要ないページが検索結果に表示されるのを防ぐために非常に重要です。特に、プライベートな情報や管理用のページなど、公開する必要がないページには必ず設定しておきましょう。

Next.js の App Router を使った noindex の設定方法は非常にシンプルで、metadata オブジェクトに適切なプロパティを追加するだけでしたね。

今後も、Next.js を使った開発のノウハウを共有していければと思います。それでは、また次回の記事でお会いしましょう。