# Link Header — Syntax, Values & Examples

> Typed links in a header — preload hints, preconnects, canonical URLs and pagination.

Link carries the same relationships as HTML `<link>` elements, but in the response headers — so the browser sees them before parsing any HTML, and they work for responses that aren't HTML at all. It's used for resource hints, for canonical URLs on PDFs and other files, and by APIs such as GitHub's for pagination.

- Type: Response header
- Category: Routing & context
- Defined in: [RFC 8288 — Web Linking](https://www.rfc-editor.org/rfc/rfc8288.html)

## Syntax

```http
Link: <uri>; rel="<relation>"[; <param>=<value>], …
```

## Values

| Value | Meaning |
|---|---|
| `rel=preload` | fetch this resource early; needs `as=` |
| `rel=preconnect` | open a connection to this origin early |
| `rel=canonical` | the preferred URL for this content |
| `rel="next" / "prev"` | pagination in APIs |

## Examples

```http
Link: </fonts/inter.woff2>; rel=preload; as=font; type="font/woff2"; crossorigin
```

preload a web font

```http
Link: <https://cdn.example.com>; rel=preconnect
```

warm up a connection to a CDN

```http
Link: <https://example.com/report>; rel="canonical"
```

point a PDF at its HTML page

```http
Link: <https://api.example.com/items?page=3>; rel="next"
```

API pagination

## Good to know

- The URI goes in angle brackets.
- Preload links pair well with [103 Early Hints](https://www.devkult.com/http/103.md), which lets the browser start fetching before the final response is ready.
- Font preloads need `crossorigin`, even from your own origin.

## How to set Link

### Express

```
res.set("Link", "</fonts/inter.woff2>; rel=preload; as=font; type=\"font/woff2\"; crossorigin");
```

### Next.js (next.config.js)

```
module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [{ key: "Link", value: "</fonts/inter.woff2>; rel=preload; as=font; type=\"font/woff2\"; crossorigin" }],
      },
    ];
  },
};
```

### nginx

```
add_header Link "</fonts/inter.woff2>; rel=preload; as=font; type=\"font/woff2\"; crossorigin" always;
```

### Apache (.htaccess)

```
Header always set Link "</fonts/inter.woff2>; rel=preload; as=font; type=\"font/woff2\"; crossorigin"
```

## Check it

Fetch only the response headers and filter for Link. In the browser, it's under Response Headers in DevTools → Network.

```sh
curl -sI https://example.com/ | grep -i '^link:'
```

## FAQ

### Does Google support rel=canonical in the Link header?

Yes. Google documents it as the way to set a canonical URL for non-HTML files such as PDFs.

## Status codes it appears with

- [103 Early Hints](https://www.devkult.com/http/103.md)

## Related headers

- [Cache-Control](https://www.devkult.com/headers/cache-control.md): Directives that tell browsers and CDNs whether, where and for how long a response may be cached.
- [Content-Type](https://www.devkult.com/headers/content-type.md): States the media type of the body — HTML, JSON, form data, an image — and often its character encoding.
- [Location](https://www.devkult.com/headers/location.md): The URL to go to next — the target of a redirect, or the address of a newly created resource.

Open the interactive page: https://www.devkult.com/headers/link