Link ヘッダー

構文

Link: <uri-reference>; param1=value1; param2="value2"

<uri-reference>

URI 参照。 < と > で囲み、 パーセントエンコードする必要があります。

引数

リンクヘッダーには ; で区切られた引数が含まれており、 <link> 要素の属性に相当します。 フィールド値の構成要素に関する規則に基づき、値は引用符で囲んでも、囲まなくても構いません。したがって、x=y は x="y" と同等です。

例

URL を角括弧で囲む

URI （絶対または相対）は < と > で囲む必要があります。

Link: <https://example.com>; rel="preconnect"

Link: https://bad.example; rel="preconnect"

URL のエンコーディング

URI （絶対または相対）では、255 より大きい文字コードをパーセントエンコードする必要があります。

Link: <https://example.com/%E8%8B%97%E6%9D%A1>; rel="preconnect"

Link: <https://example.com/苗条>; rel="preconnect"

複数リンクを指定

カンマで区切られた複数のリンクを指定できます。次に例を示します。

Link: <https://one.example.com>; rel="preconnect", <https://two.example.com>; rel="preconnect", <https://three.example.com>; rel="preconnect"

リンクによるページネーション

Link ヘッダーは、クライアントにページネーション情報を提供することができ、これは通常、プログラムによるリソースへのアクセスに使用されます。

Link: <https://api.example.com/issues?page=2>; rel="prev", <https://api.example.com/issues?page=4>; rel="next", <https://api.example.com/issues?page=10>; rel="last", <https://api.example.com/issues?page=1>; rel="first"

この場合、rel="prev" and rel="next" は、前のページと次のページへのリンク関係を示しており、検索結果の最初のページと最後のページを示す rel="last" および rel="first" 引数もあります。

取得の優先度の制御

preload を使用してリソースをできるだけ早く取得しようとしても、コンテンツの種類によって、ブラウザーの内部的な優先順位に基づいて取得されるタイミングが早くなったり遅くなったりします。 fetchpriority 属性を使用すると、特定のリソースが、同じ種類の他のリソースに比べてユーザー体験に与える相対的な影響が大きい、あるいは小さいことをブラウザーに示唆することができます。

たとえば、以下のヘッダーを使用すると、style.css を他のスタイルシートよりも優先度高く事前読み込みすることができます。

Link: </style.css>; rel=preload; as=style; fetchpriority="high"

リソースの取得に関する内部的な優先順位付けと、fetchpriority ディレクティブの効果は、いずれもブラウザーに左右される点に注意してください。 fetchpriority ディレクティブは控えめに使用し、特定のリソースを異なる優先順位で扱うべきであることをブラウザーが推測できない場合にのみ使用すべきです。

仕様書

ブラウザーの互換性

関連情報

• 103 Early Hints
• <link>
• Link Relations IANA レジストリー
• Optimize resource loading with the Fetch Priority API - この API が Chrome における優先順位にどのような影響を与えるかに関する情報