リンク・リレーション

リンク・リレーションとは、link要素やa要素、area要素のhrefコンテンツ属性で表されるリンク先が、それらの要素を含んだドキュメントと、どのような関係を持っているのかを表すものです。その関係性は、これらの要素のrelコンテンツ属性に、所定のキーワードをセットすることで表すことができます。

■スタイルシートの関連

  <link rel="stylesheet" href="style.css" type="text/css" />
    

リンク・リレーションのキーワードと意味

次の表は、HTML5で規定されたリレーションを表しています。表のキーワードは、link要素、a要素、area要素ですべてが使えるものではありません。ハイフンの部分は、利用不可となります。

※ 表内のキーワードをクリックすると詳細にジャンプします。

表から分かるように、リンク・リレーションには、ハイパーリンクと外部リソースの2つの種類があります。ハイパーリンクは、別のドキュメントへのリンクを表し、a要素やarea要素で指定されるリンクはすべてハイパーリンクです。

外部リソースとは、ドキュメントを補強するようなリソースへのリンクを表し、ブラウザがそのリンク先の外部リソースを読み込んで何かしらの処理が行われることが期待されるものです。

alternate

alternateキーワードは、現在のドキュメントの代替表現となるものを表します。通常は、その代替表現の特性を表すために、media、hreflang、typeコンテンツ属性も指定します。
alternateキーワードとともにmediaコンテンツ属性が指定された場合は、そのリンク先は、現在のドキュメントを別のメディア向けに変換したものであることを表します。

■利用例

  <link rel="alternate" media="print" href="document.pdf" title="印刷用" />
  <link rel="alternate" media="tv" href="doc_tv.html" title="TV用" />
    

link要素もa要素も、alternateキーワードを使って表されたリンク先は、いずれも該当ページの代替であることを意味します。つまり、該当のページ（HTML）、PDF版、テキスト版のいずれも、同じコンテンツを持ったものであることを意味します。

archives

archivesキーワードは、過去のコンテンツ履歴などを集めたアーカイブを表します。ブログなどで、月別のアーカイブを用意したい場合に、利用します。

■利用例

  <nav>
  	<h3>履歴（アーカイブ）</h3>
  	<ul>
  		<li><a href="blog/2010_03/" rel="archives">2010年3月</a></li>
  		<li><a href="blog/2010_02/" rel="archives">2010年2月</a></li>
  		<li><a href="blog/2010_01/" rel="archives">2010年1月</a></li>
  	</ul>
  </nav>
    

author

authorキーワードは、該当ページの著者を表します。著者について紹介したページやサイトのトップページへのリンクに使います。

■利用例

  <link rel="author" href="http://www.tanaka.com" />
    

利用例は、該当のページやサイトの著作者紹介ページのリンクを指定しています。
authorキーワードを使ってマークアップされたリンクは、必ずしもウェブ・ページでなく、メールアドレスを指定しても構いません。

bookmark

bookmarkキーワードは、直近の親にあたるセクションのパーマリンクを表します。基本的には、ページに対するパーマリンクではなく、article要素に入れられたコンテンツに対するパーマリンクを表すため、bookmarkキーワードを指定したリンクは、article要素の中に入れて使います。

パーマリンクとは、Webページの中の個別のコンテンツに対して設けられたURLのことで、特にブログにおける個々のエントリーに対して割り当てられたURLを指すことが多いです。

■利用例

  <article>
  	<h3><a href="blogpage/101" rel="bookmark">HTML5の応用とは</a></h3>
  	<p>HTML5の利用活用編をご紹介しましょう。・・・・・</p>
  	・・・・・
  </article>
  <article>
  	<h3><a href="blogpage/100" rel="bookmark">CSS3の紹介</a></h3>
  	<p>スタイルシートバージョン3についてご説明します。・・・・・</p>
  	・・・・・
  </article>
    

external

externalキーワードは、外部サイトのドキュメントへのリンクを表します。明示的に外部サイトであることをマークアップしたい場合に使います。

■利用例

  <aside>
  <h3>関連サイト</h3>
  	<ul>
  		<li><a href="http://www.goods.com" rel="external">便利グッズ</a></li>
  		<li><a href="http://www.tishiki.com" rel="external">基礎知識</a></li>
  	</ul>
  </aside>
    

利用例は、該当するドキュメントの内容が参考にしたサイトを紹介している場合です。ブログ投稿などのコメント記載した人へのリンクなどにも利用します。

first

firstキーワードは、連載の初回を表します。HTML4で規定されていたstartキーワードやbiginキーワードに置き換わるもので、このキーワードがセットされたドキュメントは、何かしらの連載コンテンツの一部であることを表します。そして、このfirstキーワードが指定されたリンクは、その連載の第1回のコンテンツへのリンクであることを表すことができます。

