a要素のnofollowやnoopener、noreferrerについてまとめ

こんにちは、mickです。

Webページでリンクを貼るときに使うa要素。
rel属性に nofollow や noopener が使えるけれどいつどんなときに使えばいいのか、いまひとつ理解してませんでした。

ということで、この記事でまとめた内容を紹介したいと思います。

a要素のrel属性に指定する値の代表3つ
まとめ。

a要素のrel属性に指定する値の代表3つ

a要素につかうrel属性。
そのときに設定する値は3つ。

nofollow
noopener
noreferrer

それぞれについて、使い方も含めて紹介です。

nofollowは検索エンジンのリンクの巡回を止める

a要素に rel=nofollow を指定すると、Webページを作成した人はリンク先のことを推奨していない意思表示をする意味がつきます。

Webサイトを訪れた人がこのリンクが付いたページを踏んでも、その先についてはページランクに影響しない動作をする、と考えられてます。

また、検索エンジンはWebページ内のリンクをたどってWebページを巡回（クロール）しますが、nofollowのリンクの先は巡回しなくなります。

ただnofollowのリンク先を検索エンジンが巡回しなくなったのは過去の話。
2020年3月以降、Googleが先頭になって仕様が変わってます。
詳細は続いて書いています。

よくある使い方：コメント欄に入力されるスパムリンク対策

nofollow が使われるようになった経緯でもあるスパムリンク対策の話

ブログのコメント欄に全く関係のない宣伝リンクが貼られることがあります。

以前は、まだ検索エンジンはこの宣伝リンクも巡回。結果としてページランクが上がっていました。つまり、Webページにまったく関係のないリンク先のページランクを上げてしまっていたわけ。

それを防ぐために、コメント欄に記載されるようなリンクには nofollow を付けるようになったわけ。

nofollowが誕生したあと、検索エンジンはコメント欄に書かれた宣伝リンクを巡回しないですむようになりました。

よくある使い方：アフィリエイトリンク先など広告（有料リンク）通知

Googleでは、アフィリエイトリンクや広告リンクをまとめて有料リンクという

自分のWebサイトが、アフィリエイトリンクまで巡回するように許可をしていると、Webサイトのページランクがあがりません。

アフィリエイトリンクは、いわゆる広告リンク。広告のWebページをGoogleなど検索エンジンは、ページランクを上げないようにしているから、巡回に協力しているとみなしたWebサイトの評価をさげるわけです。

つまり nofollow を付けて、検索エンジンが広告リンクの先を巡回しないように検索エンジン側に協力することで、考えられた有用なWebページだと検索エンジンに伝えます。

アフィリエイト会社はこのことを知っています。
だからアフィリエイト会社が生成したアフィリエイトリンクを確認すると、 nofollow がついているのがわかるはず。

Googleは2020年3月1日より（少し）方針を変えた

Googleは、新しく2つの値（sponsered, ugc）を追加して、nofollowについては「参考にする」という方針に変更した（2020年3月から適用）
ただし、robots メタタグでも利用できる nofollow は従来通り。

最新のWordPressである5.6では、すでに対応済みであることがわかります。

WordPress5.6でリンクを貼るとき、sponsored や ugc も指定できる。

こうなった理由をGoogleのコメントから読み取るとーー

nofollowが2005年に誕生して15年経ち、nofollowの使い方がコメントスパムのリンクと広告リンクに大別されるようになったから、それを明確に扱うようにした。
⇒ Evolving “nofollow” – new ways to identify the nature of links

アフィリエイトリンクなど広告のリンクに使う sponsered

アフィリエイトリンクなど広告のリンクに使うのが sponsered です。

広告や有料プレースメントのリンク（一般に「有料リンク」と呼ばれます）を sponsored としてマークアップします。
Google に外部リンクの関係性を伝える

コメント欄などWebサイト利用者が貼るリンクに使う ugc

Webサイトを利用するユーザーがコメント欄などに貼るリンクに使うのが ugc です。

