The "rel =" attribute: what it is and what it is for
The "rel=" attribute is actively used by website developers to interact with search engines. It includes several values, such as nofollow or canonical. Each of them is designed to solve specific problems.
In today's article, I will go into detail about the "rel=" attribute and show with examples when it is best to use it.
"rel=" attribute: definition and purpose
Rel (from the English "relationship") is an HTML attribute describing a link. It denotes what kind of link it is and to which address it leads. It works like this: when a link directs a user to an address, the attribute tells search engines why the link is pointing to that address. For example, you can link to a stylesheet that interacts with the page.
Another link can lead to a PDF or a foreign language version of the document. A link, as a relationship between the current and another document, is often used in e-books to redirect to the next or previous page.
Most modern browsers don't pay attention to the rel attribute, but search engines, on the contrary, pay close attention to it. In addition, social networks will better interact with a web resource if its links are identified.
The rel attribute can be used in conjunction with the <a> tag:
<a rel="..." href="...">...</a>
It can also appear in the <link> tag:
<link rel="..." href="...">
Values of the "rel=" attribute
If we are talking about the rel attribute, then most often it means the use of the "nofollow" value, but there are other equally important values.
It is used when it is necessary that the page to which the user refers does not increase its link weight due to this link. In other words, this link does not transmit the citation index used by the PageRank used by Google.
<a rel="nofollow" href="index.html">This page does not need to be visited</a>
The use of such a value is justified on sites with comment forms: users can leave links to low-quality resources, and because of this, the site risks losing the trust of search engines.
Used to indicate that the link leads to an alternative image of the page:
<a rel="alternate" type="application/pdf" href="page.pdf">PDF Page</a>
There is also another variation:
It helps the search engine understand the geolocation of the page in order to provide the user with the desired language version in the search results. With its help, we show search robots that the same content is available on the site in different languages. This allows search engines to automatically display the correct language version based on geographic and language data.
<a rel="alternate" hreflang="en" href="english-version.html">English</a>
Indicates the preferred address that will participate in the search. Used in the <header> tag:
<link rel="canonical" href="http://www.example.com/">
Indicates that the link provided refers to information about the author of this page or article.
<a href="/author-page.html" rel="author">link text</a>
Indicates that this link is an anchor and leads to some part in the same document. It also tells search engines that this link is permanent.
<a rel="bookmark" href="about.html">Permalink to the page</a>
This value is used to designate directories. The browser maps this reference to the parent container that this link was placed in.
For example, in the form on the site, this is written through the <a> tag:
<form id="form"> <label for="comment">Comment:</label> <textarea id="comment"></textarea> <input type="submit" value="Text Comment"> <a rel="help" href="comments.html">Help</a> </form>
Indicates that the link contains a license agreement that applies to the main text of the page.
<a rel="license" href="license.html">View License Agreement</a>
rel=dns-prefetch, preconnect, prefetch, preload
Links with such values are useful when you need to refer to external resources that the user is likely to open. The browser caches this link ahead of time, so it opens faster:
<a rel="prefetch" href="license.html">Something interesting here</a>
Defines a site category or keyword:
<a rel="tag" href="search.html">This link refers to the directory page</a>
This type indicates that the link leads to the search interface:
<a rel="search" href="search.html">Site search</a>
Needed in order to link the content of the site to the icon:
<link rel="shortcut icon" href="/favicon.ico"></link>
Means that the link leads to another site, will be indexed and transfer weight. In WordPress, this attribute is often used in comments. It can function in conjunction with nofollow so that the link does not transfer weight:
<a rel="external nofollow" href="page.html">Open in new tab</a>
rel=first, up, prev, next, last
Such values must be written for those links that are used to navigate the page. They lead to the beginning, end, to the previous or next page:
<ul> <li><a rel="next" href="page-1.html">First Page</a></li> <li>Home</li> <li><a rel="prey" href="page-3.html">Last Page</a></li> </ul>
The rel attribute allows you to improve the link between pages and make them more attractive to search engines. As a result, this can significantly affect the attendance of the resource. Don't be afraid to use this attribute - it can significantly improve your site's performance.