Understanding what nofollow noreferrer noopener and how to correctly use them is important. Especially when many so called HTML or SEO experts suggest misinformation about what these HTML tags do.
nofollow noreferrer noopener are HTML Link Types
These HTML attributes are called link types. Which basically instructs user-agents (browsers, web crawler bots, search engines etc.) to treat the link (hyperlink) you place any of these link types = nofollow, noreferrer, or noopener differently compared to if you didn’t use it on links.
Video Lesson: What is nofollow noreferrer noopener?
Anatomy of a Link
Okay, you don’t need to know HTML in depth, but to understand what HTML Link Types do, you should analyze the image above. Because as you can see, a hyperlink consists of URL which is the destination. Remember, this destination address can point to ANY web document (another web page, image, video, pdf file etc.) and also, each time a link is clicked, computers (or, browsers, search engines) can record other information such as IP address, browser type, time of click etc.
Understand what’s said above, do not quickly skip through it, or else, you’ll use these nofollow, noopener, noreferrer incorrectly.
What is nofollow?
<a href="https://www.example.com" rel="nofollow">Link Text</a>
What is noreferrer?
<a href="https://www.example.com" rel="noreferrer">Link Text</a>
What is noopener?
As far as HTML and javascript coding is concerned, you can open links using different techniques. For example:
<a href="https://www.example.com" target="_new" rel="noopener">Link Text</a>
Above example will open the link in new browser window.
Since you can set target attributes (_new, _blank, _self, _parent, _top) on links to change the link click behaviour. The above example will open the link using a NEW Browser Window. But this link click behaviour carries on to the NEW TAB certain type of information (including SessionID).
Meaning, you can Go-Back & Forward & even manipulate the URL in the browser on the newly opened NEW TAB. In rare cases, this makes phishing attacks, Clickjacking, or other malicious attacks possible.
If you are concerned about website security (E-Commerce or Membership Type of Sites), do NOT rely on setting link type noopener on links alone. Instead, strongly consider strong security procedures such as website security best practices and Cross Origin Opener Policy. Using WordPress? Here’s how to install and use Wordfence Security Plugin.
Do I Need Both Nofollow and Noreferrer?
NO. But its optional and you can use either one, or both because you now know what they actually do.
<a href="https://www.example.com" rel="nofollow noreferrer">Link Text</a>
Do I Need Both Noreferrer and Noopener?
NO. But its optional and you can use either one, or both because you now know what they actually do.
Is NOFOLLOW Bad for SEO?
YES. Because if you don’t know what exactly nofollow does for SEO, and how Google treats links, then, using it will be worse than not using it.
Ask yourself this about links on your website (internal or external) “Do you NOT trust the link you are linking towards?” If you do NOT, then, you shouldn’t be linking towards it instead of relying on rel nofollow link attribute.
Only in rare cases it will be good for SEO, and only for certain type of websites (such as popular websites where people leave comments, forum type of website with user generated content with links going out to different websites and you can’t manage each and every link). Then you can use nofollow coupled with rel=“nofollow ugc” (UGC stands for user-generated content). And search engines like Google understand these attributes placed on links and also recommend website owners to use it for such links and content. Read more about Google Link Spam update here.
Some Content Management Systems such as WordPress automatically adds these link types, if you’re using WordPress, then, do not waste time removing automatically added noreferrer noopener tags, simply just leave them in place as it won’t harm your site or Google rankings. However, if your Content Management Systems (or SEO Plugins) adds nofollow tag automatically. Then, you should 110% ensure that its used correctly (or just remove it completely) (that will be the case for 99.9% of setups).
That is another good reason to follow RankYa SEO techniques and Yoast Tutorials because such SEO plugins adds these by default to each and every WordPress site using their plugins. But not all websites are the same (some are small business sites, some are WooCommerce Sites, some are membership websites) so how can you let Yoast SEO Plugin add nofollow to every single site?
Is NOOPENER Bad for SEO?
NO. It has no relation to search engine optimization. It can be useful to include on links to quickly add new layer of security for links including the ones that open in new tab or new window.
Can I Use Nofollow Noreferrer Noopener Together?
YES. If appropriate to do so you can combine them all together
<a href="https://www.example.com" rel="nofollow noopener noreferrer">Link Text</a>
RankYa SEO Tip Related to Links (Hyperlinks)
There are other link types which can better guide search engines to understand your website, particularly rel home. You can use this whenever you are pointing towards your home page (as in main domain URL) like so:
<a href="https://www.exampledomain.com" rel="home">Link Text</a>
And to improve accessibility of your site, you can and should use title attributes on links too
<a href="https://www.example/pageAboutProductOrService" title="Give Cue About The Link">Link Text Keyword</a>
