🐥

next.jsで検索に引っかからないように設定する

2021/11/20に公開

HTML

Next.js

React

tech

やりたいこと

既にデプロイしているサイトを、検索エンジンの検索結果に表示させたくない。

対応策

noindexを設定する。
設定方法は2つあるが、今回はメタタグで設定するやり方で対応する。
サイトページのheadタグ内にnoindexを設定することで、ウェブクローラにインデックス登録されないようにすることができる。

手順

metaタグ用のコンポーネントを作成する。

※コンポーネント化は任意

// src/components/pages/Meta/Meta.tsx

import Head from "next/head"

export const Meta = () => {
  return  (
    <Head>
      <meta name="robots" content="noindex" />
    </Head>
  )
}

_app.tsxで呼び出す

import { Meta } from 'components/pages/Meta/Meta'

function MyApp({ Component, pageProps }: any) {
  return (
    <>
      <Meta />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

実装した内容をサイトに反映後、デプロイしたサイトを確認すると、noindexが設定されているのが確認できる

next.jsで検索に引っかからないように設定する

やりたいこと

対応策

手順

参考サイト

Discussion