リンクを作るaタグの中でよく見かける「rel=”○○”」の表記、それがrel属性。

僕はこのrel属性について、これまで「nofollowはPageRankを引き渡さない」という程度の認識しかありませんでしたが、そろそろしっかり覚えようと思ったので、よく見る「nofollow」「noreferrer」「noopener」の3種類について学び直しました。

先日は「target=”_blank”問題」（詳しくは後述）なんてものもあり、どういう働きを持つものなのかを知っておかないと足元をすくわれそうな気がしますからね……。

というわけで、備忘録的なブログ記事です。

スポンサーリンク

rel属性の役割

rel属性というのは、現在のドキュメントとリンク先のドキュメントの関係性（＝リンクタイプ）を示すものです。

属性値として使用することができるものについては、下記サイトが一覧にしてくれていますので、一度見てみることをおすすめします。

参考記事 rel 属性 | HTML5 タグリファレンス | W3 Watch Reference

そう、思ったより種類があるんですよね。全然使ったことがないものもちらほら。全部網羅しようと思ったらかなり奥が深そうです……。

本記事ではあくまでも頻出の3つに絞って説明していくので、ご了承ください。

nofollowの役割

nofollowは該当の外部リンクを自分のサイトと関連付けたくないときに使用する値です。リンクはしているが信頼できるリソースとは言えない場合や、何らかの理由で自分のサイトからそのリンク先をクロールさせたくないときに用います。

SEO的には「リンク先へPageRankを受け渡さない」という効果があるため、検索エンジンにおいて上位表示を狙うWeb担当者やアフィリエイターはこの値の有無をかなり気にしていますね。

使い方としては、たとえばコメントスパム対策が挙げられます。コメント欄に書き込まれたリンクに自動でnofollowを付与することにより、コメント欄を悪用してPageRankを獲得するスパム行為の対策をすることができるのです。

2019年9月より「命令」から「ヒント」扱いに

このnofollow、これまでは「命令」としての扱いだったのですが、2019年9月からは「ヒント」として扱われるようになりました。

つまり、絶対的な命令でなくなるため、nofollowを付けていてもリンク先を評価する可能性があるということです。

※今回のタイミングで新たに追加されることになった「sponsored」「ugc」のrel属性については下記記事で書きました。

関連記事 rel属性に追加された「sponsored」「ugc」の説明

noreferrerの役割

こちらは割と読んで字のごとく。リンク先へリファラ（参照元）を渡さないようにする属性値です。

意識して使うとしたら、URLに知られたくない情報が入っているときですかね。単純に自分のサイトからの流入であるとバレたくないケースの他に、ユーザーIDなどがURLに含まれてしまっている場合も考えられます。

ただ、アクセス解析で参照元を分析したい人や、どのサイト（ページ）から成果が発生したのかを知りたいアフィリエイターにとっては、できれば付いていて欲しくない属性値でしょう。笑

noopenerの役割

よく見かけるものの中でこれが一番理解しにくいかもしれません。言葉だけを見ても意味と用途がわからないですよね。

効果としては「パフォーマンス低下回避」「脆弱性回避」の2つが挙げられます。技術的なところは詳しい記事がありましたので、そちらをどうぞ。

参考記事 HTML 本当は怖い target=”_blank” 。rel=”noopener” ってなに？ – かもメモ

特に後者の「脆弱性回避」は非常に重要で、noopenerは「Tabnabbing」と呼ばれるフィッシング詐欺等に使われる手法への対策を行うことができるのです。要はセキュリティ上の理由で主に付与されるものということですね。

詳しい説明は下記の大変わかりやすい記事に任せますが、リンク先を新しいタブで開く「target=”_blank”」を使用している場合、リンクをクリックした際に元ページのURLを勝手に書き換えることができてしまうとか。

参考記事 リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io

このような挙動は「target=”_blank”」の脆弱性として知られているため、「target=”_blank”」が付いているリンクでは自動的にnoopenerも付与されていることが多くなっています。noopenerを付けることで、元ページURLの書き換えを防いでいるのです。

「target=”_blank”問題」について

noopenerが付与されていない「target=”_blank”」において、一部の環境では正常に飛び先ページが開かないという現象が話題になりました。

これがいわゆる「target=”_blank”問題」と呼ばれるものであり、正常にリンク先へ遷移しないことからチャンスロスへ繋がるとして、特にアフィリエイト界隈で問題視されました。

noopenerが付いていれば遷移できると言われているので、やはり「target=”_blank”」を入れるならnoopenerは絶対に入れるべきですね。

まとめ

改めて確認してみると、あってもなくても大して違わないように思えていたrel属性の大事さがわかりますね。特にnoopenerに関しては、target=”_blank”を使う際には必ず入っているかどうか気を配った方が良さそうです。

nofollowに関しても、「PageRank渡したくないから外部リンクは全部nofollowつける」みたいな不誠実なサイト運営は意味がなくなっていきそうで、これはサイト全体の健全化へ向かう良い変更だと思いました。

やはりサイトやブログを運営している以上、こういった知識はしっかり仕入れておいた方が良いですね。