Next.jsで生成したサイトで特定のページのみnoindexを設定する

公開日時
更新日時

site:sunday-morning.app でindexされたページを確認したところ、タグに紐づく記事一覧ページが先頭に表示されていた。

記事一覧ページではなく記事詳細ページをindexしてほしいので、記事一覧ページをnoindexで除外することにした。

Headコンポーネントに noIndex propsを受け取れるようにして、 meta name="robots" タグを出し分けるように対応。

// components/Head.tsx
import { default as NextHead } from 'next/head'
import React from 'react'

type Props = {
  title: string
  description: string
  noIndex?: boolean
}

export const Head = ({
  title,
  description,
  noIndex = false,
}: Props) => {

  const Robots = () => {
    if (noIndex) {
      return <meta key="robots" name="robots" content="max-image-preview:large,noindex" />
    }

    return <meta key="robots" name="robots" content="max-image-preview:large" />
  }

  return (
    <NextHead>
      <title>{title || defaultTitle}</title>
      <meta key="description" name="description" content={description} />

      <Robots />
    </NextHead>
  )
}

あとはタグに紐づく記事一覧ページでHeadを呼び出す際に noIndex={true} を指定する。

// pages/tags/[slug]/posts.tsx
<Head title={title} description={description} noIndex={true} />

これで特定のページのみnoindexが付与できるようになった。

また、sitemapを生成する時にタグ紐づく記事一覧ページを含めてしまっていたので、含めないように変更した。

ついでにSearch Consoleのインデックス => 「削除」からインデックスの削除リクエストも出しておいた。

次回のクロール時にはnoindexが読み込まれるので、このリクエストが通れば検索結果から消えるはず。

参考


Related #next.js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

PWAアプリにクイックショートカットを追加する

manifest.jsonにshortcutsを追加

Next.js 10.0.1 + React 17.0の環境でTypeError: Object(...) is not a functionエラーが発生

一つ前のReact 16.13に下げてみたらエラーが解消された

Next.jsプロジェクトにTypescriptを導入する

チュートリアルが充実してる

Next.js + typescriptでpathsのエイリアスがModule not foundになる

next.config.jsに追記する必要があった