Developer Tools

HTTP Link Header Builder

Build and parse the HTTP Link header. Preload, modulepreload, prefetch, preconnect, canonical, alternate hreflang, with Apache, Nginx, and Vercel snippets.

Quick start

Load a preset

Link 1

Target URI

rel

type

crossorigin

media

sizes

hreflang

title

imagesrcset

imagesizes

anchor (optional)

Re-targets the link from the response URI to another resource. Rare outside of PDF and AtomPub.

Output

Link header value

One header value covering every row, comma-separated as RFC 8288 allows.

</fonts/Inter-roman.woff2>; rel=preload; type="font/woff2"; as=font; crossorigin=anonymous

One header per link

Link: </fonts/Inter-roman.woff2>; rel=preload; type="font/woff2"; as=font; crossorigin=anonymous

Some platforms (older CDNs, certain proxies) prefer one Link header per entry over a comma-separated value. Both are valid.

Equivalent HTML <link> elements

<link href="/fonts/Inter-roman.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous" />

For HTML responses you can deliver the same hints from the document <head> instead of the header. The HTML form also supports integrity for SRI.

Apache .htaccess

Header always add Link "</fonts/Inter-roman.woff2>; rel=preload; type=\"font/woff2\"; as=font; crossorigin=anonymous"

Nginx

add_header Link "</fonts/Inter-roman.woff2>; rel=preload; type=\"font/woff2\"; as=font; crossorigin=anonymous" always;

Vercel vercel.json

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Link",
          "value": "</fonts/Inter-roman.woff2>; rel=preload; type=\"font/woff2\"; as=font; crossorigin=anonymous"
        }
      ]
    }
  ]
}

Netlify _headers

/*
  Link: </fonts/Inter-roman.woff2>; rel=preload; type="font/woff2"; as=font; crossorigin=anonymous

Cloudflare Worker

// Cloudflare Worker
export default {
  async fetch(request, env, ctx) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    headers.set("Link", "</fonts/Inter-roman.woff2>; rel=preload; type=\"font/woff2\"; as=font; crossorigin=anonymous");
    return new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers,
    });
  },
};

Next.js next.config.js

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          { key: "Link", value: "</fonts/Inter-roman.woff2>; rel=preload; type=\"font/woff2\"; as=font; crossorigin=anonymous" },
        ],
      },
    ];
  },
};

Express

// Express middleware
app.use((req, res, next) => {
  res.setHeader("Link", "</fonts/Inter-roman.woff2>; rel=preload; type=\"font/woff2\"; as=font; crossorigin=anonymous");
  next();
});

About the Link header

RFC 8288 defines Link as a typed link between the current response and a target URI. The target sits in angle brackets; everything after the semicolon is metadata.
A server can send one Link header with comma-separated entries, or repeat the header. They are semantically identical.
preload requires as so the browser fetches with the correct priority and Accept header. preload as=font requires crossorigin=anonymous.
modulepreload preloads an ES module and walks its import graph automatically.
preconnect targets an origin (scheme + host), not a path. dns-prefetch resolves the DNS only and is cheaper.
canonical in the header is equivalent to the HTML <link rel="canonical">. Google, Bing, and most crawlers honor both. Useful for non-HTML responses (PDF, images) where you cannot add a head element.
alternate with hreflang declares language variants of the same resource; Google reads this in the header.
rel=next/prev/first/last are used by REST APIs (GitHub, Stripe) to expose pagination without inventing a body schema.

Common pitfalls

preload without as is ignored. The browser cannot pick a priority without it. Chrome logs a console warning; other engines silently drop the hint.
Wrong protocol on preconnect. Use the same scheme as the resource you will load. Mixing http://example.com with later https://example.com fetches creates a second connection.
Quoting the URI is wrong. The URI sits in angle brackets, never in quotes. Quotes belong only around attribute values.
hreflang on the wrong rel. hreflang is only meaningful with rel=alternate. Anywhere else it is decoration the browser ignores.
imagesrcset without as=image. The browser only honors imagesrcset/imagesizes when the hint targets an image.
Stale prev/next. If a paginated API caches headers per route, make sure the cache key includes the page parameter.

How to use

Pick a preset (Preload font, Preload LCP image, Modulepreload, Preconnect to CDN, Canonical with hreflang, REST pagination) or start with the default row.
Type the target URI, pick a rel keyword, and fill in the relevant attributes. Validation errors and warnings appear under the row in real time.
Copy the header value at the top of the Output section, or the per-link form, or the equivalent HTML link elements.
Drop one of the server snippets (Apache, Nginx, Vercel, Netlify, Cloudflare Worker, Next.js, Express) into your config to ship the header.
Switch to Parse an existing header and paste any Link value to see each entry broken out by URI, rel, and attributes.

About this tool

HTTP Link Header Builder turns the choices you would make in a server config into a correct RFC 8288 Link header value, with no tooling to install and no data sent off-device. Pick a target URI, a rel keyword from the IANA link relation registry (preload, modulepreload, prefetch, preconnect, dns-prefetch, canonical, alternate, next, prev, first, last, manifest, icon, stylesheet, search, author, license, self, edit, describedby), and the standard attributes (as, type, media, sizes, hreflang, title, anchor, crossorigin, imagesrcset, imagesizes); add a second, third, or fourth link to ship many hints in one response. The output is the exact header value, properly quoted per the RFC 8288 link-extension grammar, plus an equivalent HTML link element you can drop into the document head, plus pasteable server snippets for Apache, Nginx, Vercel, Netlify, Cloudflare Workers, Next.js headers config, and Express. Built-in validation surfaces the rules that quietly break preloads in production: preload requires the as attribute, fonts require crossorigin=anonymous, modulepreload implies as=script, preconnect and dns-prefetch target an origin not a path, hreflang only matters on rel=alternate, imagesrcset and imagesizes only apply when as=image, and canonical needs an absolute URL. The parser mode accepts any Link value the server is already returning (with or without the Link: prefix, on one line or many, single-header or comma-separated form), correctly handles commas inside quoted attribute values and inside angle-bracketed URIs, and breaks the result out into one row per link with its rel keyword and parsed parameters. Useful for performance engineers shipping LCP and font preloads, SEO teams declaring canonical and hreflang from the response header (the only option for PDFs, images, and other non-HTML resources), REST API authors emitting RFC 5988 / RFC 8288 pagination, anyone debugging why a preload was ignored in DevTools, and writers translating between header and HTML link forms when migrating hints from the head to a CDN edge. Everything runs in your browser; the URIs, attributes, and pasted header values never leave your device.

Free to use. Works in your browser. No signup, no login.

Related tools

HTTP Link Header Builder

Load a preset

Link header value

How to use

About this tool

You may also like

Cache-Control Header Builder

CORS Headers Generator

CSP Header Generator

Canonical Tag Generator

Hreflang Tag Generator

Redirect Rule Generator

HTTP Link Header Builder