nofollow are rel attribute values that are important to use on links for both SEO and security.
When should you use “noreferrer” and “noopener”?
You may have the classic issue reported by Lighthouse “Links to cross-origin destinations are unsafe”.
Lighthouse is warning that you are using
target="_blank" on link, which could potentially expose your website to security issues. This is because the new page that the user has clicked on can access the
window.opener property and could redirect to a malicious website.
In order to fix this issue you can simply add noreferrer and noopener values to the rel attribute on the link.
<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">External link</a>
rel="noopener" prevents a new page from being able to access the
window.opener property, which will stop things like the new page redirecting to a malicious URL.
rel="noreferrer" has the same effect as
rel="noopener" but also prevents the
Referer header from being sent to the new page.
Why use both “noreferrer” and “noopener”?
The reason why you should probably use both
noopener on a link with a target of
_blank is that some browsers (like IE11) don’t support the value
noreferrer browser support:
noopener browser support:
Using multiple rel values on links is in the HTML spec, as explained in Can You Use Multiple Rel Values on Links?.
When should you use “nofollow”?
When you add
rel="nofollow" to a link you are telling the search engine crawler that you don’t want them to crawl that link and you don’t what that link to affect your SEO.
<a href="https://www.pleasedontfollowthislink.com/" rel="nofollow">Don't follow this link</a>
The uses of this might be for a link that you don’t trust. Some SEO agencies may ask you to add it to certain links to reduce what they call “crawler fatigue”, however Google pretty much deny this.
In a blog article about “crawl budgets” they stated:
First, we’d like to emphasize that crawl budget, as described below, is not something most publishers have to worry about.