link要素

このエントリーをはてなブックマークに追加

link要素はHTMLから他のリソースを参照するリンクを貼ることができます。

link要素はhead要素内か、head要素内に存在するnoscript要素の内側に記述することができます。

必須であるhref属性とrel属性に加え以下の属性が利用できます。

href属性

href属性は他のリソースを参照するURLやファイルのパスを示します。

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

rel属性

rel属性は参照するリソースのタイプを指定できます。

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

rel属性は以下の値を取ることができます。

alternate 現在のドキュメントの代替リソースを指定します
author 現在のドキュメントの記事の筆者を指定します
help 現在のドキュメントのヘルプを指定します
icon 現在のドキュメントのアイコンを指定します
license 著作権情報を指定したページへのリンクを指定します
next 一つ後の文書へのリンクを指定します
prefetch 先読みするリソースを指定します
prev 一つ前の文書へのリンクを指定します
search 親ページや関連ページのURLを指定します
stylesheet 読み込むスタイルシートを指定します

HTML5ではa要素area要素のrel属性で指定可能な「bookmark」、「nofollow」、「noreferrer」、「tag」はlink要素では指定できないので注意してください。

また、HTML5では定義されていませんが以下のようなrel属性も利用されます。

IEなどを考慮していfavicon(ファビコン)を指定する場合はrel=”icon”ではなく以下のrel=”shortcut icon”を利用します。favicon画象には.ico形式のファイルを指定します。

shortcut icon faviconの画象URL

GoogleによりSEOの観点から以下のrel属性の値の利用が推奨されています。

canonical 類似したページの中で優先されるページを指定する
publisher 著作権をもつ団体のGoogle+ページのURL

また、Googleはrel=”author”に著作権者のGoogle+のアカウントページを指定することも推奨しています。

iPhoneやAndroidなどのスマートフォンでは独自の仕様として以下のrel属性でスマートフォンのホームページに登録できるウェブクリップアイコンのURLを指定できます。(Android端末は端末により対応状況が異なります。)

apple-touch-icon 指定されて画象に角丸と光沢を加えて利用する
apple-touch-icon-precomposed 指定されて画象そのままウェブクリップアイコンとして利用する

media属性

media属性は外部リソースを参照するメディアが指定できる属性です。

<link rel="stylesheet" media="print" href="../style.css">

media属性は以下の値をとることができます。

all すべてのメディア
media属性を省略した場合allが指定されます
screen PCなどのスクリーンメディア
print プリンタなどの印刷メディア
aural 音声を出力するメディア(CSS2未満)
speech 音声を出力するメディア(CSS2以上)
braille 点字を出力するメディア
embossed 点字のページを出力するプリンタなどのメディア
handheld モバイル端末などのメディア
projection プロジェクターなどのメディア
tty テレタイプなどのメディア
tv TVなどのメディア

いくつかのデバイスはこれらのメディアタイプに対応していますが、ほとんどのデバイスは表示にはscreenの記述を、印刷向けにはprintの記述を解釈します。

複数のメディアを指定したい場合はカンマ(,)区切りで指定可能です。

<link rel="stylesheet" media="print,screen" href="../style.css">

HTML5ではこれらのメディア指定に加えて、メディアの特性を指定できるメディア クエリーの指定が追加されています。

hreflang属性

hreflang属性はリソースの言語を指定できます。

<link rel="license" hreflang="en-us" href="http://xxxx.com/license.txt">

type属性

type属性はリソースのMIMEタイプが指定できます。

<link rel="license" type="text/plain" href="http://xxxx.com/license.txt">

sizes属性

外部リソースの画象などのサイズが指定できます。

<link rel="apple-touch-icon" sizes="57x57" href="/license.png" >

参考URL

4.2.4 The link element - W3C
4.12.5 Link types - W3C
Media Queries - W3C

登録日 : 2013年01月27日 最終更新日 : 2014年3月22日

同じカテゴリー(メタデータ)のエントリー

検索

スポンサードリンク

バージョン

リファレンス