コメントやフォーラム投稿など、ユーザー作成コンテンツ（UGC）のリンクは、ugc でマークアップすることをおすすめします。
Google に外部リンクの関係性を伝える

1つ以上をrel属性に記述する

rel属性に1つ以上の値をスペース区切り、またはカンマ区切りのリストとして指定できます。

rel=”ugc nofollow”

rel=”ugc,nofollow”

Bingも対応済み

いまではGoogleだけでなく、Bingも sponsered や ugc に対応済みです。

⇒ Bing supports rel=sponsored & rel=ugc

これまでの nofollow はそのままでいい

これまで nofollow を使ってきた分はそのままでいいとGoogleはいっています。

これからは3つを明確に使い分ける方がいい

広告リンクには sponsered
コメント欄などWebサイトを利用するユーザーが貼るリンクには ugc
これら以外で検索エンジンに巡回させたくないリンクには nofollow

GoogleやBingが正式に対応のアナウンスをしているので、これら3つは明確に使い分けることでSEO対策になることが期待できます。

古いシステムに対応したい場合には rel=”sponsered nofollow” や rel=”ugh nofollow” のように平行して使えば大丈夫です。

noopener はセキュリティ対策に使う

リンクをクリックしたときに新しいタブを開くようにするには target=”_blank” を使います。

この仕組みには、セキュリティに穴があるため、対策として rel=”noopener” を使うようになっています。

セキュリティ対策でtarget=”_blank”には暗黙的に noopener が付く

最新のWordPress5.6では target=”_blank” を使うと自動的に noopener が付くようになっています。

またSafariやFirefox、Chromeなどのブラウザ側でも対策がされていて、target=”_blank” を使うときは、自動的に noopener が付いているものとして動くようになっています。

⇒ 「Firefox 79」からtarget=“_blank”なリンクの挙動が変更、より安全な仕様に

⇒ 新規タブリンクの恐ろしい仕様、Chrome 88で変更へ～Safari/Firefoxに合わせた安全な仕様に

なのでHTMLでハードコーディングをするようなケースでない限り、ユーザーが自分で noopener を付けることは、ほとんどないです。

noreferrer もセキュリティ対策に使う

noopener は比較的新しい仕組みなので、対応していないブラウザがある。
そこで noreferrer も使おう、という話しになっています。

ただ、ネット社会の今日で古いバージョンのブラウザを使うケースはないと考えていいと思います。
なのでnoopenerだけで十分というのが私の考えです。

日本の情報処理推進機構IPA。
ここが出している「中小企業の情報セキュリティ対策ガイドライン」。
この中に記載されている「情報セキュリティ5か条」にはこう載ってます。

1.OSやソフトウェアは常に最新の状態にしよう！
OS やソフトウェアを古いまま放置していると、セキュリティ上の問題点が解決されず、それを悪用したウイルスに感染してしまう危険性があります。お使いの OS やソフトウェアには、修正プログラムを適用する、もしくは最新版を利用するようにしましょう。
情報セキュリティ5か条（全2ページ、726KB）

noreferrer が付いているとアフィリエイトリンクが効かなくなる！？

noreferrer が付いているとリファラー情報がわからなくなるため、アフィリエイトリンクが効かなくなる、という話しがでてました。

リファラーというのは、Webページに来てくれたユーザーがどこのリンクから来たのか、という情報のこと。

ノーリファラ (no referer)
WebブラウザからWebサーバに送られる要求データの中に、アクセスしようとしているWebページの参照元ページ（リファラ：referer）の情報が無いこと。
通常、ブラウザがサーバにページを要求する際には、リンク元のWebページのアドレス（URL）を参照元として申告する仕組みになっているが、何らかの理由によりこれが設定されていない状態のことをリファラという。
e-Words「リファラ【referer】リファーラ」

実際にアフィリエイト会社に問い合わせをしてくれた方がいます。

アフィリエイト会社からの回答はすべて → 「成果には影響しない」

それでも不安な方へ…

不安ならアフィリエイトリンクに target=”_blank”を使わない

をオススメします。