はてなブログでのnoindexメタタグ設定の裏技: 個別記事の検索エンジン非表示を実現する方法

Blog Admin

この記事では、はてなブログで個別記事に対してnoindexの<meta>タグ（メタタグ）を指定する方法に焦点を当てます。

通常、はてなブログではブログ全体に対して、は設定箇所がありますが、記事ごとの「noindex設定」がサポートされていません。そのため、公開した記事はすべて、検索エンジンに表示されてしまいます。

しかし、本記事ではちょっとした裏技を使うことで、ブログ全体は公開し、特定の個別記事に対して検索エンジンから非表示にする手法を紹介します。

初心者にもわかりやすく解説し、その他にもクローラ、SEO的メリット、UX 向上の観点からも掘り下げています。裏技のコードや、応用例にも触れ、はてなブログに限らずサイトユーザーにとっても役立つ情報を提供しています。

とくにSEO戦略やプライバシー保護に関心のある方にとっては、有益な内容となっています。 😊

今回、記事の執筆・コードの作成にあたり、つくたろうさんの下記の記事を参考にさせていただきました。ありがとうございました。

1. はじめに
2. 「noindex」とは？
- noindex メタタグの用途
3. 「インデックス」とは？
4. 個別記事に「noindex」を指定する方法
- 記事の冒頭が良い理由
- ソースには表示されない
  - 確認方法
  - Google Search Console
4. クローラとは？
- クローラの役割
5. ユーザーのメリット
- SEO的に見たメリット
- UX（ユーザーエクスペリエンス）
6. 裏技の応用
- 他のメタタグやスタイリングの応用例
7. まとめ

1. はじめに

はてなブログは多くのユーザーに利用されているシンプルで使いやすいブログプラットフォームですが、個別記事に対してnoindex を指定する設定がデフォルトで提供されていないのが課題です。検索エンジンに表示されることが望ましくない特定の記事がある場合、その記事を非表示にする方法を探している方も多いでしょう。本記事では、そんな課題を解決する方法を紹介します。

2. 「noindex」とは？

noindex は、ウェブページのHTMLコード内に組み込まれるメタタグであり、このタグを使用することで検索エンジンのクローラに対し、「このページを検索結果に表示しないでください」と指示することができます。

通常、noindexが設定されたページは、ユーザーが検索エンジンでキーワードを入力しても、その検索結果に表示されません。これは、特定のページを検索エンジンのインデックスから除外するための手法であり、プライバシーの確保や、制限付きのコンテンツを持つページを非公開に保つのに役立ちます。

noindex メタタグの用途

noindex メタタグは、主に以下の用途で使用されます：

SEOの制御:
ウェブサイトのSEO戦略の一環として、特定のページを検索結果から排除することが望ましい場合に利用されます。これにより、クローラがそのページをクロールしてインデックスに登録しないようになります。
プライバシーの確保:
一部のページは一般の検索結果に表示されたくない場合があります。個人情報や限定公開のコンテンツなどを含むページにnoindex を適用することで、それらの情報を検索エンジンに露呈させずに保護できます。

noindex を設定してから反映されるまでのタイミングは、クローラが再度そのページを巡回するまでとなります。ウェブサイト全体でnoindexを使用する場合、その効果が確認できるまでには時間がかかることがあります。したがって、noindex の設定後、クローラによる再巡回を待つことが重要です。

まとめると、noindex はウェブページの検索エンジンにおける可視性を制御するための重要なツールであり、正しく活用することでサイトの管理やプライバシー保護に寄与します。

3. 「インデックス」とは？

ではそもそも、インデックスって何のことなんでしょうか？

検索エンジンのインデックスとは、検索エンジンのデータベースに登録されている辞書で言う「索引」のことです。検索エンジンは、この索引から情報を引き出して、検索結果を出力しています。

つまりインデックスとは、検索エンジンがウェブページに記載されたテキスト、画像、動画ファイルなどを解析し、検索アルゴリズムに適した状態でデータベースに登録することを意味します。インデックスされていないウェブページは、ユーザーがキーワードを検索しても検索結果に表示されません。

インデックスは、皆さんがよく知る Google や Yahoo! JAPAN などの検索エンジンで使用されており、Google はざっと数千億ものWebページを、検索インデックスとして保持していると言われています。

SEO（検索エンジン最適化）の基礎中の基礎になる部分ですが、ページ数の多いサイトなどはインデックスされない、という課題も頻出します。

