HTMLのnoindexはどのような書き方と使い方をするのか理解する

HTMLのnoindexはどのような書き方と使い方をするのか理解する

HTMLでnoindexタグを書くときは、どのような書き方をすればいいのか理解できるようにしておこうと思います。

「noindexの書き方」では、noindexの指定をするためにmeta要素に記述する書き方を理解できるようにし、「noindexの使い方」では noindexの意味や効果、そして確認方法や解除方法までのnoindexの知識が理解できるようにしようと思います。

noindexは書き方と使い方を一緒に分かるようにすると「なるほどね」と理解しやすくなります。

 

HTMLのnoindexの書き方

 

まずはHTMLでnoindexを指定する要素を見てnoindexの書き方を理解することにします。

 

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

 

noindexを指定するタグには終了タグは書きません。上記のHTMLコードをnoindexにしたいサイトのページのhead要素に記述することで、noindexページになり検索結果に表示されなくなります。

そして上記のHTMLコードでnoindexを書いた全体の要素をみていただくと理解できるかと思いますが、HTMLの書き方を理解する場合には、正確にはnoindexはタグではないのですね。

一般的にはnoindexタグということがほとんどなので「noindexタグ」でも意味的には通じますが、noindexの書き方をHTMLからみて見るとnoindexはメタ情報を伝えるための属性値としての役割を持っています。

そのためHTMLでnoindexの書き方は、noindexの記述の他にも必要なタグで属性と属性値も使いながら書く必要があります。

 

  • metaタグ
  • name属性と属性値
  • content属性とnoindex

 

これらを全てmetaタグの中でnoindexも含めて指定して、meta要素になる書き方をします。HTMLでnoindexの指定をするためのmeta要素の中の書き方も一つずつ理解できるようにしたいと思います。

 

noindexはmetaタグでメタ情報として書く

 

HTMLのnoindexはmetaタグで要素を作り、ページがnoindexだということを指示します。

 

<meta>

 

metaタグ(meta要素)というのは、HTML文書の文字コードや概要、FacebookなどのOGPなど、文書におけるさまざまなメタデータを表すことができます。簡単にいうと、HTMLページの説明書きのような役割をするのがmetaタグです。

例えば、サイトのページの説明文もメタ情報としてhead要素に書くことで、そのページの概要が分かるメタ情報になります。

 

Advertisement

 

noindexもmeta情報としての書き方をしないと、noindexにすることを伝えることができません。noindexはmeta要素に含まれている属性の属性値だからです。

そのためHTMLでnoindexを書きたい場合は、必ずmetaタグを書いて使用するということを理解しておくようにします。

noindexにするためにmeta情報をmeta要素に書く属性はname属性も書きます。

 

name属性でnoindexを伝えるrobotsを指定

 

name属性はmeta要素の中でnoindexの記述よりも先に記述するように書きます。

noindexにするメタ情報を何に伝えて制御するのかname属性の属性値で指定します。

 

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

name=”robots”

 

基本的にはname属性の属性値に「robots」を属性値として書きます。この書き方により、サイトのページをほとんどの検索エンジンに対してウェブクローラのインデックス登録の除外対象にする書き方として使えます。

またnoindexにしたいページの対象をname属性の値に「robots」ではなくGoogleのウェブクローラーだけにしたい場合の書き方もあります。

 

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

 

name属性の属性値にgooglebotと書きます。

このようにHTMLのmeta要素の中のname属性は、属性値でページのインデックスをしないようにする対象を指定することで、noindexの制御をするために書かなければいけない必要な属性値という理解ができます。

 

contentの属性値でnoindexを伝える

 

HTMLでnoindexを指定するmeta要素にはcontent属性を書きます。

contet属性はmeta要素のメタデータの内容を書く記述部分になり、noindexの場合は以下のHTMLコードのようにcontent属性の属性値にnoindexと記述します。

 

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

content=”noindex”

 

HTMLでnoindexの指定をする場合は、meta要素の中のcontent属性の属性値なので「メタデータの内容」としての役割になっているということがnoindexの書き方から理解できます。

先述してきたnoindexの書き方をまとめると以下の流れになります。

 

  1. metaタグを書く
  2. name属性を書いて属性値をrobotsと書く
  3. content属性を書いて属性値をnoindexと指定する

 

HTMLでnoindexを指定する書き方は記述が少ないので簡単ですが、noindexと一緒に書く属性や属性値を一つずつ理解することで、より書き方の理解が深められた気がします。

 

HTMLのnoindexタグの使い方

 

ここまではHTMLでnoindexの書き方を理解できるようにmeta要素の中に書くことを一つずつ理解してきました。

次は書いたnoindexにはどのような意味があって、どのような使い方をするのか理解すると共に、noindexの確認方法や解除方法まで理解できるようにします。

 

noindexの意味や効果から使い方を理解する

 

まずnoindexの意味は、noindexの記述があるHTMLページにウェブクローラーがインデックスしにきても「インデックスしないようにする」という意味が一番です。「noindexの指定があるHTMLページのインデックスはnoですよ」という意味で理解してもいいかと思います。

そもそも検索結果にHTMLページが表示されるのはウェブクローラーがページのクロールをすることで検索結果のインデックスに登録されて表示できる仕組みです。

 

Advertisement

 

そのためnoindexの「インデックスしないようにする」という意味に効果を持たせるためには、ウェブクローラーがnoindex指定ページの巡回にきたとき「このページはメタ情報にnoindexがあるからインデックスしないページ」という情報を伝えられて、ウェブクローラーが「インデックスしないようにする」効果が出せるようにHTMLのmetaタグでnoindexを記述した使い方をするのです。

このときのnoindexの効果を発揮させるためには、HTMLページの情報を伝える役割をしているheadにnoindex指定をするmeta要素の記述をして使います。

 

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

 

noindexタグの確認や解除の方法も理解しておく

 

HTMLページにnoindexの指定をしているのを確認するときは、noindexにしている該当のページのソースを表示して確認できます。

noindexにしているページの画面でマウスを右クリックすると「ページのソースを表示」があるので選択すると別タブでページのソースの表示ができます。

 

 

そしてcommand+fで開いた入力ボックスに「noindex」と入力するとページ内の単語でnoindexがハイライトできるので、headにnoindexがmeta要素で記述してあるか確認できます。

 

 

noindexの確認ができるようになればnoindexの解除方法も簡単です。

noindexが書いてあるページのHTMLファイルを開いてnoindexの書き方で理解した以下のコードを削除します。

 

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

 

そしてnoindexの削除をしたページをサーチコンソールのURL検査でインデックス登録をリクエストします。以前に有効だった「Fetch as Google」と同じ役割をしてくれます。

このような手順により、noindexだったページはウェブクローラーが次にクロールするときにページをインデックスして検索結果に表示されるようになります。

HTMLカテゴリの最新記事