Brief Summary

The rel= attribute in HTML defines the relationship between the current document and linked resources. Using rel values correctly helps manage link equity transfer, improve link security, speed up website loading, and help search engines better understand the structure of your resource.

Who should read this article:

• SEO specialists who work with internal and external link optimization.
• Web developers building modern web applications.
• Website owners who want to improve search rankings and loading speed.
• Content managers and copywriters who place links in materials.

What the rel Attribute Is and Why It Is Needed

The rel attribute (from the word “relationship”) in HTML defines the connection between the current document and the resource the link points to.

When a link takes us to a resource, the rel attribute explains why the link points to that address. For example, it may point to a stylesheet file that should be used with the document. Or to a page filled with the same content as the original document, but displayed in a standard format for subscribing to RSS news. The address may also be a language translation or a PDF version. Link relationships are also used when a link leads to the previous or next pages of an e-book.

Most modern browsers do not react to the values of this attribute, but search engine crawlers rely on it when indexing website pages. Web services such as social networks or language translation tools will also understand your site better if link types are defined on it. It can be applied to a link with a tag using this syntax:

<a rel="..." href="...">...</a>

Or to a tag that establishes a connection with an external document such as a stylesheet or font file. In that case, the syntax will look like this:

<link rel="..." href="...">

The most commonly used values are nofollow, which tells search engines not to follow a specific link and not to pass link equity, and canonical, which defines the primary address for indexing. But the rel attribute has many more values that are useful for SEO, security, and website performance.

Proper use of the rel attribute helps search engines better understand the site structure, manage link equity transfer, and improve rankings in search results. The rel attribute also plays an important role in web application security and in speeding up page loading.

FAQ for This Section

Why is the rel attribute needed in links?

The rel attribute explains to search engines and browsers the nature of the relationship between the current page and the resource the link points to. This helps index the site more effectively, manage link equity transfer, and improve link security.

Is the rel attribute required for all links?

No, the rel attribute is not mandatory. However, its use is beneficial for external links, links in comments, advertising placements, and when optimizing website performance.

Main rel Attribute Values for SEO

rel=stylesheet

The most common value for the link tag. It tells the browser that the linked file is a CSS stylesheet. This is a required value when connecting CSS files:

<link rel="stylesheet" href="styles.css">

rel=nofollow

This value is intended for search engines: it tells them that the link does not pass its authority to the page it points to. Example:

<a rel="nofollow" href="page.html">Robot, don’t follow this page</a>

rel=canonical

Specifies the preferred URL that should be included in search results. It is used in the link tag in the page header. It helps fight duplicate content and tells search engines which version of a page is the main one:

<link rel="canonical" href="http://www.example.com/">

Important: there should be only one canonical tag on a page. Do not use canonical together with noindex, as this can create conflicting signals for search engines.

rel=noopener

A critically important value for security. It is used together with target="blank" to protect against vulnerabilities related to the new window accessing the window.opener object. It is recommended to always use it when opening external links in a new tab:

<a href="https://example.com" target="_blank" rel="noopener">External link</a>

Without rel="noopener", the opened page may gain access to your window.opener and potentially redirect the user to a phishing site.

rel=noreferrer

Prevents the Referer HTTP header from being sent when following a link. It also includes the functionality of noopener. It is used to protect privacy and prevent leaking information about where the user came from:

<a href="https://example.com" rel="noreferrer">Link without referer</a>

It is often used together with noopener: rel="noopener noreferrer" for maximum protection.

rel=sponsored

Indicates that a link is paid or sponsored (advertising, paid placements). It helps search engines better understand the nature of links on your website:

<a href="https://example.com" rel="sponsored">Sponsored link</a>

It can also be used together with nofollow: rel="sponsored nofollow".

rel=ugc

User Generated Content is used for links in user-created content: comments, forums, reviews. It helps search engines distinguish between editorial and user-generated content:

<a href="https://example.com" rel="ugc">Link in a user comment</a>

It can also be combined with nofollow: rel="ugc nofollow".

rel=preload

Tells the browser to preload critical resources (fonts, images, scripts) to speed up page loading. It is used in the link tag:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

It differs from prefetch in that preload fetches the resource immediately and with high priority, while prefetch loads it in the background for future use.

