Noopener, noreferrer, and nofollow explained | Point Jupiter

I can never remember what the differences are between noopener, noreferrer, and nofollow, or when best to use them, so here's a handy guide that covers pretty much all of the basics.

Tl;dr:

  • All three are values for the rel attribute on <a> tags;
  • There's no point using any of them unless you have target="_blank" set (i.e. the link will force a new tab to open), and if you do you should use noopener to reduce cross-site phishing risks (there's no downside);
  • Their primary goal is to restrict the access the linked page has to your website/the page linking to it;
  • noreferrer blocks analytics tracking, which you probably don't want to do (but I guess is a way to subtweet via the indie web 😂). It also prevents SEO cross-linking scores, so if you really hate a linked website and don't want to boost it in search, then use this value;
  • Ditto nofollow, though this is relevant regardless of what the target is; it just stops search engine crawlers from traversing the link, so ideal if you have it go somewhere you don't want associated with your site or search indexed, or if the link is doing fancy stuff (i.e. it should be a button 😉). There's a valid point here that user-generated content (such as comments) can benefit from applying nofollow by default, to reduce spam efficacy;
  • Apparently, nofollow is a requirement for sponsored links and ads, so you don't generate clickthrough revenue based on spiders.

(PS: the article's own tl;dr is arguably even more concise and worth a read)

Explore Other Notes

Older

How to play board games online

Now here's something I've been looking for: online (non-Flash) versions of popular board games. It feels like this industry should be booming right now! Board Game Arena looks pretty interesting, […]
  • I can never remember what the differences are between noopener, noreferrer, and nofollow, or when best to use them, so here's a handy guide that covers pretty much all of the […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.