Home > The Blog about Blogging > General > How to Remove Noreferrer From Your Affiliate Links (including Gutenberg)

How to Remove Noreferrer From Your Affiliate Links (including Gutenberg)

Since the launch of WordPress 5.0, which included the new Gutenberg editor, the core team has included the addition of the noreferrer tag on any links that open up in a new window.

Considering most people open up external links (links not pointing to your own domain) in a new window, they have been adding the noreferrer tag to all of these links. This also includes affiliate links. Here is what they look like when you open the source code:

<a href="https://www.amazon.com/Fire-TV-Stick-4K-with-Alexa-Voice-Remote/dp/B079QHML21/ref=as_li_ss_tl?keywords=fire+tv&pd_rd_i=B079QHML21&pd_rd_r=8af93b89-2ab2-42bf-a506-d51ecf02f22b&pd_rd_w=8Izhx&pd_rd_wg=pa8NO&pf_rd_p=b3dd82c1-af3b-4cc4-a37f-5ce666fd2ce2&pf_rd_r=2XA9S8GTVW655CQ5NZ8C&qid=1558882399&s=gateway&linkCode=ll1&tag=debtrou-20&linkId=47848a2dd092c1e56b4d3714eee95f45&language=en_US" target="_blank" rel="nofollow noopener noreferrer">Amazon Fire TV Stick</a>

You will see the parts in the “rel=” section. There are three in this example. Nofollow is needed for any affiliate and paid links. This is something you usually have to add. Here is a guide on how to add nofollow in Gutenberg if you need it.

The other two parts are noopener and noreferrer. These are added when a link is opened in a new tab/window in the browser. There is no issue with keeping the noopener and I recommend you do, but we will show you how remove the noreferrer in case you need to be compliant with one of your affiliate programs (check their terms).

The problem with this is some affiliate programs bury in their terms and conditions that want to know what the referral of the click is. This is especially true (no longer required) for Amazon.com’s affiliate program called Amazon Associates.

They want to know where their customers are coming from and they track that with the use of a special tag in the URL, but also by tracking the referral data. When the noreferrer tag is used, they can’t properly track this.

Back in 2017 when this happened in WordPress, Amazon came out and said it was OK and it wouldn’t affect account standings.

After some back and forth, WordPress removed the noreferrer by default, but brought it back in WordPress 5.0 for good. It’s not going anywhere. While the rest of this post does show you how to remove noreferrer if you want, this is no longer required for Amazon. They know of this default and are OK with it.

This change is no longer necessary to be compliant with Amazon’s affiliate program. You should check with any other program you are in though.

Now I’m going to show you how with a plugin we use for coding. This allows you to bypass adding code into your themes functions.php file.

Removing Noreferrer with Code Snippets

The first step in getting noreferrer removed is by installing the Code Snippets plugin. The reason we recommend this plugin is it easily allows you to add code snippets to your theme/plugins without actually having to edit any files and increasing the risk of breaking your site.

This plugin is great because it will validate your code when you try to save without breaking the site and you can turn off the code easily without having to edit your files. It will also keep the code when you update your theme. #winning

There are two code snippets you need to add and activate in the plugin. We will provide both.

Disable Noreferrer From Being Added

First, we need to disable the tag from being added any further. This works in both Classic editor and Gutenberg.

If you haven’t changed over to Gutenberg, here is our video about it.

//This code removes noreferrer from your new or updated posts
function im_targeted_link_rel($rel_values) {
return 'noopener';
}
add_filter('wp_targeted_link_rel', 'im_targeted_link_rel',999);

Code above from WP Blogger Assist

You will go into Code Snippets and click Add New. You can name the snippet whatever you want, but paste the above code in the box and then click the little radio box that says “Only run on site front end”.

Now just click Save Changes and Activate. This will turn the snippet on.

Remove Noreferrer from Existing Links

Since the above code only works on links that you will add going forward, you now need to add a new code snippet that will remove it from links already on your site.

The below code snippet will need to be added again in the Code Snippets plugin. Just go to Snippets > Add New and then add the code below. You can name it whatever you want and then make sure to check the same radio button “Only run on the site front end”.

//remove noreferrer on the frontend, but will still show in the editor
function im_formatter($content) {
$replace = array(" noreferrer" => "" ,"noreferrer " => "");
$new_content = strtr($content, $replace);
return $new_content;
}
add_filter('the_content', 'im_formatter', 999);

Code above from WP Blogger Assist with tweak to add both noreferrer layout options.

Click Save Changes and Activate and that’s all.

Please note this code removes the noreferrer from the front end (live) posts and pages. You will still see it in the editor, but you can ignore it.

If you have a caching plugin like WPRocket or CloudFlare, make sure you clear your cache as this will be necessary. Once the cache is cleared, you should be good to go.

One way to verify this is by going into Chrome or Firefox and heading to a post you know has an affiliate link. Right click on the link and hit “Inspect”.

If you’re not sure how to do this, please let us know help you for a simple quick fix.

You should see a code box show up and you can then see if noreferrer is in the link rel=”” area. You should still see noopener but you shouldn’t see noreferrer.

So, that’s all folks. If you have any questions, please contact us or submit a ticket.

For those who don’t mind coding, you can add both of these code snippets into your active theme’s functions.php file. Just make sure to take a backup and have access to the file manager or FTP on your host to fix the issue if something happens.

Leave a Reply

Your email address will not be published. Required fields are marked *

14 Comments

  1. When I try to add the second snippet, I get this error message: Don’t Panic

    The code snippet you are trying to save produced a fatal error on line 3:
    syntax error, unexpected ‘)’

    The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.

    Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.

    Any idea what might be causing this?

  2. This was a great help; thank you! Can you tell me if this fix will also remove no referrer from links added within another plugin as opposed to the WordPress editor. As example, ingredient or equipment links made through WP Recipe Maker plugin?

  3. Hi Grayson! I followed the instructions on the “noreferrer” code in Code Snippets and my WordPress site experienced a fatal error and went offline. I did go and delete Code Snippets and everything looks fine now. I wonder what happened?

    1. There could be conflicting code in the theme or somewhere else which is usually what causes it.

  4. Grayson, apparently there is some duplication in line 3 of the second snippet above – I checked on the WP Blogger Assist site. This is line 3 from their site:
    $replace = array(” noreferrer” => “” );

    1. There is no duplication there. You will see there is a space before noreferrer in the first and one after in the second. It’s looking for each instance depending on where it falls in the rel tag.