`<link>`

概要

<link> タグは、現在のウェブページと関連する外部リソースをリンクするために主に使用され、通常は <head> 要素内に配置されます。最も一般的な用途は、CSS スタイルシートの読み込みです。

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

上記のコードは、ウェブページにスタイルシート theme.css を読み込みます。

デフォルトのスタイルシートに加えて、ウェブページは代替スタイルシート、つまりデフォルトでは有効にならず、ユーザーが手動で切り替える必要があるスタイルシートを読み込むこともできます。

<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

上記のコードでは、 default.css がデフォルトのスタイルシートで、デフォルトで有効になります。 fancy.css と basic.css は代替スタイルシート (rel="alternate stylesheet") で、デフォルトでは有効になりません。 title 属性はここで必須であり、ブラウザのメニューにこれらのスタイルシートの名前をリストし、ユーザーがデフォルトのスタイルシートの代わりに選択できるようにするために使用されます。

<link> は、ウェブサイトの favicon アイコンファイルを読み込むためにも使用できます。

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

モバイルデバイスからアクセスする場合、ウェブサイトは通常、異なる解像度のアイコンファイルを提供する必要があります。

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">

上記のコードは、iPhone デバイスに必要な 114 ピクセルと 72 ピクセルのアイコンを指定します。

<link> は、ドキュメントの関連リンクを提供するためにも使用されます。以下は、ドキュメントの RSS フィードアドレスを提供する例です。

<link rel="alternate" type="application/atom+xml" href="/blog/news/atom">

href 属性

href 属性は、 <link> タグがリンクするリソースを表します。

rel 属性

rel 属性は、外部リソースと現在のドキュメントとの関係を表し、 <link> タグの必須属性です。 href 属性でリンクされたリソースの説明と考えることができます。

以下の値を取ることができますが、これらに限定されません。

alternate：ドキュメントの別の形式へのリンク、例えば印刷版など。
author：ドキュメント作成者へのリンク。
dns-prefetch：ブラウザに指定された URL の DNS クエリを事前に実行するように要求します。
help：ヘルプドキュメントへのリンク。
icon：ドキュメントのアイコンファイルを読み込みます。
license：ライセンスへのリンク。
next：シリーズドキュメントの次の記事へのリンク。
pingback：現在のドキュメントの pingback リクエストを受け取る URL。
preconnect：ブラウザに指定されたサーバーとの HTTP 接続を事前に確立するように要求します。
prefetch：ブラウザに指定されたリソースを事前にダウンロードしてキャッシュし、次のページで使用できるように要求します。優先度は低く、ブラウザはダウンロードしない場合があります。
preload：ブラウザに指定されたリソースを事前にダウンロードしてキャッシュし、現在のページで後で使用されることを要求します。優先度は高く、ブラウザはすぐにダウンロードする必要があります。
prerender：ブラウザに指定されたリンクを事前にレンダリングするように要求します。これにより、ユーザーが後でそのリンクを開いたときに、すぐに表示され、非常に高速に感じられます。
prev：現在のドキュメントがシリーズドキュメントの一部であることを示し、ここで前のドキュメントへのリンクを提供します。
search：現在のウェブページの検索リンクを提供します。
stylesheet：スタイルシートを読み込みます。

以下にいくつかの例を示します。

<link rel="author" href="humans.txt">
<link rel="license" href="copyright.html">
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<link rel="me" href="https://google.com/profiles/someone" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">
<link rel="archives" href="http://example.com/archives/">
<link rel="index" href="http://example.com/article/">
<link rel="first" href="http://example.com/article/">
<link rel="last" href="http://example.com/article/?page=42">
<link rel="prev" href="http://example.com/article/?page=1">
<link rel="next" href="http://example.com/article/?page=3">

hreflang 属性

hreflang 属性は、 href 属性でリンクされたリソースで使用される言語を表し、通常は現在のページの他の言語バージョンを指します。

<link href="https://example.com/de" rel="alternate" hreflang="de" />

上記の例では、 hreflang は href 属性でリンクされたページがドイツ語を使用していること、つまり現在のページのドイツ語バージョンであることを示しています。

1つのページに複数の言語バージョンがある場合、 hreflang 属性を x-default に設定して、どのページがデフォルトバージョンであるかを示すことができます。

<link href="https://example.com" rel="alternate" hreflang="x-default" />
<link href="https://example.com/de" rel="alternate" hreflang="de" />

上記の例では、 hreflang が x-default に設定されているため、このページがデフォルトバージョンであることを示しています。

リソースのプリロード

特定の状況では、ブラウザに特定のリソースをプリロード、つまり事前にキャッシュさせて、使用時にインターネットから再度ダウンロードする必要がないようにし、すぐに使用できるようにしたい場合があります。プリロード命令を使用することで、これを実現できます。

プリロードには、主に次の5つのタイプがあります。

`<link rel="preload">`

<link rel="preload"> は、ブラウザにリソース（スクリプトやスタイルシートなど）をできるだけ早くダウンロードしてキャッシュするように指示します。この命令の優先度は高く、ブラウザは必ず実行します。ページの読み込みから数秒後にそのリソースが必要になる場合に役立ちます。ダウンロード後、ブラウザはリソースに対して何も実行せず、スクリプトは実行されず、スタイルシートは適用されません。キャッシュされるだけで、他の何かがそれを必要としたときにすぐに利用できるようになります。

<link rel="preload" href="image.png" as="image">

rel="preload" は、優先度が高いことに加えて、2つの利点があります。1つは、プリロードするリソースのタイプを指定できること、もう1つは onload イベントのコールバック関数を許可することです。以下は、 rel="preload" と as 属性を組み合わせて、ブラウザにリソースのタイプを伝え、適切に処理できるようにする例です。

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

上記のコードは、ブラウザに style.css と main.js を事前にダウンロードしてキャッシュするように要求します。

as 属性は、ロードするリソースのタイプを指定します。一般的には、次の値を取ります。

"script"
"style"
"image"
"media"
"document"

as 属性を指定しない場合、またはその値がブラウザに認識されない場合は、ブラウザは低い優先度でそのリソースをダウンロードします。

場合によっては、 type 属性を使用して MIME タイプをさらに明確にする必要があります。

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">

上記のコードは、ブラウザにビデオファイルを事前にダウンロードするように要求し、それが MP4 エンコーディングであることを示します。

以下は、フォントファイルを事前にダウンロードする例です。

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

注意すべてのプリロードされたリソースは、ブラウザのキャッシュにダウンロードされるだけで、実行はされません。