Master SEO vocabulary with all essential terms and meanings here.

rel Attribute

Last updated: Jun 20, 2024

https://cmlabs.co/en-id/seo-terms/rel-attribute-in-html

Link copied!

By using the rel attribute, you can establish relationships between the current document and other documents, which is useful in UX empowerment strategies and SEO optimization.

Let's discover what is rel in HTML and how to create page numbering with rel below.

What Is rel in HTML?

Within the HTML code structure, there's the rel attribute, which is a component of the <a> tag or link to define the relationship between each page. 'rel' itself is an abbreviation of 'relationship'.

The rel attribute is also valid in <link>, <area>, and <form>, where the supported values depend on the element in which the attribute is found. However, some values might only be relevant in certain subsets of these elements.

So, what is rel in HTML? It is the attribute that specifies the relationship between the linked document and the current document. Search engines often use the rel attribute to gather more information about a link.

The rel attribute is only used when there's an href attribute within a structure. The href determines the location of the linked file or document, while the rel function in HTML is to mark the relationship between the linked document and the relevant document.

Then, you can use the appropriate rel attribute values for the type of relationship between pages. Here are the possible values of the rel attribute:

author: The targeted page is the author's page.
alternate: The targeted page is an alternative page with the same purpose as the currently opened page.
bookmark: The targeted page is often bookmarked.
help: The targeted page is a help page.
external: The targeted page is outside the current page's section.
next: The targeted page is a continuation of the current one.
license: The targeted page is a license page.
nofollow: The targeted page is not directly attributed.
noopener: The targeted page operates separately and protects from windows.opener.
noreferrer: The targeted page prevents search engines from directing to a new page.
sponsored: The targeted page is an advertisement page.
ugc: The targeted page is user-generated content.
tag: The tag of the currently opened page.
search: The targeted page is a search page.
prev: The targeted page is the content of the previous page.

To write the rel attribute, you insert the rel attribute within the opening <a> tag as shown in the following example:

Then, if there are multiple values for the rel attribute, you can write them separated by spaces or commas like this:

With spaces:

With commas:

Here is an example of using the rel attribute on the <link> element:

The purpose of the rel attribute on the <link> element is to indicate that the linked file is a CSS file or stylesheet, while the href function indicates the location of that file.

You can use the rel attribute in browsers that support it, such as Chrome, Edge, Firefox, Safari, and Opera.

The rel attribute does not have a default value. So, if the attribute is removed or if there are no values in the supported attribute, then the document does not have any specific relationship with the target resource other than the hyperlink between them.

For example, if the rel attribute on <link> and <form> is missing, has no keywords, or has no one or more keywords separated by spaces above, then the element does not create any links.

On the other hand, <a> and <area> will still create links, but without the specified relationships.

Page Numbering with rel Attribute

Now that you understand what is rel in HTML, you also need to know how to use the rel attribute for page numbering.

As explained earlier, there are various values for the rel attribute in HTML, such as next and prev. These two values can be used to indicate the relationship between the URL components in a sequence with page numbering.

The sequence could be an article with multiple component pages, a product category with items spread across various pages, or a forum message sequence divided into sequential URLs.

Adding rel="next" and rel="prev" markup to the component pages in the sequence can inform search engines to combine indexing properties (like links) from the URLs or component pages into the sequence as a whole.

This means that links should not be scattered between page-1.html, page-2.html, and so on, but grouped according to the sequence.

Furthermore, rel="next" and rel="prev" markup also provide information to search engines to direct visitors to the most relevant URL.

However, it's important to note that there are some exceptions in the implementation of rel="next" and rel="prev".

If you want to offer a "view all" page to site visitors, you need to follow guidelines from search engines, such as Google, to understand how they display "view all" pages.

Search engines will display the "view all" page if it matches the search results rather than displaying component pages that tend to appear with rel="next" and rel="prev".

On the other hand, if you don't want search engines to display a "view all" page or if your site indeed doesn't have such a page, you can use rel="next" and rel="prev" markup as outlined in Google's official guidelines.