Into the verse of link tags <link>

Vaibhav Tandon
Feb 28 · 3 min read

It is one of the most used tags which is always present between the <head>……..</head> tags. The link specifies the relationship between the current document and the external source. But most commonly it is used for linking the stylesheets i.e. the CSS stuff but can be used for other things which we will gonna explore now.

Without anything else, lets first start with the most common one i.e. for the stylesheet

Here, rel stands for the relationships and the value denotes how the item being linked to is related to the containing document.

Now the next comes,

It is often called a ‘canonical link’. It helps the webmasters to prevent the duplicate content issues by specifying as the preferred version of a web page.

Links to an AMP HTML version of the current document

It basically indicates that the linked file is ‘Web App Manifest’ means it links to the JSON file that specifies the installation credentials for web applications.

It is mainly a link to provide information about the author or provide a way to contact him.

As the value of the rel tells almost everything that the particular link was supposed to do. It refers to a copyright statement that applies to the link’s context.

Note: Although recognized, the synonym copyright is incorrect and must be avoided

It gives the reference of the location in your document that is in another language.

Note: If the type is set to application/rss+xml or application/atom+xml, the link defines a syndication feed. The first one defined on the page is the default.

Provides the information about the author or another person.

It describes the series of the document. It can be achieved by giving the rel values such as

  • first
  • last
  • prev
  • next

It is commonly used when the third party service maintains a blog

It enables posting to your own domain using a Micropub client

As we discussed above, if the type is set to application/rss+xml or application/atom+xml, the link defines a syndication feed. The first one defined on the page is the default.

It forms an automated comment when some other Wordpress blog links to our Wordpress blog or post.

It defines an external resource URI to call if one wishes to make a comment or a citation about the webpage. The protocol used to make such a call is defined in the Pingback 1.0 specification.

It notifies a URL when you link to it on your document.

Indicates that the hyperlink references a document whose interface is specially designed for searching in this document, or site, and its resources.

Note: If the type attribute is set to application/opensearchdescription+xml the resource is an OpenSearch plugin that can be easily added to the interface of some browsers like Firefox or Internet Explorer.

  • dns-prefetch: Hints to the browser that a resource is needed allowing the browser to do a DNS lookup and protocol handshaking before a user clicks the link.
  • preconnect: Provides a hint to the browser suggesting that it opens a connection to the linked web site in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly.
  • prefetch: Suggests that the browser fetch the linked resource in advance, as it is likely to be requested by the user.
  • prerender: Suggests that the browser fetch the linked resource in advance and that it also renders the prefetched content offscreen so it can be quickly presented to the user once needed.
  • preload: Tells the browser to download a resource because this resource will be needed later during the current navigation.

These are some of the most common rel values that are used with link tag. There is more of it which can be referenced from here:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade