HTTP Headers
Link
HTTP Header
The HTTP Link header offers a way to serialize one or more link relations within HTTP headers.
This enables the server to direct a client to another resource that contains metadata related to the requested resource.
This header shares similar semantics with the HTML <link> element.
One notable advantage of using the Link header is that browsers can initiate preconnections or preload resources even before fetching or processing the actual HTML content.
In practice, most rel link types have limited effect when used with HTTP headers.
For instance, the icon relation is effective only within HTML, and the stylesheet relation does not reliably work across all browsers, only functioning properly in Firefox.
The only rel link types that consistently work are preconnect and preload, which can be combined with 103 Early Hints.
Syntax
Link: <uri-reference>; param1=value1; param2="value2"<uri-reference>
- The URI reference must be enclosed between < and > and should be percent-encoded for proper represenatation.
Parameters
The link header contains parameters, which are separated with ; and are similar to attributes of the <link> element.
Values can be either quoted or unquoted according to field value component rules, so x=y is equivalent to x="y".
Example
Enclose URLs in angle brackets
The URI (absolute or relative) must be enclosed between < and >:
http
Link: <https://example.com>; rel="preconnect"http
Link: https://bad.example; rel="preconnect"Encoding URLs
The URI (absolute or relative) must percent-encode character codes greater than 255:
http
Link: <https://example.com/è‹—mÓ¡>; rel="preconnect"http
Link: <https://example.com/苗条>; rel="preconnect"Specifying multiple links
You can specify multiple links separated by commas, for example:
http
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 for clients, which is useful for accessing resources programmatically:
http
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 example, rel="prev" and rel="next" indicate links to the previous and next pages. The rel="last" and rel="first" parameters provide links to the last and first pages of the search results.
Controlling fetch priority
Even when using preload to fetch a resource early, different content types are fetched at varying priorities depending on the browser’s internal prioritization.
The fetchpriority attribute helps indicate to the browser whether a resource should be fetched with higher or lower priority compared to other resources of the same type.
For example, the header below preloads style.css with a higher priority than other stylesheets:
http
Link: </style.css>; rel=preload; as=style; fetchpriority="high"Note that the internal prioritization logic and the effect of the fetchpriority attribute depend on the browser.
The fetchpriority directive should be used sparingly and only when a browser cannot automatically determine a resource’s priority.
How to Modify Header using Requestly
Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the Link header. This is useful for testing how your application behaves with different pagination or resource linking scenarios during development or debugging. Steps to Modify the Link Header:
- Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
- Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
- Add a new header modification:
- Under “Action”, select “Add” or “Override”.
- In the “Header Name” field, enter Link.
- In the “Header Value” field, enter your desired link header value (e.g., <https://api.example.com/page2>; rel=”next”).
- Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-api.com/*).
- Save the rule.
Once set up, Requestly will inject the specified Link header into all matching requests, allowing you to simulate different pagination links or related resource references and test how your application handles them.
Modifying the Link header is important for testing how your application handles pagination or references to related resources. It helps ensure your app correctly processes links for navigating through pages or associated data.
Table of Contents
- No headings found.