4. 個別記事に「noindex」を指定する方法

やっと本題ですが、はてなブログでは記事ごとの「noindex設定」が用意されていません。しかし、ちょっとした裏技を利用することで、個別記事に対しても検索エンジンから非表示にすることができます。その方法を今から示します。

下記のコードを記事の冒頭に追加

<script>
  var newMeta = document.createElement("meta");
  newMeta.setAttribute("name", "robots");
  newMeta.setAttribute("content", "noindex");
  document.getElementsByTagName("head")[0].appendChild(newMeta);
</script>

このスクリプトは、<head> 要素内に下記のようなメタタグを生成します。

<head>
  <!-- 以下のコードを記事の <head> 内に追加する -->
  <meta name="robots" content="noindex">
</head>

このJavaScript コードを、記事の冒頭（を推奨）に追加することで、ブログ全体ではなくその記事だけ、検索エンジンのクローラによるインデックスから除外されます。エディタが「編集見たまま」モードなら、「HTML編集」でコードを貼り付けて下さい。

コードの詳細な解説を開閉

このコードは、HTML文書のheadセクションに新しいmeta要素を追加し、そのmeta要素にname属性が "robots" で、content属性が "noindex" であることを指定しています。これは、ウェブページが検索エンジンにインデックスされないようにするためのメタ情報を設定しています。

以下はコードの詳細な解説です：

var newMeta = document.createElement("meta");:
新しい meta 要素を作成し、それを newMeta 変数に格納しています。
newMeta.setAttribute("name", "robots");:
newMeta 要素に "name" 属性を追加し、その値を "robots" に設定しています。これにより、この meta 要素は検索エンジンのクローラに対してウェブページの内容を制御するための情報を提供します。
newMeta.setAttribute("content", "noindex");:
同様に、"content" 属性を "noindex" に設定しています。これは、検索エンジンに対してこのページをインデックスしないように指示するためのものです。"noindex" は、検索結果から除外されるべきページであることを示します。
document.getElementsByTagName("head")[0].appendChild(newMeta);:
head タグを取得し、その子要素として新しい meta 要素を追加します。これにより、上で設定したメタ情報が HTML ページの head セクションに挿入されます。

このコードの主な目的は、ウェブページを検索エンジンのクローラから非表示にし、インデックスから除外することです。これは、特定のページが検索結果に表示されたくない場合や、開発中のページなどに適しています。

記事の冒頭が良い理由

<head> 要素はページのメタ情報、スタイルシート、スクリプトなど、ページの構造以外の情報を含むセクションであり、ここに配置された要素はページのロード前に処理されます。メタタグによるnoindexの指定が <head> 内にあることで、指示がいち早くクローラに伝えられ、検索エンジンがページを評価する際に効果が得られやすくなります。

ただしはてなブログでは、<head> 内に記事ごとにコードを配置する設定がありません。そのため、上記のスクリプトで動的に記事内にnoindex を指定するメタタグを配置することになります。

以上をふまえ、また、ページの読み込み速度や UX（ユーザーエクスペリエンス）の向上も考慮して、スクリプトは記事の冒頭に配置することが推奨されます。一番下に配置した場合、ページが完全に読み込まれるまでにnoindexの指示が遅れる可能性が高まります。

ソースには表示されない

©nyanco

スクリプトコードを記事に書いたけど、本当にページに noindex が正しく反映されているのかどうか、気になりますよね。

ページの html の<head>～</head>内に、<meta name="robots" content="noindex"> というタグが生成されていれば、noindex は正しく設定されていることになります。

ただし、ページの読み込み時に動的に noindex の <meta> 要素が生成されているため、ページを右クリック（もしくは、Ctrl + U ）して「ページのソースを表示」し、ソースを確認しても、<meta name="robots" content="noindex"> は見当たりません。

ですので、<meta> 要素がちゃんと生成されたかどうかを確認するには、ブラウザの開発者ツールを使用してDOM（ Document Object Model ）を調査します。

確認方法

確認するには、一つの例ですが、以下の方法があります。

