External links best practices—cont’d

… starting from the point where the story stopped.

Getting a little more technical

Knowing that opening links in a new tab isn’t considered best practice is one thing, but there’s more to it than just the target attribute in an <a> tag ¹. One particularly important attribute is the rel attribute. It defines the relationship—hence, “rel”; simply short for relationship—between the page the link is on and the page it is linking to

The HTML rel attribute is like a secret doorway to the inner workings of web technology – it’s not something most people think about, but it has an important role.Danielle Richardson Ellis

The type of relationship is given by the value of the rel attribute. Importantly, these values must be semantically valid for both machines and humans. The allowed keywords for the rel attribute (and their meanings) are defined in registries like the WHATWG community. Now, in keeping with the topic of this post, I will only cover those related to best practices for external links.

rel="external"

Until now, my approach to external links has been limited to adding the rel="external" attribute (and of course, not opening them in a new tab; see the first part of this article).

external

Indicates that the referenced document is not part of the same site as the current document

This is what the rel attribute looks like in action:

<a href="https://example.com/" rel="external">External Link</a>

Surprisingly, while seeking answers about whether website links should open in a new tab or not, I rarely saw any reference to the rel="external" attribute. Curious about this (yet not giving it much importance at the time), I asked Copilot—Microsoft’s generative AI chatbot—its opinion:

I understand your confusion. The use of rel="external" has indeed been mentioned in various contexts over the years, even though it’s not a standard HTML attribute. Let’s explore why this might be the case.

Historical Context
– Custom Practices: In the early days of web development, developers often created custom attributes to handle specific needs. rel="external" was one such attribute used to indicate that a link pointed to an external site. This was more common in XHTML and early HTML practices.
– Search Engine Optimization (SEO): Some developers believed that using rel="external" could help search engines understand that a link was external, potentially influencing how the link was treated in terms of SEO. However, this was never a standardized or widely adopted practice by major search engines.

Modern Practices
– Standard Attributes: Today, attributes like rel="noopener" and rel="noreferrer" are standardized and widely supported by browsers for security and privacy reasons.
– SEO Best Practices: For SEO, attributes like rel="nofollow" are used to instruct search engines not to follow a link, which is a more recognized and effective approach.

Why You Might Have Seen It
– Legacy Code: If you’ve been working with web development for a while, you might have encountered legacy code or tutorials that recommended rel="external".
– Community Practices: Sometimes, community-driven practices and recommendations can persist even if they are not officially standardized.

Moving Forward
While rel="external" might have been useful in certain contexts in the past, it’s generally better to use standardized attributes today. Here’s a quick summary of what to use:
– For Security: rel="noopener"
– For Privacy: rel="noreferrer"
– For SEO: rel="nofollow"

If you have any specific scenarios or further questions, feel free to share, and I’ll be happy to help!

Admittedly, my knowledge of the topic was probably outdated (at least 6 years old); still, I did not feel confident in trusting my decision solely on Copilot’s reply. In keeping with my quest for clarity, I asked Gemini—Google’s generative AI chatbot:

Should You Use the rel="external" Attribute?

Yes, it’s generally recommended to use the rel="external" attribute on external links, especially when you’re not using target="_blank".

Here’s why:
• Semantic Clarity: It provides a clear signal to both users and search engines that the link leads to a different website. This can improve user experience and search engine optimization.
• Accessibility: Screen readers and other assistive technologies can use this attribute to provide additional context to users.
• Best Practices: Many web development guidelines and style guides recommend using rel="external" for external links.

However, it’s important to note that:
• rel="noopener": If you’re concerned about security and want to prevent the linked site from opening windows or frames in your domain, consider using rel="noopener" instead of or in addition to rel="external".
• Contextual Use: While rel="external" is generally recommended, there might be specific scenarios where it’s not necessary or appropriate. For example, if your website primarily links to external resources, you might not need to use it for every link.

In conclusion, using the rel="external" attribute for external links is a good practice that can improve your website’s accessibility, SEO, and overall user experience.

Surprisingly, the rel="external" attribute was not listed in the article “Qualify your outbound links to Google.” As a matter of fact, it was almost nowhere to be found (using Google as a search engine). Revisiting W3 as a primary resource (see the first part of this article), I found that the role of a link defined by the <a> tag is specified via the rel attribute. As mentioned earlier, “external” indicates that the link is leading to a document (in that case, a web page) that is not part of the site.

A rel=”external” attribute value informs search engines that the link is on a domain that is outside the current website. This is mostly used when including a link that is outside the web server.Jack Poorte

“Were either of these two AI victims of hallucination?”

Hallucination (artificial intelligence)

In the field of artificial intelligence (AI), a hallucination or artificial hallucination […] is a response generated by AI that contains false or misleading information presented as fact.

Copilot	Fact check	Gemini	Fact check
rel="external" is not a standard HTML attribute	Not true. ‘External’ is one of the most important existing rel value for the <a> target. Moreover, Differently from a class name, which does not express semantics, the rel attribute must express tokens that are semantically valid for both machines and humans. Source: “HTML attribute: rel“	use the rel="external" attribute on external links, especially when you’re not using target="_blank"	Unfortunately, I could not find any definitive information to verify this statement.
Some developers believed that using rel="external" could help search engines understand that a link was external	It’s not just a belief. Tip: Search engines can use this attribute to get more information about a link! Source: “HTML <a> rel Attribute“	It provides a clear signal to both users and search engines that the link leads to a different website	True, at least for search engines 2.

To sum up, the rel attribute defines the relationship between the current page and the linked page or resource. Using rel="external" instructs search engines that the link is outside the current website. It also allows CSS attribute selectors to style external links so they look different from local links (though this is not the best approach ²).

Given that my external links indeed point to resources outside my site—duh!—it makes sense to continue using rel="external" to clearly indicate this relationship. Therefore, I have decided to keep using rel="external"!

---

Now, something new (i.e., something I was not yet implementing) was revealed to me through my inquiries. While I could barely find any articles about rel="external", the entire web was flooded with two other values: noopener and noreferrer. The reason is explained in the text box below.

“Hold on a minute. Why use rel="noreferrer" when the issue is with the window.opener property?”
Theoretically, either rel=”noopener” or rel=”noreferrer” is sufficient to prevent this problem, with rel=”noopener” being the correct attribute to use. (The other one, rel=”noreferrer”, has a side-effect in that the browser will also withhold the referring URL.) However, at this time, not all browsers support rel=”noopener”. Likewise, rel=”noreferrer” is also not supported by some browsers. Since the list of browsers that support either attribute is not identical, if you want this protection from the greatest subset of browsers possible, you will probably need to use both.

Importantly, Christopher Heng concluded his articles with this statement: In other words, the method detailed above is not 100% foolproof. The best way to avoid the problem is to use normal links, without target=”_blank”. That being said, it is worth mentioning that WordPress automatically adds these two attributes to external links that you set to open in a new window; specifically, the following code is added to your link:

target="_blank" rel="noreferrer noopener"

rel="noopener"

noopener

Requires that any browsing context created by following the hyperlink must not have an opener browsing context

Noopener Is Essential to Website Security

In short, noopener is largely a security measure to prevent malicious links from gaining access to a user’s browser (a phishing attack known as tabnabbing). In the past, leaving target=”_blank” alone in your link opened up this security vulnerability. Now, whenever you have an external link set to open in a new browser window using target=”_blank”, most search engines and SEO experts consider it best practice to use noopener alongside it.Haley Walden

“Should I use it even though I don’t use target=”_blank”?”
It makes the link behave as if window.opener were null and target=”_parent” were set.
“What does that mean?”
Previously, you had to set rel=noopener manually to make window.opener = null for every link that uses target=_blank.
“So, modern browsers now set rel=noopener automatically for any target="_blank" link? But that still doesn’t answer my question!”
Use noopener whenever you link to a site and tell the link to open in a new tab.
“But my external links don’t open in a new tab… Can anyone answer my question?“
I understand that rel=”noopener” is only applicable when the link is opened in a new tab.

I couldn’t find anything to back it up. On the contrary, I found (in Ahrefs’ glossary article about noopener) that it can (and should) be added to all external links. Specifically, they meant not only the links that open in a new window or tab in WordPress, but I assume the statement remains valid if I omit the “in WordPress” part. Yet, in the same article, they concluded it’s a good practice to manually include “noopener” on links that open in a new tab/window. Links that open in a new tab! So…?

In keeping with the same article, they provide a wise piece of advise, though:

However, while the use of “noopener” does a good job of protecting users from malicious code, it’s still important to think carefully about where you link to in the first place. By choosing only authoritative and trusted websites to point to, you minimize the risk to your users.

But in cases where websites change, die, or are resold, today’s good links could be tomorrow’s malicious ones – and you won’t even know about it when they change. That makes “noopener” an important extra layer of security to ensure your users stay safe, no matter which links they click on your site.

