HTML5 added a lot of new features, and one of those is the new noreferrer keyword for the rel attribute. This keyword tells the browser that it should not collect or store HTTP referer information when the associated link is followed. Note that the attribute is spelled noreferrer, with two rs unlike the HTTP header, which has only one r. (How to Spell Referrer).
This is a useful keyword for web designers so that you can control what links you pass your site referrer information to.
Continue Reading Below
In other words, readers can click on the links, but the destination site will not see that they came from your site.
Using the Noreferrer Keyword
To use the noreferrer keyword, you put it in the rel attribute inside any A or AREA element.
As of 2013, the rel=noreferrer keyword is not supported in all browsers. If your website has a critical need to block this information, you should look at proxy servers and other solutions to block referrer information on your site.
Test Your Noreferrer Links
If you visit this page it should return a referrer of this web page.
See Also: When and Why to Hide Referrer Information
You can then add the noreferrer keyword to the link and test your browsers to see if they support it or not.
Here’s the HTML to put on your web page to test referrer and noreferrer links:
This link should have a referer
This link should not have a referrer
When you click on the first link, you should get a reply like:
http://webdesign.about.com/gi/o.htm?zi=1/XJ&zTi=1&sdn=webdesign&cdn=compute&tm=7&f=22&su=p284.13.342.ip_p504.6.342.ip_&tt=65&bt=3&bts=91&zu=http%3A//jenn.kyrnin.com/about/showreferer.html
Continue Reading Below
And when you click on the second link you should get a reply like:
You came here directly, or no referer was sent.
In my tests, Chrome and Safari both supported the rel=noreferrer attribute correctly, while Firefox and Opera did not. I have not tested Internet Explorer