■利用例

  <link rel="first" href="page01.html" title="第1回連載" />
  <a href="page01.html" rel="first">第1回連載</a>
    

利用例は、link要素とa要素の場合のマークアップ例です。

help

helpキーワードは、このリンクの親要素にあたる要素のコンテンツに関するヘルプ情報を表します。仮にhelpキーワードを使ったlink要素をhead要素の中にマークアップしたら、それが指し示すドキュメントは、該当ページ全体に関するヘルプ情報が記載されたページであることを表します。

■利用例

  <link rel="help" href="help/hatena.html" title="ヘルプページ" />
    

また、ある特定の要素の中に、helpキーワードを伴ったa要素を入れれば、そのa要素が指し示すドキュメントは、該当の要素のコンテンツに関するヘルプであることを表します。

icon

iconキーワードは、ドキュメントやサイトのアイコンを表します。このキーワードはlink要素でしか利用することはできません。
iconキーワードを伴ったlink要素で指定されたアイコン画像は、ブラウザのさまざまなユーザインターフェイスで使われます。
また、link要素には、新たにsizeコンテンツ属性が追加され、アイコンのサイズを指定できるようになりました。アイコンのサイズは、横幅と縦幅のピクセルを小文字のxでつなげた文字列で表します。

■利用例

  <link rel="icon" href="img/favicon.png" sizes="16x16" type="image/png" />
    

アイコンは複数指定することができますが、同じくらいの適切なアイコンが存在している場合は、最後のアイコンを採用することになっています。

index

indexキーワードは、目次や索引を表します。
例えば、大きなテーマのコンテンツがいくつかのページに分かれているとき、それら各ページをまとめたページを作成します。このまとめたページを指し示すためにindexキーワードを使用します。
HTML4で規定されていたcontentsキーワードや、top、tocキーワードに置き換わるものです。

■利用例

  <link rel="index" href="../top.html" title="目次・インデックス" />
    

last

lastキーワードは、連載の最終回を表し、HTML4で使われていたendキーワードに置き換わるものです。
このキーワードを持ったリンクを含むドキュメントは、何かしらの連載コンテンツの一部であることを表し、lastキーワードで指定されたリンクは、損連載の最終化のコンテンツへのリンクであることを表すことになります。

■利用例

  <link rel="last" href="page_end.html" title="最終回" />
    

license

licenseキーワードは、著作権情報を表し、HTML4で規定されていたcopyrightキーワードに置き換わるものです。
licenseキーワードを伴ったリンクが指し示すページは、該当ドキュメントのコンテンツの著作権情報や転載・配布条件を掲載したページであることを表すことになります。

■利用例

  <section>
  	<h3>配布品</h3>
  	<p>弊社のデモ版製品となる
  		<a href="demo/sample.html" rel="license">Sample.zip</a>
  	をお使いください。</p>
  </section>
    

next

nextキーワードは、連載の次回を表します。このキーワードを持ったリンクを含むドキュメントは、何かしらの連載コンテンツの一部であることを表します。nextキーワードが指定されたリンクは、現在のコンテンツから見て次回のコンテンツへのリンクであることを表すことになります。

■利用例

  <link rel="next" href="page05.html" title="第５回" />
    

nofollow

nofollowキーワードは、そのリンク先を保証しないことを表します。アフェリエイト目的で用意したリンクや、ブログのコメントなども該当します。
nofollowキーワードを伴ったリンクに関しては、検索ロボットがそのリンク先をランキング・スコアに有利に働かないようにページランクの対象から除外されます。
HTML5におけるnofollowキーワードは、自サイトから見て、そのリンク先について保証できない、責任が持てないといったニュアンスがあります。

■利用例

  <a href="http://www.hatenaweb.com" rel="nofollow">[PR] 疑問サイト</a>
    

noreferrer

noreferrerキーワードは、指定のリンク先にナビゲートするときに、リファラー情報をリンク先に送信しないようブラウザに指示します。リファラー情報とは、リンク元URLのことを表します。
通常、ブラウザがリンク先にリクエストを送る時に、そのHTTPリクエスト・ヘッダにリファラー情報を加えます。そうすることで、リンク先のサイトは、どのサイトのリンクから訪問してきたかを把握することができます。
サイト運営者が、何かしらの理由でリンク先に対してリンク元を知られたくない場合にこのキーワードを使います。

■利用例

  <a href="http://www.hatenaweb.com" rel="noreferrer">変なサイト</a>
    

pingback

