[HTML] Aタグにおけるrel属性の意味と効果について

とあるASPからGooglePlayに関するこんな情報が届きまして：

Android において、
target=”_blank” のあり/なし ×ブラウザソフト（Chrome）のヴァージョンで
ストアへ遷移しない事象を確認しました。

結論rel属性でnoreferrerかnoopenerが指定してあればおkって話だったけど、知らないとハマりそうです。

Aタグで許可されているリンク種別とその意味

noopenerは比較的新しい種別だから仕方ないにせよ、SEOに効果あり！みたいな見出しと共に紹介されてると微妙な気持ちになります…。
こういうのはお手本通り使ってこそ本来の効果を発揮するものなので、現仕様でAタグに対して有効なものをサンプルコードと共にまとめてみた。

alternate

以下のいずれかの代替ページを定義します。

携帯端末など、別の媒体向けのページ（media 属性を設定した場合）

<a href="print.html" media="print and (resolution:300dpi)" rel="alternate">

別の言語のページ（hreflang 属性を設定した場合）

<a href="hoge-en.html" hreflang="en-US" rel="alternate">

PDF など、別のファイル形式のページ（type 属性を設定した場合）

<a href="foo.pdf" type="application/pdf" rel="alternate">

上記３つを組み合わせてもおk。

author

作者について説明するページへのハイパーリンク、または作者への連絡方法を定義します。

これを mailto: のハイパーリンクにすることがありますが、

<a href="mailto:info@example.com" rel="author">作者へメッセージを送る</a>

早々にロボットが収集して大量のスパムが送信されてしまうため、公開ページでは推奨しません。
このような場合、連絡フォームを設置したページに誘導するとよいでしょう。

<a href="/contact" rel="author">作者へメッセージを送る</a>

歴史的な理由により madeも認識されますが、誤りです。

bookmark

ハイパーリンクが、もっとも近い祖先のarticle要素へのパーマリンクであることを示す。
article要素が存在しない場合は、もっとも密接に結びつけられたセクションへのパーマリンクになります。
※パーマリンクとは、ウェブサイト内の各ページへの恒久的（半永久的）なURLのこと。
これをつけることでSEO的な価値や意味は発生しません。

See the Pen
rel="bookmark" by Tenderfeel (@Tenderfeel)
on CodePen.

 
W3Cのサンプルソース翻訳したのが上記です。
以下はWordpressが出力するソースの例：

<article id="post-2901" class="post-item clearfix post-2901 post type-post status-publish format-standard hentry category-memo">
   <header class="entry-header">
      <h2 class="alpha entry-title">
<a href="https://tenderfeel.xsrv.jp/memo/2901/" rel="bookmark">レスポンシブ ウェブデザインを実装するためのTips</a>
      </h2>
   </header>
   <!-- .entry-header -->
   <div class="entry-content">
      <p>「レスポンシブ」って単語を知らない人でも、ウィンドウをｳｨﾝｳｨﾝさせてコンテンツがついてくるのを見せながら「こういうのがやりたいんですよね～」とか言っちゃうアレです。<br>
         どんなデバイスで見てもいい感じになるようにしろって意味で使われますけど、iPhoneですら１サイズじゃなくなったこのご時世ですよ、面倒な割に気軽に頼まれがちじゃない？
      </p>
      <p>スマホが出だした頃はPC/SPの2パターンあれば満たされたのが、今は…………<img draggable="false" class="emoji" alt="&#x1f644;" src="https://s.w.org/images/core/emoji/12.0.0-1/svg/1f644.svg" scale="0"><br>
         何種類あるかわからない端末に毎年増える解像度、そんなカオスな表示環境にどうやって対応するのよ？？？？？？？？<br>
         とまぁ毎年苦しめられた結果、色々と知見が増えたのでこれまでに調べたり使ったりした「レスポンシブ」を実装するための方法をまとめました。
      </p>
      <p>
        <a href="https://tenderfeel.xsrv.jp/memo/2901/#more-2901" class="more-link"><span class="screen-reader-text">“レスポンシブ ウェブデザインを実装するためのTips”</span> の続きを読む<span class="meta-nav">→</span>
        </a>
      </p>
   </div>
</article>

external

ページが存在するサイトの外部にあるリソースへのハイパーリンクであることを示す。
つまり、クリックしたとき現在のサイトから離れるリンクです。

<a href="https://google.com" rel="external">Google</a>

help

親要素およびその子孫要素について詳細なヘルプを提供するリソースへのリンクであることを示します。
一部のブラウザでは、a要素とarea要素の場合、helpキーワードによりリンクで別のカーソルが使用されます。

<p>
　　<label>
      Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a>
    </label>
</p>

license

