【HTML、CSS】noindexを設定する意味と、実際の設定方法について解説！

2025年9月6日2025年9月13日

今回は、noindexの設定方法について解説していきます。

noindexの設定方法は、コーディングを利用するか、それともコーディングを利用しないか（WordPressサイトのブロックエディタで実装するなど）で若干違いますが

どちらも比較的簡単に設定することができます。

noindexを設定する理由

実際にnoindexの設定をする前に、「そもそも、noindexというのはなぜ設定をする必要があるのでしょうか？」について考えてみましょう。

例えば、お客様からWeb制作の依頼を受け、サイトを作っている途中の場合

そのサイトがインターネット上に公開されている状態だとどうなるでしょう？

サイトを訪れた人は、途中までしかできていないサイトを見ているわけなので、困惑してしまい早急に離脱してしまいますし

Googleからの評価も悪くなり、SEO的評価も下がってしまいます。

これは、途中までしか出来ていないページや、改修が必要なページなどでも同じです。

このように、途中までしか出来ていないサイトや、改修の必要があるページなどは

noindex設定をして公開されないようにした場合もあるのです。

noindex設定のやり方

noindexを設定する方法は、コーディングを利用する場合と利用しない場合で若干違いますが

どちらもそこまで難しくないので、まだ覚えていなかったり、忘れてしまった人はこれを機に覚えておきましょう。

コーディングを利用する場合

まずは、コーディングを利用する方法です。

静的サイトにnoindex設定をする場合などがこれに当たりますね。

例えば静的サイトにnoindex設定をする場合は、htmlファイル内に記述をしていきます。

簡単な作業であるため、プログラミングをあまりしたことがない人でも実装はできると思いますが

サイトの制作や改修を頼んでいる制作会社がいる場合は、担当者にお願いして実装してもらうのも1つの手です。

具体的には、下のコードをheadタグの中に入れればいいだけです。

<meta name="robots" content="noindex">

<meta name="robots" content="noindex">

おすすめは、同じようなmetaタグが集まっている下あたりに記述をすることです。

具体的には、下のように設定できていれば問題ないでしょう。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex">
    <title>Document</title>
</head>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex">
    <title>Document</title>
</head>