What is the HTTP Link header?

Defined by RFC 8288 (Web Linking), the Link header expresses typed relationships between the current resource and other URIs, mirroring the HTML link element but in the response header. Each link is a URI in angle brackets followed by parameters like rel and type.

How is rel=preload used in a header?

Link: ; rel=preload; as=style tells the browser to fetch a resource early. The as attribute is mandatory for preload so the browser applies the right priority, CORS mode and Accept header.

What are 103 Early Hints?

A 103 informational response can carry Link: rel=preload or rel=preconnect headers before the final response, letting the browser start fetching critical assets while the server still prepares the page.

Can I send multiple links in one header?

Yes. Separate each link by a comma: Link: ; rel=preload; as=style, ; rel=preload; as=script. You can also send multiple Link header lines.

Does this tool make network requests?

No. It is a static, browser-rendered reference. It performs no network calls and stores nothing locally.

What is the HTTP Link Header Reference?

Searchable HTTP Link header reference covering rel=preload, canonical, alternate, next, prev, modulepreload and IANA link relations with target attributes like as, crossorigin and type. It runs free in your browser on Gera Tools, with nothing uploaded.

HTTP Link Header Reference

Name: HTTP Link Header Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

One header, many relationships

The HTTP Link header (RFC 8288) is the response-header twin of HTML’s <link> element. It lets a server declare typed relationships — preload this, the canonical URL is that, the next page lives here — without any markup. This reference lists the common rel values, the target attributes they accept, and when to reach for each.

Syntax

Each link is a URI reference in angle brackets followed by semicolon-separated parameters. The rel parameter names the relationship; other parameters refine it. Multiple links are comma-separated in one header line or across multiple Link header fields:

Link: </styles.css>; rel=preload; as=style,
      </app.js>; rel=modulepreload,
      <https://cdn.example>; rel=preconnect

Common rel values

rel	Purpose	Key parameters
`preload`	Fetch a resource early for the current page	`as`, `crossorigin`, `type`
`modulepreload`	Preload an ES module and its dependencies	`crossorigin`
`preconnect`	Establish early connection to an origin	`crossorigin`
`dns-prefetch`	Resolve DNS early for a third-party origin	—
`canonical`	Declare the preferred URL for this content	—
`alternate`	Point to a variant (locale, format, feed)	`hreflang`, `type`, `media`
`next`	Identify the next document in a sequence	—
`prev`	Identify the previous document	—
`stylesheet`	Link a CSS stylesheet (rare in headers; normal in HTML)	`media`, `type`

Performance relations and 103 Early Hints

Performance relations — preload, preconnect, dns-prefetch, modulepreload — are most powerful inside a 103 Early Hints response, where the browser can act on them before the server has finished generating the page body. A typical server-side render that sends a 103 with preload hints for the main stylesheet and critical JavaScript can shave hundreds of milliseconds from LCP by overlapping resource fetch with server processing time.

Navigation and SEO relations (canonical, alternate, next, prev) work the same in headers as in HTML, but the canonical header form is specifically useful for non-HTML resources like PDFs and JSON endpoints where adding a <link> tag is not possible.

Common mistakes

Missing as on rel=preload. Without the as attribute the browser does not know the resource type and cannot assign the right priority, CORS mode, or Accept header. The resource may still be fetched but at the wrong priority.
Missing crossorigin on font and ES module preloads. Fonts and modules are fetched with CORS semantics. If you preload without crossorigin, the browser will fetch again with CORS when the resource is actually used, resulting in a double download.
Forgetting hreflang on alternate language links. Without hreflang, search engines cannot identify which language variant to serve to which audience.

This reference is static and makes no network requests; nothing is uploaded or stored.