rel=preconnect

Establishes an early connection to the server where the resource is hosted. Useful for external domains (CDNs, Google Fonts, analytics). It speeds up the subsequent loading of resources:

<link rel="preconnect" href="https://fonts.googleapis.com">

The browser establishes the connection in advance, which saves time when loading fonts or other resources from that domain.

rel=alternate

Indicates that the link points to an alternative version of how the page is displayed. For example, this may be a PDF version or a print version:

<a rel="alternate" type="application/pdf" href="page.pdf">PDF version of the page</a>

This type can also be given hreflang, which indicates that the link points to a page in another language version:

<a rel="alternate" hreflang="en" href="english-version.html">Spanish version</a>

rel=author

Indicates that the link leads to information about the author of the website or page:

<a rel="author" href="about.html">About the author</a>

rel=bookmark

Says that the link is permanent and that the address of this page will never change:

<a rel="bookmark" href="about.html">Permanent link to the page</a>

rel=help

This kind of link leads to help-related content. The browser associates this help information with the parent container in which this link was placed.

<form id="form"> 
<label for="comment">Your comment:</label> 
<textarea id="comment"></textarea> 
<input type="submit" value="Leave a comment"> 
<a rel="help" href="comments.html">Help with comments</a> 
</form>

In this example, the link leads to help information about the content located in the parent element of the link, namely the comment form.

rel=license

Used when the link leads to the license agreement for the main content of the page. The link must be placed within the site's main tag. The license agreement applies only to the content placed within this section. It will not apply to content located, for example, in the footer:

<a rel="license" href="license.html">License agreement</a>

rel=prefetch

Tells the browser to load a resource in the background in advance for possible future use. Used for pages that the user may open:

<link rel="prefetch" href="next-page.html">

It differs from preload in that prefetch has low priority and is loaded in the background without blocking the main content.

rel=dns-prefetch

Performs a preliminary DNS lookup for a domain, which speeds up the subsequent loading of resources from that domain. Especially useful for external resources:

<link rel="dns-prefetch" href="https://cdn.example.com">

The browser resolves the domain name to an IP address in advance, which saves time during the actual resource loading.

rel=search

This type indicates that the link leads to a search interface:

<a rel="search" href="search.html">Site search</a>

rel=tag

A link of this type leads to a definition of a keyword or site category:

<a rel="tag" href="search.html">

This page belongs to the search page </a>

rel=first, next, up, last, prev

These values are used in pagination. For example, a link to the next page has the value next, and a link to the previous page has prev:

<ul>
<li><a rel="prev" href="page-1.html">Page 1</a></li>
<li>Current page</li>
<li><a rel="next" href="page-3.html">Page 3</a></li>
</ul>

rel=external

Means that the link will open in a new window. The link itself will be indexed and will pass link equity. In WordPress, this attribute is widely used in comments. It can be used together with nofollow so that the link does not pass link equity:

<a rel="external nofollow" href="page.html">Open in a new tab</a>

rel=icon

Used to associate a site icon with its content. It is specified in the tag:

<link rel="shortcut icon" href="/favicon.ico">

Most browsers do not conflict with this attribute, associating the site icon with its pages. It is also possible to define the icon image size using sizes:

<link rel="icon" href="favicon.png" sizes="16x16" type="image/png">

Combining Values

The rel attribute can contain multiple space-separated values. This makes it possible to combine different types of relationships:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Safe external link</a>
<a href="https://example.com" rel="sponsored nofollow">Paid link without passing link equity</a>
<a href="https://example.com" rel="ugc nofollow">User-generated content without link equity</a>

Usage Recommendations

• Always use rel="noopener" when opening external links in a new tab (target="blank").
• Use rel="nofollow" for untrusted external links, rel="sponsored" for ads, and rel="ugc" for user-generated content.
• Use preconnect and dns-prefetch for external resources, and preload for critical resources.
• Use rel="canonical" to indicate the main version of a page.

These are far from all the possible values of the rel attribute. Do not neglect using the rel attribute — it allows you to easily add more semantic meaning to your links and create relationships between pages on your site, which will then be processed by search engine crawlers, aggregators, and browsers. Proper use of rel improves your website’s SEO, security, and performance.