pingbackキーワードは、ピングバックを受け付けることを表し、link要素でのみ利用可能です。
ピングバックとは、ブログなどでの利用を想定したもので、ブログ記事で別のブログ記事にリンクを張った場合、それをリンク先のブログに通知する仕組みのことです。ピングバックはトラックバックとも呼ばれます。

■利用例

  <link rel="pingback" href="http://sample.co.jp/blog/2011/" />
    

prefetch

prefetchキーワードは、リンク先のリソースを事前にロードするようブラウザに指示します。link要素のみ可能です。

■利用例

  <link rel="prefetch" href="http://www.google.co.jp" />
    

利用例では、該当のページで検索を行いたい場合、「検索エンジンサイト」などというキーワードで検索をしたら、Googleが最初に現れるページとしたい時のマークアップとなります。

prev

prevキーワードは、連載の次回を表します。このキーワードを持ったリンクを含むドキュメントは、何かしらの連載コンテンツの一部であることを表します。prevキーワードが指定されたリンクは、現在のコンテンツから見て前回のコンテンツへのリンクであることを表すことになります。このキーワードは、これまで使われていたpreviousキーワードに置き換わるものです。

■利用例

  <link rel="prev" href="page03.html" title="第３回" />
    

search

searchキーワードは、検索ページを表します。hrefコンテンツ属性に、その検索ページのURLを指定します。

■利用例

  <link rel="search" href="search.html" title="検索ページ" />
    

stylesheet

stylesheetキーワードは、ページに組み込むスタイルシートを表し、このキーワードはlink要素のみ利用可能です。

■利用例

  <link rel="stylesheet" href="mystyle.css" type="text/css" />
    

MIMEタイプがtext/cssとなるスタイルシートであれば、typeコンテンツ属性は省略できます。
また、relコンテンツ属性にalternateキーワードを一緒に指定すると代替スタイルシートを表すことができます。この場合は、titleコンテンツ属性の指定が必須となり、titleコンテンツ属性の値に空文字列を指定することはできません。

■利用例（代替スタイルシート）

  <link rel="stylesheet" href="base.css" type="text/css" />
  <link rel="alternate stylesheet" href="design1.css" title="デザイン1" />
  <link rel="alternate stylesheet" href="design2.css" title="デザイン2" />
    

利用例での代替スタイルシートは、design1.cssとdesign2.cssとなります。alternateキーワードを入れていないrelコンテンツ属性のスタイルシートは、固定スタイルシートで、このスタイルシートが適用されます。
代替スタイルシートは、ページがロードされた時点では適用されません。
Internet Explorer 8では、メニューバーの表示からスタイルを選ぶことができるようになります。

sidebar

sidebarキーワードは、ブラウザのサイドバーに表示させるためのドキュメントを表します。このキーワードに対応しており、サイドバーを表示する機能を持ったブラウザであれば、ユーザが該当のハイパーリンクをクリックすると、hrefコンテンツ属性に指定したURLのドキュメントをサイドバーに表示できるようにすることを想定しています。

■利用例

  <a rel="sidebar" href="sidebar.html" title="商品のもくじ">目次の登録</a>
    

tag

tagキーワードは、ドキュメントに適用されているタグを表します。タグとは、コンテンツの内容に関連したキーワードで、一種のメタデータとして使われるものです。

■利用例

  <link rel="tag" href="http://sample.com/tag/p/" />
    

hrefコンテンツ属性には、ページに付与されたタグを表すページのURLを指定します。このキーワードを使って、ブラウザが何かするものではありません。検索エンジンなどのロボットにとって、そのページが何を表しているかを把握するためのヒントになることを想定しています。

up

upキーワードは、階層化されたコンテンツにおいて、上の階層ページを表します。

■利用例

  <link rel="up" href="top.html" title="上の階層ページ" />
    

indexキーワードも通常は親となるページを表しますが、セマンティクス上、upキーワードとは異なります。upキーワードはあくまでも、１つ上の階層のコンテンツを表します。パンくずリストのマークアップには、upキーワードは適切な使い方ができます。

■利用例（パンくずリスト作例）

  <nav class="layer">
  	<ol>
  		<li><a href="/" rel="index up up up">トップページ</a></li>
  		<li><a href="/appli/" rel="up up">アプリケーション</a></li>
  		<li><a href="/appli/browser/" rel="up">ブラウザ</a></li>
  		<li><a href="/appli/browser/safari/">Safari</a></li>
  	</ol>
  </nav>
    

パンくずリストの利用例のように、半角スペースで区切って複数のupキーワードを入れると、upキーワードの数がそのリンク先のページから見た階層の深さを表すことになります。