確認したいページで「右クリック -> 検証／開発者ツールで調査」か「 F12キー」を押し、開発者ツールを起動。
上のメニューから「Elements」という項目を選択。※メニューの１番左にあり、開発者ツールを起動したときにカレントになっています。
表示されている HTMLコードから <head～で始まるタグを探す。
見付かったらクリック。左に「」マークが現れ、コンテキストメニューが表示される。
メニューから「Edit as HTML」を選択。<head> タグ内のコードがオープンになる。
「右クリック -> すべて選択」もしくは「 Ctrl + A 」で全文をコピー。
テキストエディタなどに全文を貼り付ける。
エディタの検索機能を使って <meta name="robots" content="noindex"> を検索する。

Google Search Console

Googleのサーチコンソールに noindex が反映されるまでには時間がかかり、クローラの巡回のタイミングによっても様々です。数日で反映される場合もあれば、1カ月程度かかるケースもあるようです。

確認するには、

Google Search Console を開く
左のメニューから「インデックス作成 -> ページ」を選択。
「ページがインデックスに登録されなかった理由」という項目に移動。
「理由」の欄に［ noindex タグによって除外されました］という項目が見付かれば、そこをクリック。

「例」という項目の URL 欄に設定したページのアドレスがあれば、無事反映されていることになります。

4. クローラとは？

先ほどから文中に頻出している「クローラ」について、ここで簡単に説明します。

クローラとは、インターネット上のあらゆるWebサイトの情報を取得して、自動的に検索データベース化する巡回プログラムのことです。情報を取得しながらWebサイトを這う（クロールする）ことから、このような名称が付けられました。クローラがサイトを巡回し、検索エンジンが検索結果の表示順位を決めるために必要な要素を収集します。クローラは検索エンジンによって呼び名が異なり、代表的な検索エンジンとそのクローラは以下のとおりです。

Google - サーチボット
Bing - 検索ロボット

クローラは、次のような呼び方でも呼ばれます。

Bot（ボット）、スパイダー、ロボット

クローラの役割

以下に、クローラの基本的な役割を時系列で示します：

スタートURLの決定:
クローラは最初にクロールを開始するためのスタートURLを指定します。これは、クロール対象のWebサイトやページのリンクを含むURLです。
ウェブサイトの巡回（クローリング）:
スタートURLから始まり、そのページに存在するリンクを取得して、次にクロールするページを決定します。これを再帰的に行い、Webサイト全体を巡回します。
robots.txtの尊重:
「robots.txt」というファイルを閲覧して、クロールが許可されているかどうかを確認します。robots.txtは、Webサイトの管理者がクローラに対し、どのページをクロールしてよいか、を指定するための標準的な方法です。
ページのダウンロード:
クローラは各ページをダウンロードし、そのページのHTMLコードやコンテンツを取得します。
ページの解析:
ダウンロードしたページを解析し、タイトル、メタデータ、ヘッダー、本文などの情報を抽出します。
URLの抽出:
ページ内のリンクを抽出して、次にクロールするべきURLを収集します。このとき、重複したURLは回避するようになっています。
データベースへの格納:
クローラが取得した情報は、検索エンジンのデータベースに格納されます。これにより、検索エンジンが検索クエリに対して迅速かつ適切な結果を提供できるようになります。
スケジューリングと再クロール:
定期的にスケジュールされ、更新されたコンテンツや新しいページを検出するために再クロールを実行します。
インデックス作成:
取得したデータは検索エンジンのインデックスに組み込まれます。これにより、検索エンジンはユーザーの検索クエリに対して素早く正確な結果を提供できるようになります。
検索結果の提供:
最終的に、ユーザーが検索エンジンでクエリを実行すると、クローラによって収集されたデータから検索結果が生成され、ユーザーに返されます。

以上が、クローラがウェブ上の情報を取得して検索エンジンのデータベースに格納し、ユーザーに検索結果を提供する基本的な流れです。

クローラが集める情報に基づいて検索エンジンが検索順位を決めるため、Webサイトを運営する上でクローラを理解することは非常に重要です。SEO対策には、このクローラが正しく自サイトの情報を収集してくれるようにしておく対策も、含まれます。

5. ユーザーのメリット

この裏技を活用することで、はてなブログのユーザーには、以下のメリットがあります。

個別記事の非表示:
特定の記事が検索エンジンのクローラにnoindex（インデックスされなくなる）となります。そのため検索に掛からなくなるので、ブログの公開範囲を調整することができます。これにより、個人的なメモやコンテンツを限定的な公開に保つことができます。
プライベートな記事の保護:
ブログ全体を非表示にするのではなく、特定のプライベートな記事だけを非表示にすることが可能です。これにより、一部の記事だけが限定公開となり、一般の読者には見えなくなります。

SEO的に見たメリット

個人／企業を問わず、サイトのSEO的な観点でまとめると、特定の記事をnoindex にするメリットは以下のようになります。

コンテンツの品質維持:
検索エンジンにインデックスさせるかどうか、noindex の指定を選択することで、ブログの総合的な品質を維持するよう制御できます。
重複コンテンツの回避:
特定の記事が他のページと類似しており、重複コンテンツのリスクがある場合、noindex を設定することで検索エンジンがそのコンテンツをスルーし、重複の問題を回避できます。
フォーカスされたSEO戦略:
特定の記事をnoindex にすることで、残りのコンテンツにSEO戦略を集中できます。公開範囲を絞り、重要なコンテンツに焦点を当てることができます。
セキュリティとプライバシー:
プライベートな情報や内部ドキュメントなど、公には表示されたくないコンテンツがある場合、noindex を設定することで、検索エンジンを通じてアクセスされるリスクを低減し、セキュリティとプライバシーを強化できます。
UX の向上:
検索エンジン経由で表示されるべきでないコンテンツが表示されないことで、UX が向上します。ユーザーはより関連性の高いコンテンツにアクセスしやすくなります。
検索エンジン結果の最適化:
特定の記事をnoindex にすることで、SERP（検索エンジン結果ページ）がより重要なコンテンツで埋められ、クリック率が向上する可能性があります。
一時的なコンテンツの制御:
イベントやプロモーションなど、一時的な性格の記事は期限が過ぎた後にnoindex にして、検索結果から自動的に除外することができます。

ただし、noindex の利用は慎重に行う必要があります。具体的な戦略に基づいて、どの記事をnoindex にするかを検討することが重要です。

UX（ユーザーエクスペリエンス）

UX（ユーザーエクスペリエンス）とは、あらゆる製品やサービスを通してユーザーが感じる使いやすさ、感動、印象といった体験すべてを指します。

UX は、ユーザーが何かを使用する際に感じる全体的な感情や満足度を指し、それは製品、サービス、ウェブサイト、アプリケーションなどの使用に関する包括的な経験を意味します。UX の目標は、ユーザーが製品やサービスを使うことで得られるポジティブな感情や効果を最大化し、同時にユーザーにとっての利便性や満足度を向上させることです。

UX の向上は、ユーザーの快適性、使いやすさ、信頼性の向上に貢献し、結果として製品やサービス、サイトの成功に繋がります。

6. 裏技の応用

この裏技は、単にnoindexを設定するだけでなく、他のメタタグやスタイリングの応用も可能です。

例えば、特定の記事に注意喚起メッセージを表示するためのスタイルを設定することもできます。記事の公開範囲やスタイルに合わせて柔軟に利用してみてください。以下はいくつかの例です。

他のメタタグやスタイリングの応用例

記事の表示や挙動に関するカスタマイズ

1. 注意喚起メッセージの追加:

特定の記事で注意が必要な場合、例えば古い情報や重要な更新事項がある場合、記事に注釈や注意喚起メッセージを追加することができます。これには、HTML や CSSを使用して特定のスタイル、メッセージを挿入します。

<script>
  // 記事冒頭に注意喚起メッセージを追加
  var warningMessage = document.createElement("div");
  warningMessage.innerHTML = "<p>重要なお知らせ: この記事は古い情報を含んでいます。</p>";
  document.body.insertBefore(warningMessage, document.body.firstChild);
</script>

2. 特定の記事にスタイルを適用:

特定の記事にスタイルを適用して、例えば背景色を変更することで目立たせたり、特定のデザインを適用することができます。

<script>
  // 特定の記事にスタイルを適用
  var articleStyle = document.createElement("style");
  articleStyle.innerHTML = "body { background-color: #ffcccc; }";
  document.head.appendChild(articleStyle);
</script>

3. その他のメタ情報の追加:

特定の記事に対し、他のメタ情報を追加することもできます。これにより、検索エンジンが正確な情報を取得しやすくなり、ユーザーエージェント（ブラウザなど）が適切にページを解釈するのに役立ちます。

<script>
  // 特定の記事にメタ情報を追加
  var additionalMeta = document.createElement("meta");
  additionalMeta.setAttribute("name", "description");
  additionalMeta.setAttribute("content", "特定の記事の追加の説明文");
  document.head.appendChild(additionalMeta);
</script>