ページ上のデータが持つライセンス情報を説明する文書へ誘導するハイパーリンクを定義します。
Aタグで利用した場合、そのライセンス情報が文書内の一部に適用するか文書全体にするかの区別は標準化されていないので、どちらを示しているのかユーザーに明確にする必要があります。
歴史的な理由から同義語の copyright も認識されますが、誤りですので使用してはいけません。

以下の例では、licenseはドキュメント全体ではなく、写真（ドキュメントのメインコンテンツ）のみに適用されます。

 <main>
  <figure>
   <img src="/pix/39627052_fd8dcd98b5.jpg">
   <figcaption>Kissat</figcaption>
  </figure>
  <p>One of them has six toes!</p>
  <p><small>This photograph is <a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
  </main>

next・prev

現在のページが属する一連のリソース群で、nextは次のリソースへ移動するリンク、prevは前のリソースへ移動するリンクであることを示します。

<a href="1.html" rel="prev">前のページ</a>
<a href="3.html" rel="next">次のページ</a>

nofollow

リンク先がリンク元ページの作者が推薦するものではないことを示します。
（作者が管理しているものではない外部サイトや、有料リンクなど）
「このページのリンクをたどらない」や「このリンクをたどらない」といった指示を検索エンジンに与える手段の１つです。

検索エンジンロボットは認証が必要なページを見ることができないので、「ご登録はこちらから」や「ログイン」のリンクで nofollow を使用すれば、他にインデックスへの登録を優先したいページがクロールされるようになります。

<a href="/signin" rel="nofollow">ログイン</a>

noopener

リンクを新しい閲覧コンテキストで開き、リンク元の文書へアクセスできないようにすることをブラウザーに指示します。
これは信頼できないリンクを開く際、 Window.opener プロパティでリンク元の文書を変更できないようにするために特に役に立つリンク種別です。

<a herf="https://example.com/" rel="noopener" target="_blank">何かの外部リンク</a>

 
window.openでの設定例：

const otherWindow = window.open('https://example.com', 'ExampleWindow');
otherWindow.opener = null;

window.openerプロパティはリンク元のWindowオブジェクトが設定されます。
例えばリンク先にこういうJavaScriptが仕込んであったら、リンク元のページの方でダイアログが開くわけです。

if (window.opener) {
 opener.location = 'javascript:alert(1)';
}

リンク先が悪意のあるサイトだった場合…まあ色々悪いことをされるでしょう。
（詳しくはAbout rel=noopener を参照してください）

rel="noopener"を設定しておけば、新たに開いたウィンドウのWindow.openerプロパティにはnullが設定されるので、不正な使用はできなくなります。
ただし、 Referer HTTP ヘッダーは（noreferrer を使用しない限り）提供します。

IE11、Edge18以下、Android4以下は未対応です。

noreferrer

別のページへ移動する際にリンク元ページのアドレスなどの値を、ブラウザーが Referer: HTTP ヘッダーでリファラーとして送信しないようにします。
rel="noreferrer"を設定した場合も、Window.openerプロパティにはnullが設定されます。

最初に書いたChromeでGooglePlayに遷移しないことがあるパターン：

target=”_blank” なし　⇒　遷移する
target=”_blank” あり　⇒　遷移しない
target=”_blank” あり rel=”noreferrer noopener”　⇒　遷移する
target=”_blank” あり rel=”noreferrer” ⇒　遷移する
target=”_blank” あり rel=”noopener” ⇒　遷移する

noreferrerの方が対応範囲は広いですが、IE11はWindows10以外バージョンでは未対応。

search

ハイパーリンクが、この文書やサイトとそのリソースを検索するために特別に設計されたインターフェイスを持つ文書を参照することを示します。

<a href="https://cse.google.com/cse?cx=013648250248193978333:mzgdgx-e0p0" rel="search">
サイト内検索
</a>

tag

この文書に適用するタグを説明する文書へのハイパーリンクであることを示します。
ページの集合体へのリンクであるため、タグクラウドの項目に設定すべきではありません。

<！DOCTYPE HTML>
<html>
 <head>
  <title>我輩は猫である</title>
 </head>
 <本体>
  <header>
　  <h1>我輩は猫である</h1>
　  <p>夏目漱石</p>
  </header>
  <p>吾輩猫である。名前はまだ無い。<br>
　どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>
  <footer>
   タグ：<a rel="tag" href="https://ja.wikipedia.org/wiki/%E5%A4%8F%E7%9B%AE%E6%BC%B1%E7%9F%B3">夏目漱石</a>, <a rel="tag" href="https://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%B3">猫</a>
  </footer>
 </body>
</html>

参考リンク

• https://www.w3.org/TR/html50/links.html
• https://developer.mozilla.org/ja/docs/Web/HTML/Link_types
• 特定のリンクに対して rel=”nofollow” を使用する
• サイトで rel=”noopener” を使用して外部アンカーを開く