Link header
The HTTP Link header provides a means for serializing one or more links in HTTP headers.
This allows the server to point a client to another resource containing metadata about the requested resource.
This header has the same semantics as the HTML link element.
One benefit of using the Link header is that the browser can start preconnecting or preloading resources before the HTML itself is fetched and processed.
In practice, most rel link types don't have an effect when used with the HTTP header.
For example, the icon relation only works in HTML, and stylesheet does not work reliably across browsers (only in Firefox).
The only relations that work reliably are preconnect and preload, which can be combined with 103 Early Hints.
| Header type | [Response header](https://developer.mozilla.org/en-US/docs/Glossary/Response%20header), [Request header](https://developer.mozilla.org/en-US/docs/Glossary/Request%20header) |
|---|---|
| [Forbidden request header](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden%20request%20header) | No |
| [CORS-safelisted response header](https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted%20response%20header) | No |
Syntax
Link: <uri-reference>; param1=value1; param2="value2"
<uri-reference>- : The URI reference, must be enclosed between
<and>and percent-encoded.
- : The URI reference, must be enclosed between
Parameters
The link header contains parameters, which are separated with ; and are equivalent to attributes of the link element.
Values can be both quoted or unquoted based on field value component rules, so x=y is equivalent to x="y".
Examples
Enclose URLs in angle brackets
The URI (absolute or relative) must be enclosed between < and >:
Link: <https://example.com>; rel="preconnect"
Link: https://bad.example; rel="preconnect"
Encoding URLs
The URI (absolute or relative) must percent-encode character codes greater than 255:
Link: <https://example.com/%E8%8B%97%E6%9D%A1>; rel="preconnect"
Link: <https://example.com/苗条>; rel="preconnect"
Specifying multiple links
You can specify multiple links separated by commas, for example:
Link: <https://one.example.com>; rel="preconnect", <https://two.example.com>; rel="preconnect", <https://three.example.com>; rel="preconnect"
Pagination through links
The Link header can provide pagination information to a client, which is commonly used to access resources programmatically:
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"
In this case, rel="prev" and rel="next" show link relations for previous and next pages, and there are rel="last" and rel="first" parameters providing first and last pages of search results.
Controlling fetch priority
Even when using preload to fetch a resource as early as possible, different types of content will be fetched earlier or later based on the browser's internal prioritization.
The fetchpriority attribute can be used to hint to the browser that a particular resource will have a greater or lesser relative impact on user experience than other resources of the same type.
For example, the header below might be used to preload style.css with a higher priority than other stylesheets:
Link: </style.css>; rel=preload; as=style; fetchpriority="high"
Note that both the internal prioritization for fetching resources and the effect of the fetchpriority directive are browser-dependent.
The fetchpriority directive should be used sparingly, and only in cases where a browser cannot infer that a particular resource should be treated with a different priority.
Specifications
Browser compatibility
See also
- 103 Early Hints
- link
- Link Relations IANA registry
- Optimize resource loading with the Fetch Priority API for information about how this API affects priorities on Chrome.
谢谢你的反馈！