A Definition of Rel or Noreferrer

Ask Browsers to Not Pass Referrer Information

HTML Code
Hamza TArkkol / Getty Images

HTML5 added a lot of new features, and one of those is the new noreferrer keyword for the 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.

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. 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

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.

Get more information about the HTML referer: