HTML offers various ways for search engines and web browsers to better understand data on a web page. One such way is by using nofollow, noreferrer and noopener in link tags.
Although the HTML link
rel attribute is something very silent for some, or self controlled in the case of WordPress users, there can be times where knowing its use can be beneficial. This post will explain the significance of the nofollow, noreferrer and noopener attributes in more detail and give scenarios where their use need to be adapted.
What is a HTML link rel attribute?
To start off, a little knowledge of
rel attributes might come in handy. Rel attributes are used inside HTML
<a> tags to specify the relationship between the current document and another (linked) document (remember that a web page is basically an HTML document). A common example of a
rel attribute would be:
<link rel="stylesheet" type="text/css" href="theme.css">
A common example of a
<a> tag (aka hyperlink)
rel attribute would be:
<a href="https://www.behind-the-scenes.co.za/" target="_blank" rel="nofollow">Behind-the-Scenes</a>
These tags and their
rel attributes are most of the time automatically specified by WordPress. The
<link> tag and its
rel attribute is set up by the theme file(s) and sits silently in the
<head></head> section of a web page while
<a> tag attributes are automatically added when using the WordPress Core post/page editor (see later).
Because this post is about nofollow, noreferrer and noopener
rel attributes, we will not be mentioning the
<link> tags and their
rel attributes any further.
What is rel=”nofollow”?
The rel=”nofollow” attribute provides a way for webmasters to tell search engines not to follow that link. This
rel attribute can either be used in the
<meta> tag section to prevent all links on the page from being followed:
<meta name="robots" content="nofollow" />
or, alternatively, individually on each
<a href="signin.php" rel="nofollow">sign in</a>
Nofollow is commonly used to link to pages that does not need ranking on Google Search. By using nofollow, the impact on SEO is considerable. Using it will signal to Google and other search engines that you don’t want them to count a link as a “vote” for that URL. Google Search itselve recommends considering using the nofollow attribute for linking to untrusted content, paid links and pages that cannot be accessed by crawlers (e.g. log in pages). Because of its potential impact, it is critical that you use the nofollow attribute judiciously.
What is rel=”noreferrer”?
The rel=”noreferrer” attribute mainly specifies the browser not to pass an HTTP referrer header if the person clicks the hyperlink. More specifically, it indicates that no referrer information (e.g. Browser, OS, region, etc.) is to be passed on following the link.
The rel=”noreferrer” attribute should not be confused with rel=”nofollow”. Because it acts on a browser level, noreferrer has no impact on SEO. According to some experts, the noreferrer attribute will affect the composition of Google Analytics’ traffic source data, but it is also believed that Google still gathers some referring information.
What is rel=”noopener”?
According Tools for Google Developers, the rel=”noreferrer” attribute has the same effect as noopener, but also prevents the referer header from being sent to the new page.
Using rel=”noopener” in links prevent this from happening.
From a SEO point of view, the rel=”noopener” attribute is believed to have no negative impact on the referring or the referred web page. By using this attribute only additional security is added.
Note for WordPress users
As mentioned before, WordPress automatically controls some link rel attributes through their TinyMCE editor – the editor that helps create posts and pages. Since November 2016 (and WordPress version 4.7.4) rel=”noreferrer noopener” is automatically added to all links that is to be opened in a new window as a security measure.
Although Google Developers states that noreferrer and noopener both prevents Phishing on their own, I’m not sure why WordPress still ads both these attributes to hyperlinks.
Although the majority of content is covered automatically, there are still times where WordPress won’t have an affect on the HTML code. One such example is by using the Shortcoder plugin. In these cases, the
rel attribute(s) can be added manually as shown below.
Adding nofollow to links in WordPress
It is easy to manually add the nofollow, noreferrer and noopener attributes by simply inserting a
rel attribute to your link’s
<a> tag, for example:
<a href="https://www.behind-the-scenes.co.za/" target="_blank" rel="nofollow noreferrer noopener">Behind-the-Scenes</a>
However, if you’re not comfortable creating or monitoring nofollow tags on your WordPress site, a plugin like Ultimate Nofollow. Rather than having to mess around in the HTML of your content, the plugin shows a checkbox next to each link you add so you can decide whether you want the link followed or not.