How rel attributes in HTML affect SEO?

The rel attribute in HTML elements, particularly within the <a> and <link> tags can have a significant impact on search engine optimization (SEO). Several rel values directly influence how search engines understand and treat links. Here are the most relevant rel values that affect SEO:

canonical

• Description: Indicates the preferred version of a page when duplicate versions of a page exist.
• Usage: Helps search engines understand which version of a page to index and rank, preventing duplicate content issues.
• Example:
  html <link rel="canonical" href="https://example.com/preferred-url/">

nofollow

• Description: Instructs search engines not to follow the link or pass «PageRank» (or its equivalent) to the linked page.
• Usage: Useful for user-generated content, paid links, or any link you don’t necessarily trust or endorse.
• Example:
  html <a href="https://external-site.com" rel="nofollow">External Site</a>

noopener

• Description: Prevents the new page from being able to access the window object of the originating page, enhancing security. While not directly an SEO attribute, it’s often used alongside noreferrer.
• Example:
  html <a href="https://external-site.com" rel="noopener">External Site</a>

noreferrer

• Description: Prevents the browser from sending the referring URL to the new page. It implicitly includes the noopener behaviour in modern browsers.
• Usage: While its main purpose is privacy, it can also affect how traffic sources are reported, which might be considered in an SEO context.
• Example:
  html <a href="https://external-site.com" rel="noreferrer">External Site</a>

prev and next

• Description: Used to indicate the relationship between component URLs in paginated series.
• Usage: Helps search engines understand the structure of paginated content.
• Example:
  html <link rel="prev" href="https://example.com/page-1/"> <link rel="next" href="https://example.com/page-3/">

alternate

• Description: Indicates alternate versions of content, such as mobile-friendly or translated versions.
• Usage: Useful for indicating mobile versions or different language variants of the same content.
• Example:
  html <link rel="alternate" media="only screen and (max-width: 640px)" href="mobile-page.html">

external

• Description: Indicates that the linked content is external to the current site.
• Usage: Its impact on SEO is not explicitly documented, but it can be used for semantic clarity.

ugc (User Generated Content)

• Description: Introduced by Google, this value indicates links within user-generated content, like comments and forum posts.
• Usage: Helps Google identify and treat links that you don’t editorially vouch for.
• Example:
  html <a href="https://external-site.com" rel="ugc">Link from user comment</a>

sponsored

• Description: Indicates that the link is an advertisement, sponsorship, or other compensation agreement.
• Usage: Directs search engines to not consider this link for ranking purposes.
• Example:
  html <a href="https://external-site.com" rel="sponsored">Ad Link</a>