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
<link rel="stylesheet" href="https://example.com/styles.css">
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,
<link rel="canonical" href="https://example.com/article/?page=2">
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.
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">
Links to an AMP HTML version of the current document
<link rel="manifest" href="manifest.json">
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.
<link rel="author" href="humans.txt">
It is mainly a link to provide information about the author or provide a way to contact him.
<link rel="license" href="copyright.html">
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
<link rel="alternate" href="https://es.example.com/" hreflang="es">
It gives the reference of the location in your document that is in another language.
<link rel="me" href="https://google.com/profiles/examples" type="text/html"><link rel="me" href="mailto:firstname.lastname@example.org"><link rel="me" href="sms:+19999999999">
Provides the information about the author or another person.
<link rel="first" href="https://example.com/articles/"><link rel="last" href="https://example.com/articles/?page=20"><link rel="prev" href="https://example.com/articles/?page=1"><link rel="next" href="https://example.com/articles/?page=3">
It describes the series of the document. It can be achieved by giving the rel values such as
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
It is commonly used when the third party service maintains a blog
<link rel="micropub" href="https://example.com/micropub">
It enables posting to your own domain using a Micropub client
<link rel="alternate" href="https://feeds.xyz.com/example" type="application/rss+xml" title="RSS"><link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
<link rel="pingback" href="https://example.com/xmlrpc.php">
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.
<link rel="webmention" href="https://example.com/webmention">
It notifies a URL when you link to it on your document.
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">
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.
<link rel="dns-prefetch" href="//example.com/"><link rel="preconnect" href="https://www.example.com/"><link rel="prefetch" href="https://www.example.com/"><link rel="prerender" href="https://example.com/"><link rel="preload" href="image.png" as="image">
- 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: https://www.iana.org/assignments/link-relations/link-relations.xhtml