「noindexとnofollowの意味を後輩など他人にわかりやすく説明する自信がない」
「ブログ運営を任されて色んなマーケティング用語がわからず混乱している」
「noindexとnofollowはSEO対策のために使用するものだと思っている」
本日はそんな方に向けてnoindexとnofollowの意味を解説してみたいと思います。
プログラミングとマーケティングの両方の知識になるので、初学者向けの教材やスクールでは詳しく教えられることが少ないです。
とはいえ意外と日常的に使う言葉なので、知らない方は今日を機会に理解しておきましょう。
また動画もあるので必要に応じて活用してください。
noindexとは何か？
まずnoindexから説明していきます。
ものすごくシンプルに説明すると「GoogleやYahooの検索一覧に載せたくないページに使用するもの」ということです。
サイトやアプリをWeb上にアップロードすると、基本的には全てのページが検索エンジンで検索できる状態になります。
「ググる」なんて言葉があるくらい検索する行為は私たちにとって無くてはならないものですが、開発者やサービス運営者からすると「このページは検索されたくない」というものがあったりします。
例えば以下のような事例です。
・本人がログインしないと見れない想定の会員ページ
・顧客に進捗を共有するために公開したテスト用のページ
・別サイトに移転させたブログ記事
意外と誰でも遭遇しそうな事例ではないでしょうか？
そんな感じで不特定多数のユーザーに見られたくないページはnoindexという設定をすることでGoogleに配慮してもらうことができます。
もちろんURLをそのまま入力したら結局は辿り着いてしまうので完全にシャットアウトするわけではありません、あくまで検索一覧に載らないということです。
URLをそのまま入力することも踏まえて完全にシャットアウトしたいページについては、そもそもWeb上にアップロードしない、もしくはベーシック認証をかけるなど別の対策をしましょう。
noindexの設定はHTMLのheadタグの中でmetaタグを使って以下のように記載します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ここに追加 -->
<meta name="robots" content="noindex" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<h1>会員ページ</h1>
</div>
</body>
</html>たった1行なので簡単ですね、これくらいなら覚えてしまいましょう。
またnoindexを解除したいときは上記のコードを削除すればOKです。
nofollowとは何か？
noindexと一緒に語られることの多いnofollowは、noindexとは全く違う目的で使用します。
nofollowをとてもシンプルに説明すると「他のサイトへのリンクを貼った時に、リンクを貼ったことを知らせたくない」というものです。
そもそもWebサイトというものは別のサイトへのリンクをaタグなどで設置すると、リンク先のサイトに自分のサイトの影響力が反映されるようになっています。
私たちの生活の行動で置き換えると「紹介」が一番近いと思います。
インフルエンサーや著名人からの紹介を受けた人は、一般的に評価が上がりやすくなります。
それと同じようにWebサイトではリンク元のサイトの影響がリンク先のサイトに反映されます。
基本的には良いことであることが多いのですが、この現象を逆手にとって悪用する人がいるのも事実です。
実生活でも有名な人から紹介を受けたことを利用して詐欺や悪質な商売をする人が一定数います。
そんな感じで紹介したことを無かったことにすることがWebの世界ではnofollowという言葉で実現できます。
こちらもnoindexと同じく簡単なコードを記載するだけです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ここに追加 -->
<meta name="robots" content="nofollow" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<h1>会員ページ</h1>
</div>
</body>
</html>ちなみにnoindexとnofollowの両方を設定する場合もあります。
その場合にはmetaタグのcontent属性の値の中で「,」区切りで書きます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ここに追加 -->
<meta name="robots" content="noindex", nofollow />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<h1>会員ページ</h1>
</div>
</body>
</html>noindex、nofollowともに知らない人からすると意味不明な言葉ですが、実際にはとても身近なものなんですね。
またプログラミングに併せてマーケティング的な要素も絡んでいますので重要なものです。
初学者の方も作ることだけでなく、運営することにも少しずつ興味を持っていきましょう。