文書を他の外部リソースと関連付ける

link

< link リンク 属性="属性値">

link要素は文書を他の外部リソースと関連付けます。

カテゴリー メタデータコンテンツ
コンテンツモデル
使用できる文脈 ・head要素の子要素であるnoscript要素の子要素として
・メタデータコンテンツが期待される場所
・itemprop属性が付与された場合はフローコンテンツ、またはフレージングコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

href ハイパー・リファレンス

リンク先のURLを指定します。

hreflang ハイパー・リファレンス・ランゲージ

リンク先文書の記述言語を表します。例えば、日本語のページから英語のページにリンクをする場合などに、リンク先が英語で書かれていることをブラウザーや閲覧者に伝えます。指定する値はlang属性を参照してください。

media メディア

リンク先の文書や読み込む外部リソースが、どのメディアに該当するのかを指定します。media属性の値は、妥当なメディアクエリである必要があります。

rel リレーション

現在の文書からみた、リンク先となるリソースの位置付けを表します。HTML5の仕様で定義されている属性値は以下の通りです。半角スペースで区切って、複数の値を指定できます。

alternate 代替文書(フィード、別言語版、別フォーマット版など)を表します。
author 著者情報を表します。
help ヘルプへのリンクを表します。
icon アイコンをインポートします。
license ライセンス文書を表します。
next 連続した文書における次の文書を表します。
prefetch リンク先のリソースをあらかじめキャッシュするように指定します。
prev 連続した文書における前の文書を表します。
search 検索機能を表します。
stylesheet スタイルシートを表します。

また、rel属性はこの他にも独自の属性値を提案することができます。提案されたのち普及した属性値は、これらの仕様をまとめるMicroformats Wikiで確認できます。例えば、URLを正規化するcanonicalやWebクリップアイコンを示すapple-touch-iconなどがあります。

sizes サイズス

link要素によって関連付けられた画像ファイルなどのサイズを指定します。rel="icon"が指定された場合のみ使用でき、値は「幅x高さ」の形式、例えば16x16のように指定します。

type タイプ

リンク先のMIMEタイプを指定します。

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

使用例文書を外部スタイルシートと関連付ける

<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">
    

関連記事