Link
The HTTP Link header field serializes one or more
web links into an HTTP header, providing the same
functionality as the HTML <link> element.
The Link header is defined primarily for
responses, though the specification does not restrict
the header to responses only.
Usage
The Link header defines relationships between the
current resource and other resources. Each link contains
a URI enclosed in
angle brackets followed by parameters using ; as
delimiter. Multiple links appear as comma-separated entries
in a single header or as separate Link headers.
Link: <URI>; rel="type"; param="value"
Servers use Link to signal resource hints (preload, prefetch, preconnect), declare canonical URLs for search engines, indicate alternate language versions, and specify stylesheets or icons. The header is processed before the HTML body arrives, giving the browser an early opportunity to act on resource hints and begin fetching critical assets.
The rel parameter is required for every link and
identifies the relationship type. Additional parameters
like as, type, crossorigin, and hreflang refine how
the browser handles each link. The
Content-Type of the linked resource
influences browser behavior when processing certain
relation types.
Note
The HTTP Link header is semantically equivalent to
the HTML <link> element, but browser support for
certain relation types differs. Most browsers do not
apply a CSS stylesheet referenced only in the HTTP
Link header.
Directives
rel
The rel parameter is required. The value describes the
relationship between the current resource and the linked
resource. Common values include preload, prefetch,
preconnect, dns-prefetch, stylesheet, canonical,
and alternate.
as
The as parameter specifies the resource type when using
rel="preload" or rel="prefetch". Values include
script, style, image, font, video, audio,
document, and fetch. The browser uses this to set the
correct request priority and apply content security
policies.
type
The type parameter declares the MIME type of the linked
resource. The browser skips the fetch when the declared
type is not supported.
crossorigin
The crossorigin parameter controls the CORS
mode for the request. The value anonymous sends a
request without credentials. The value use-credentials
includes cookies and HTTP authentication. Omitting the
parameter sends a no-cors request for applicable
resource types.
hreflang
The hreflang parameter specifies the language of the
linked resource. Used with rel="alternate" to declare
language or regional variants of a page.
title
The title parameter provides a human-readable label for
the linked resource. Used primarily with rel="alternate"
to name different feed formats or language versions.
anchor
The anchor parameter overrides the context URI for the
link. Instead of the current resource acting as the link
source, the specified URI becomes the anchor.
media
The media parameter specifies a media query restricting
when the linked resource applies. The browser fetches the
resource only when the media condition matches.
Example
A server tells the browser to preload a critical font file
before the HTML body arrives. The as parameter sets the
resource type, and crossorigin enables CORS because font
requests require CORS.
Link: </fonts/main.woff2>; rel="preload"; as="font"; type="font/woff2"; crossorigin
A preconnect hint establishes an early connection to a third-party origin, reducing latency for subsequent requests.
Link: <https://cdn.example.re>; rel="preconnect"
A DNS prefetch hint resolves a hostname before the browser needs resources from the origin.
Link: <https://analytics.example.re>; rel="dns-prefetch"
A canonical declaration in the HTTP header tells search engines the preferred URL for a page with multiple addresses.
Link: <https://example.re/article>; rel="canonical"
Alternate language versions declared with hreflang
indicate localized content. The x-default value serves
as a catch-all for unmatched locales.
Link: <https://example.re/en/>; rel="alternate"; hreflang="en",
<https://example.re/de/>; rel="alternate"; hreflang="de",
<https://example.re/>; rel="alternate"; hreflang="x-default"
A preload hint for a render-critical stylesheet. The browser fetches the stylesheet at high priority.
Link: </css/critical.css>; rel="preload"; as="style"
Takeaway
The Link header provides a mechanism for expressing resource relationships in HTTP headers, enabling early resource hints, canonical declarations, and language alternates independent of the HTML body.
