Creating a safe external HTML link - what's the deal with nofollow / noopener / norefferer ?

In HTML, when you create a link using the <a> element, you can add various attributes to control the behavior of that link. The rel attribute specifically defines the relationship between the current document and the linked document.

• nofollow: This instructs search engines not to follow the link for crawling purposes. It's often used to signal that the site providing the link does not endorse the linked content. This is important for SEO (Search Engine Optimization) because it tells search engines not to pass along ranking credit to the linked page.

• noopener: This prevents the new page from being able to access the window.opener property and ensures it runs in a separate process. Without this, the new page can potentially redirect your page to a different URL. It's a security feature, particularly important when target="_blank" is used, which opens the link in a new tab or window.

• noreferrer: When a user clicks a link, the browser generally sends an HTTP header called Referer (sic) to the new page, which indicates the URL of the previous page. The noreferrer attribute value prevents the browser from sending this referer header, which enhances privacy by not disclosing the source page's URL. It also has implications similar to noopener with regard to security.

Here’s how you might see these attributes in an <a> tag:

<a href="https://externalwebsite.com" rel="nofollow noopener noreferrer external" target="_blank">Visit External Website</a>

• href="https://externalwebsite.com": Specifies the URL of the linked document.
• rel="nofollow noopener noreferrer": Specifies the relationship between the current document and the linked one with the terms explained above.
• target="_blank": Opens the linked document in a new window or tab.