The HTTPLink 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 theLink header is that the browser can start preconnecting or preloading resources before the HTML itself is fetched and processed.

In practice, mostrel link types don't have an effect when used with the HTTP header.For example, theicon relation only works in HTML, andstylesheet does not work reliably across browsers (only in Firefox).The only relations that work reliably arepreconnect andpreload, which can be combined with103 Early Hints.

Syntax

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

<uri-reference>

The URI reference, must be enclosed between< and> andpercent-encoded.

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 onfield value component rules, sox=y is equivalent tox="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) mustpercent-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

TheLink 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" andrel="next" show link relations for previous and next pages, and there arerel="last" andrel="first" parameters providing first and last pages of search results.

Controlling fetch priority

Even when usingpreload 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.Thefetchpriority 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 preloadstyle.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 thefetchpriority directive are browser-dependent.Thefetchpriority 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.