Without the rel=“noopener” attribute, the linked website could take control of the linking page tab in a browser and redirect it to a phishing page or a malicious website. This could be used to steal personal data or install malware.ahrefs

Because it might provide an additional level of safety for my users, should I add the noopener value to all my external links, even though I am not using target="_blank"?

<a href="https://example.com/" rel="external noopener">External Link</a>

rel="noreferrer"

noreferrer

Makes the referrer unknown. No referer header will be included when the user clicks the hyperlink

Use rel=“noreferrer” when you want to hide the fact that you are linking to a website.Stewart

I could have stopped here for a few reasons. First, I don’t use target="_blank". Second, either rel="noopener" or rel="noreferrer" should be sufficient to prevent the aforementioned security issue (at this point, I was leaning towards using only the former). Third, I don’t have competitors… But then, I came across this StackExchange question from gaurav5430: using rel=”noreferrer” without rel=”noopener” or without target=”_blank”.

There is another security concern, when the link is opened in a new tab, the referrer information is sent in the referer header and some sensitive data may be exposed in the url to the target site. This can be fixed by adding rel=”noreferer”.

Though I understand this, I have some questions which i am seeking clarifications for:
• It seems that adding rel=”noreferrer” alone should be enough as by default it enables all the things that rel=”noopener” enables, while also adding referer security on top of it.
• I haven’t seen any examples where rel=”noreferrer” is specified without target=”_blank” . Wouldn’t links that open in the same tab also leak the referrer information?

There was only one answer (and a few comments), but I found my solution (to the first question) in the HTML Living Standard—one of the current registries for the possible values of the rel attribute:

[The noreferrer keyword] indicates that no referrer information is to be leaked when following the link and also implies the noopener keyword behavior under the same conditions.

<a href="..." rel="noreferrer" target="_blank"> has the same behavior as <a href="..." rel="noreferrer noopener" target="_blank">.

Regarding the second question, there was a comment by reed—him again—stating “noreferrer” makes sense for all kinds of links (same tab or other tab), as far as I know.

So, if I understand correctly, the main purpose of rel="noreferrer" is to prevent external sites from knowing that you’ve linked to their material. While this isn’t a concern for me, as mentioned earlier, it does mean that the target site’s server won’t know where the visitor came from. Essentially, adding this tag means that no referrer header will be included when a user clicks the link, making the visit appear as Direct Traffic instead of Referral. This can be inconvenient for those who care about web analytics.

You may want to add “noreferrer” to the external links on your website to add another layer of security and privacy for your visitors. However, even when “noreferrer” is not specified, the only referrer information that the modern browsers send is the domain name.ahrefs

I stumbled upon the article “Referer header: Privacy and security concerns” from Mozilla Developer Network. This article discusses the privacy and security risks associated with the Referer HTTP header. While it has many innocent uses, such as analytics, there are problematic uses like tracking, stealing information, or inadvertently leaking sensitive data. One way to mitigate these risks is by setting the rel attribute to noreferrer on HTML elements at risk of leaking such information, like <a> tags.

Let’s recap: I do not use target="_blank", so I don’t need to worry about having rel="noopener". On the other hand, rel="noreferrer" should be used whether the link opens in a new window or not. While I’m not particularly concerned about the privacy issue (and don’t feel great about hiding the fact that I’m linking to someone’s website), the aforementioned article made me reconsider. Ultimately, I recognize that rel="noreferrer" also includes the noopener behavior, so I’ve decided to use this code instead:

<a href="https://example.com/" rel="external noreferrer">External Link</a>

rel="nofollow"

nofollow

Links to an unendorsed document, like a paid link.
(“nofollow” is used by Google, to specify that the Google search spider should not follow that link)

The nofollow value is one of the most commonly used in links between web pages. It’s also the rel attribute that has the greatest impact on SEO. A nofollow tag can be used to prevent search engines from establishing any relationship between the site doing the linking and the one it’s linking to – basically a way of saying “this link is not an endorsement”.Robin Fry

“Do I have links to other websites whose content or perspective I do not endorse?”

In keeping with Ahrefs’ earlier advice, I avoid linking to websites whose content or perspective I do not endorse. That said, there are exceptions—such as illustrating how poor a site is. Given that nofollow is specific, I’ll use it on a case-by-case basis: for examples like this, as well as for my (only) affiliate link.

To be continued…

---

¹ The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else a URL can address. ^
² A potential use of the rel="external" attribute is to style external links in a way that indicates to the user that they will be leaving the current site. However, it might be more appropriate to use the class attribute for this purpose. ^