Did you know that your a
carry inherit security risks? It's kinda weird but it's true, a naked a
tag that doesn't define a rel
attribute is considered "unsecure" by the Google Lighthouse audit and will be flagged by crawlers as unsafe.
The reasoning behind why is a little nuanced but it basically boils down to this: when you link (to an external website), that external website has access to your website's document
object and can thus mess around with the content and scripts that your site is using without your users knowing what's going on.
To fix this, we're going to use an attribute available on anchor tags called rel
(short for "relationship"). There are a lot of valid values that you can pass into rel
that helps to describe the relationship between your website and the destination the a
tag is linking to.
To make your external links secure, you want to add the following to rel
:
<a href="..." rel="noopener noreferrer nofollow" target="_blank">
Each of these do a slighly different things:
noopener
creates a new browsing contextnoreferrer
removes theReferer
headernofollow
indicates that your website does not endorse or control the contents of the desintation website
That's all you need to add! The rest is sort of handled for you by the browser.
As a bonus tip, you should also add target="_blank"
to your links so that external websites open in a new tab:
<a href="..." rel="noopener noreferrer nofollow" target="_blank">