Link Header

Table of Content

• Syntax
• Directives
• Examples
• Browser Compatibility
• How to modify Link header

The Link header is an essential part of HTTP responses that allows the server to point a client to another resource. Its core purpose is to establish a connection between the current document and an external resource. The Link header can indicate relationships like stylesheet, icon, preload, and many others which contributes to effective resource loading strategies and website performance enhancement.

Syntax

Link: <https://example.com/other/styles1.css>; rel=stylesheetCopy

Directives

There are two primary directives for the Link header:

• <url>: This is the URL of the related resource. It's enclosed in angular brackets <>.
• rel: This specifies the relationship type between the current document and the linked resource.

The rel directive can take several values like stylesheet, preload, next, icon, etc.

Examples

Here are some examples of how to use the Link header:

• Linking a stylesheet:

Link: <https://example.com/styles.css>; rel=stylesheet Copy

• Preloading a resource:

Link: <https://example.com/logo.jpg>; rel=preload Copy

Browser Compatibility

All major browsers support the Link header.

How to modify Link header

ModHeader is a browser extension for Google Chrome that allows you to modify HTTP request and response headers. You can utilize it to change or add the Link headers according to your needs for testing or debugging purposes.

Here's how you can use ModHeader to modify the Link header:

1. Install the ModHeader extension from the Chrome Web Store.
2. Open the ModHeader extension from the extension menu.
3. In the 'Response headers' section, click on 'Add' button. This adds a new row.
4. In the 'Name' field, type in 'Link'.
5. In the 'Value' field, type in your desired Link header value, for example: <https://example.com/styles.css>; rel=stylesheet.
6. Now, all the responses from servers will contain this Link header that you've added.

Thus, ModHeader proves to be an effective tool for developers who aim to test or observe the behavior of their websites under different Link header values or scenarios.