文書を他の外部リソースと関連付ける
link
<
link
link要素は文書を他の外部リソースと関連付けます。
| カテゴリー | メタデータコンテンツ |
|---|---|
| コンテンツモデル | 空 |
| 使用できる文脈 |
・head要素の子要素であるnoscript要素の子要素として ・メタデータコンテンツが期待される場所 ・itemprop属性が付与された場合はフローコンテンツ、またはフレージングコンテンツが期待される場所 |
使用できる属性
現在の文書からみた、リンク先となるリソースの位置付けを表します。HTML5の仕様で定義されている属性値は以下の通りです。半角スペースで区切って、複数の値を指定できます。
| alternate | 代替文書（フィード、別言語版、別フォーマット版など）を表します。 |
|---|---|
| author | 著者情報を表します。 |
| help | ヘルプへのリンクを表します。 |
| icon | アイコンをインポートします。 |
| license | ライセンス文書を表します。 |
| next | 連続した文書における次の文書を表します。 |
| prefetch | リンク先のリソースをあらかじめキャッシュするように指定します。 |
| prev | 連続した文書における前の文書を表します。 |
| search | 検索機能を表します。 |
| stylesheet | スタイルシートを表します。 |
また、rel属性はこの他にも独自の属性値を提案することができます。提案されたのち普及した属性値は、これらの仕様をまとめるMicroformats Wikiで確認できます。例えば、URLを正規化するcanonicalやWebクリップアイコンを示すapple-touch-iconなどがあります。
link要素によって関連付けられた画像ファイルなどのサイズを指定します。rel="icon"が指定された場合のみ使用でき、値は「幅x高さ」の形式、例えば16x16のように指定します。
グローバル属性
すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性
使用例文書を外部スタイルシートと関連付ける
<link rel="stylesheet">
文書に読み込まれるスタイルシートは3種類あります。通常使われるのは、title属性を指定せずに読み込まれる「固定」スタイルシートです。以下のように記述します。
<link rel="stylesheet" href="style.css">
title属性を指定すると、「優先」スタイルシートとなります。以下の例では、1行目の固定スタイルシートは通常通り読み込まれ、2行目、3行目の優先スタイルシートは、先に記述した「スタイル01」だけが読み込まれます。
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style01.css" title="スタイル01">
<link rel="stylesheet" href="style02.css" title="スタイル02">
rel="alternate stylesheet"とtitle 属性を指定すると、閲覧者が選択できる「代替」スタイルシートを提供できます。以下の例では、閲覧者はブラウザーのメニューなどから「スタイル01」「スタイル02」という代替スタイルシートを選択できます。
<link rel="stylesheet" "href="style.css">
<link rel="alternate stylesheet" href="style01.css" title="スタイル01">
<link rel="alternate stylesheet" href="style02.css" title="スタイル02">
なお、同じtitle 属性値を持った優先スタイルシートと代替スタイルシートはグループとして扱われます。以下の例では、閲覧者が代替スタイルシート「スタイル02」を選択すると、優先スタイルシート「スタイル02」が「スタイル01」に代わって読み込まれます。
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style01.css" title="スタイル01">
<link rel="stylesheet" href="style02.css" title="スタイル02">
<link rel="alternate stylesheet" href="style02.css" title="スタイル02">
使用例Webサイトのアイコンを指定する
<link rel="icon">
ブラウザーのウィンドウやタブ、ブックマークの一覧などに表示されるWebサイトのアイコン（favicon）は、rel="icon"、rel="shortcut icon"を指定して関連付けられます。rel="appletouch-icon"は、スマートフォンのホーム画面などに表示するアイコンを指定できます。
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<link rel="apple-touch-icon" type="image/png" href="img/apple-touch-icon.png">
使用例Webサイトで配信するフィードを指定する
<link rel="alternate" type="application/rss+xml">
Webサイトで配信するフィードを文書と関連付けるには、以下のように記述します。
<link rel="alternate" type="application/rss+xml" title="フィード" href="/index.xml">
使用例著者情報としてGoogle+のアカウントを関連付ける
<link rel="author" type="Google+のアカウントURL">
Webサイトの著者情報とGoogle+のアカウントは、rel="author"を指定し、href属性でGoogle+のプロフィールページのURLを記述することで関連付けられます。こうすることで、Googleと検索結果の閲覧者に対して、一貫した著者情報を提供できます。
<link rel="author" href="https://plus.google.com/101988482338943284293">
使用例検索エンジン向けにWeb ページの正規URLを指定する
<link rel="canonical">
ひとつのWebページについて、本来のURLにパラメータが付与されるなどによって、複数のURLが生じる場合があります。このとき、検索エンジンのクローラーはそれぞれのURLを別のWebページの情報として取り扱ってしまいます。rel="canonical"を指定して、href 属性で本来のURLを指定すると、派生したURLは本来のURLに関連付けられ、クローラーも本来のURLに情報を一元化して取り扱えるようになります。
<link rel=" canonical" href="http://dekriu.net">
