link要素

属性

link要素は次のような属性を持ちます。

属性 リンク先の情報 備考
href リソースのURL  
hreflang リソースの言語  
media リソースに適用されるメディア  
rel リソースとの関連  
type リソースの種類  
crossorigin   HTML5から
sizes   HTML5から
disabled   非標準
methods   非標準
target   非標準
charset   廃止
rev   廃止
Attributes - <link> - HTML | MDN

rel (relationship)

  • stylesheet
  • canonical
  • prerender / prefetch
  • shortcut icon
  • apple-touch-icon
Link types - HTML | MDN

stylesheet

スタイルシートを指定します。

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

canonical

そのページの正しいURLを指定するための、URL正規化を行います。

prerender / prefetch

リソースを事前に読み込むことで、体感速度を向上できます。プリレンダリングとプリフェッチのサポート (Windows) | TechNet | MSDN

<link rel="prerender" href="http://example.com/nextpage.html" />
<link rel="prefetch" href="http://example.com/style.css" />

shortcut icon

Faviconを指定します。

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" />

ファイルの名前やパスは任意に指定できますが、一般的にルートディレクトリに「favicon.ico」の名前で配置します。これは一部のブラウザなどが、既定でそのパスを調べるためです。

Faviconに指定するアイコンはツールで作成できます。またサイトで使用されているFaviconは、上記要素のhref属性のパスを調べるか、Favicon APIで取得できます。

使用例

W3Cでは、

<link rel="shortcut icon" href="/2008/site/images/favicon.ico" type="image/x-icon" />

のように記述していますが、/favicon.icoにも同様のファイルを配置しています。

icoファイルには複数のサイズの画像を格納できますが、どのサイズを用いるべきかは実際の用例を見るのが確実です。

apple-touch-icon

iPhoneやiPad向けのアイコンを指定します。

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Windows 8やIE11でサイトをピン留めされたときの画像は、meta要素のmsapplication-configで指定します。

使用例

たとえばWikipediaでは、次のように記述されています。

<link rel="apple-touch-icon" href="//bits.wikimedia.org/apple-touch/wikipedia.png" />

一方でAppleのサイトにはこのような記述はなく、ただドメインのトップにhttps://www.apple.com/apple-touch-icon.pngのように画像が置かれているだけです。

type

リンクしている対象の型を表すMIMEタイプ。text/htmlやtext/cssなど。

HTMLの情報サイトから、まとめて検索