Remove Noreferrer in Gutenberg From the Latest WordPress Update

Sharing is caring!

Disclosure: Please note that this article may contain affiliate links. You can read my full disclosure here.
    Need help with the Tech-side of blogging? Join my Facebook Group and get some answers.
~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~

For a long time now there has been a potential security issue with opening links in a new tab (link). For roughly 85%+ of browsers adding rel="noopener" to your links will provide protection. For the other 15% of browsers, including Internet Explorer they require the rel="noreferrer" (link).
 

So WordPress in the 5.1 update (link) again has added rel=”noopener noreferrer” to your links that open in a new tab as a security fix on any posts/pages/widgets that have been updated or edited since the update. I have started to see reports of this online for the last week or so. Unfortunately on our main site, I literally updated every post to update our affiliate links after this update, so all our posts were affected.
 

*note: In WordPress 4.7 it was actually the tinymce that added the “noopener noreferrer”, WordPress 5.1 & up this is added by WordPress core.
 

What noreferrer does is remove your domain as the referring domain from the header information of the link that is clicked and thus this information is also removed from google analytics when people click the link on your post.
 

See this screenshot here, when someone clicks a link that is set as rel=”noreferrer … the referrer will appear in Google Analytics as (direct).
 

ga direct screenshot
 

This includes if your internal links within posts on your site are set to open in a new tab and have rel="... noreferrer", then when someone clicks one of those links it will appear on Google Analytics also as a (direct) source rather than an internal link click.
 

If you are referring traffic to one of your favorite sites using a link that opens in a new tab, when your visitors click that link, your favorite site sees (direct) in their google analytics, rather than seeing the referral source of your site. Personally, I want my favorite sites to know if I send them traffic, even if they don’t know who I am (yet).
 

More importantly, some affiliate programs in their terms of service require this information, such as, Amazon see here, especially item 6(v). Amazon did share a statement on their forum in 2017 stating that they are aware of the issue with WordPress 4.7, and that it will not affect sales and that they will look for a solution. I have not seen an update on what solution they plan to propose.
 

Share-a-sale is another affiliate program that states in the terms of service: As an affiliate, you can only have 1 account. You can list multiple domains in one account, that we need to add our domains to our account. But it is unclear if the traffic we send will also need to include the referrer information.
 

I am updating this post as just this week, in late May 2019, a fellow blogger with an established website, with an already approved Amazon Associate account, where she had built up over $800 in affiliate income this month alone had her Amazon account closed without notice. The reason they gave her was “The sources of your traffic are obscured in such a way that we cannot reasonably determine on what Site(s) your Special Links are displayed.”
 

She is appealing the decision on the basis that WordPress 5.1 (and up) is again adding the “noreferrer” to their posts without their knowledge or frankly their consent. We will see what Amazon comes back with.
 

She was told by Amazon support, for anyone that got a termination letter for this reason, to reply to the termination email and have as the subject “not an appeal, but additional information, please read” and then plead your case regarding WordPress noreferrer.

Update: Great news – she got her account reinstated.

It may be that Amazon will again make an exception like they did in 2017 to their TOS.
 

Note: the noreferrer code is only added to links that open in a new tab/new page using the target=”_blank” so one option available is to remove the target=”_blank” and have the link open on the same page, you may need to also update or remove the rel=”” on the link.
 

Feel free to ask questions in the comments at any point in the process.
 

Advanced Fix to Disable noreferrer in Gutenberg & Classic Editor

 

First you must decide if you will add this code to theme files or use a plugin.

 

If you add the code to the theme files, the possible issues are
1. a. If you update your theme, your changes will be overwritten and need to be added again.
 

    b. You decide to change themes, your changes will be “lost” as they need to be added again to the new theme, I do think this is pretty rare for bloggers to change themes, we put in a lot of work to setup the theme as we like and this is a big change to do, but it still happens.
 

Solution: It is best to add any modifications to a child theme, so that when the “parent” theme updates you don’t lose your changes. See this post on setting up a Child Theme the easy way. I only recommend to update theme files if you are going to use a child theme and I stress that throughout this post.
 

Note: if you purchase a child theme, it is possible the developer will send you updates for the child theme, these are much less frequent, but do happen. Before you update your Child Theme, take a backup, and keep notes when you modify any theme files so you will need to know which files you’ve modified (normally header.php, footer.php and functions.php), save a copy of your modified files and reapply your changes after the update.
 

If you keep a folder on your computer where you save a copy of each modified file, it will be easy to track down which files you’ve modified and/or use google docs and update notes on which files you’ve modified and what you’ve added, edited or removed. This will really help if you need to reapply the changes at a later date.
 

Ok, so if you go with the Plugin option, what are the possible benefits and issues?

1. The plugin option will keep the code if you change themes and is fairly easy to use. But, the plugin may stop being updated, break – which may also break your site, cause security or page loading speed issues.
 

Solution: Make sure when you install plugins that they are from a trusted source and try to find lightweight versions so that your site will load quickly for visitors. Use Wordfence Security Premium plugin; which updates your sites protection immediately once a security issue is known. (For example Wordfence Premium users were protected from the recent issue with Social Warfare where the social sharing plugin starting sending visitors to spammy websites from a security hole.)

So no option is perfect.
 

No matter which method you use:
**Make sure to take a backup of your website before you start** Instructions to backup with UpdraftPlus

 

 

Step 1: Add the code to disable the noreferrer

 

Disable Noreferrer via (Child) Theme Files

 

Prefer to use the plugin method? Skip ahead

Do you know which theme you are currently using? If not, go to “Appearance”, then click on “Themes”

Screenshot of Check which theme is active
 

Make note of which theme is active and if it says “child”, if not, I strongly recommend that spend some time now and create the Child theme, this post here gives step-by-step instructions on setting up a Child Theme the easy way.
 

If you are running into road blocks with setting up the child theme or you don’t want to take the time to set it up, skip below to the option to add the code using the Plugin Method. As stated above, I do not recommend to add code to your “Parent” Theme files, as one update to your theme and your hard work is gone and by that time you may forget that the modifications were in place. This frequently happens to bloggers that add the Google Analytics code to their “Parent” theme files, they lose days of analytics till they catch that it happened.
 

Adding code to the (Child) Theme files directly in WordPress

 

You can add the code directly in WordPress if you have access to the theme editor.
 

To check if you have access click on “Appearance”, then you see the option “Theme Editor” usually at the bottom of the menu.

Screenshot of finding the theme editor in WordPress
 

If you have this option, click on Theme editor.
 

When it opens you’ll see something like this, click on Theme Functions on the far right.
Click on Theme Functions
 

Add this code to the bottom of the functions.php file:

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

 

Then update the file.

Screenshot of remove noreferrer code added

 
Skip to STEP 2
 

Adding code to the (Child) Theme files via cPanel

 

**Make sure to take a backup of your website before you start** Instructions to backup with UpdraftPlus

First, you will need to login to your cPanel or FTP site on your host. You may also be able to do this from the WordPress file editor, however, on our sites this is disabled by our security settings.

The instructions contain examples from the Bluehost cPanel.

  1. Login to your Bluehost account
  2. Click Advanced
  3. Select the File Manager
  4. Screenshot of finding the Bluehost cpanel File Manager
  5. Navigate to your wordpress install theme folder
  6. This is the location of the default install folder, yours may be slightly different. "public_html/wp-content/themes/" screenshot of public html Screenshot of the Wordpress Themes Folder
     

    Then Open your theme Folder, if you are using the default theme “twentynineteen” and have setup and activated the “twentynineteen-child” theme, you would open the “twentynineteen-child” folder and look for the file named “functions.php”.
     

    Right-click on functions.php and select to download – to save a copy before you start.

    Then right-click again on functions.php and select to edit.
     

    Add this code to the bottom of the functions.php file.
    This code removes the noreferrer rel attribute for new or edited links that you’ve manually deleted the “noreferrer” from.
     

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

     

    This code found from this WordPress Trac here. and modified as seen above.
     

    The above code replaces this code here. The above is much cleaner and does not use the “preg_match”.
     

    //This code removes noreferrer from your new or updated posts
    add_filter( 'wp_targeted_link_rel', 'my_targeted_link_rel_remove_noreferrer',999);
    function my_targeted_link_rel_remove_noreferrer( $rel_values ) {
    return preg_replace( '/noreferrer\s*/i', '', $rel_values );
    }

     

    Originally found on this site: Blog Fixer, I again modified the code adding the priority of 999, for this code to work on both Gutenberg and Classic Editor.
     
    Skip to STEP 2
     

    Add code to Remove noreferrer using the Plugin Method

     

    If you are having trouble applying the code to your theme files, you could try installing the “My Custom Functions” Plugin and enter the code in the plugin settings page.
     

    Once installed, go to “Settings”, then click on “PHP Inserter”

    Screenshot of Plugin PHP Inserter on menu
     

    Click the “on” button, add the code and click the save button.
     

    This code removes the noreferrer rel attribute for new or edited links that you’ve manually deleted the “noreferrer” from.

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

    Screenshot of Plugin PHP Inserter after code is added
     

    Again, once you apply this code, the new posts should work to remove the noreferrer right away, but for older posts, you’ll need to manually remove the “noreferrer” and update the post.
     

    Step 2: Edit existing links to remove noreferrer

     

    How to find noreferrer in your posts

     

    Now that you’ve updated the code, you will need to search your posts for “noreferrer”, like this:

    Screenshot of searching for noreferrer in posts
     

    Editing your existing links

     

    This may be a daunting task if you have published or updated several posts since the WordPress change that added the noreferrer. If you have lots of links to update do this in chunks, over time.
     

    If you are using the Classic Editor plugin

    Switch your post to the text view, and search for and remove noreferrer in your links.
    hint: press ctrl+f and use your browser find feature to find the “noreferrer” quickly.
     
    Skip to Confirming Your Changes
     
    For Gutenberg there are additional steps.

    Open your post to edit it, and find where you added the links, you will need to switch to the html editor.

    1. Click the block that has the link to make it active
    2. Click the 3 dots
    3. Screenshot clicking the block to make it active
       

    4. Select edit as html
    5. Screenshot of edit as html
       

      Before:

      <p><a href="https://wpbloggerassist.com/" target="_blank" rel="noopener noreferrer">Check out my main site</a></p>

       

      After:

      <p><a href="https://wpbloggerassist.com/" target="_blank" rel="noopener">Check out my main site</a></p>

       

    6. Click the three dots again, switch back to the Visual Editor
    7. Screenshot of edit visually
       

      Confirming your changes on the front-end

       

      Open your website in the browser and right-click on or near a link and choose “inspect” from the right-click menu.
       

      Before your changes you will see something like this:
      Screenshot of inspect before_noreferrer removed
       

      After your changes you see something like this;
      screenshot of inspect after_noreferrer removed
       

      Additional code you can add to remove noreferrer on the Front-End

       

      If you want to remove the noreferrer from old posts right away, you can add the below code in the same way you added the code above, note this is the code that will remove the word noreferrer from anywhere within posts as well as links but ONLY on the Front-End of your site, your links inside the WordPress Editor will still appear to have the rel=”noopener noreferrer”.
       

      If you don’t have too many posts to fix, it is better to just manually edit the post and remove the noreferrer. As this fix may slow down page loading time to a degree.
       

      This code will remove the “noreferrer” from all your links that have a space in front like this: " noreferrer", even if you manually type it in, and anywhere you type this word in your post too, not just on the links, it will be removed only on the Front-End of your website. If there is an instance where you want to keep the noreferrer on a link, just switch the order and type it in. For internal/follow links: "noreferrer noopener" or for external nofollow links: "noreferrer nofollow noopener"
       

      If you would like to remove the automatically added noreferrer follow along here.
       

      Note: The space in front of ("noreferrer" => "") is intentional below.
       

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

       

      Save your changes, and clear your caches.
       

      Visit one of your posts on Google Chrome, right-click on a link, and select to inspect element
       

      Confirm that the link appears with rel=”noopener” for internal/followed links or rel=”nofollow noopener” (order doesn’t matter) for external nofollowed links.

      Screenshot of after noreferrer removed
       

      As always if you need assistance, you can check out my services page and we can arrange to work together on a remote screen-sharing session services page.

      Are you an intermediate to advanced WordPress user with knowlege in css, javascript, html or php? I just started a Facebook group where I hope we can challenge and help each other grow, if you are interested to join, here is the link. Advanced Coding on WordPress

      Got blogging questions? Join my Facebook group here WP Blogger Assist Questions Advanced WordPress user with coding knowledge? Advanced Coding on WordPress

Tara, WP Blogger Assist

I have over 15 years experience in IT. Over this time: managing server infrastructure, building websites and more. This website is dedicated to helping WordPress bloggers with setting up their blogs and websites; optimizing fast page loading, SEO and social media marketing - such as; Pinterest, Facebook and more.

13 thoughts on “Remove Noreferrer in Gutenberg From the Latest WordPress Update

  • March 7, 2019 at 2:45 am
    Permalink

    hi, thanks for share the code, work fine. Is it possible to remove also the rel=”noopener

    Reply
    • March 8, 2019 at 6:50 pm
      Permalink

      Hi Tr3ndygirl,

      It is possible, but I really would not recommend to remove the “noopener”, this is added to for security to protect your site and does not have any unwanted affects like the “noreferrer”. Here is more information on the security added by noopener from google. https://developers.google.com/web/tools/lighthouse/audits/noopener

      To avoid it altogether, you could set your links to just open directly, rather than in a new tab, then the “noopener” is not added automatically by WordPress.

      Thanks for commenting.

      Reply
  • April 9, 2019 at 9:51 am
    Permalink

    Thanks a lot! Works like a charm!

    I can’t believe they have added this without asking if webmasters really want to use it.

    I work my .ss off in all my spare time and create content, providing a great value to my audience with affiliate links that work referrer based. So it all looks clean and neat and suddenly my clicks won’t show up in my affiliate panel anymore. Shame on you WordPress!

    Reply
    • May 5, 2019 at 8:02 am
      Permalink

      Hi Alexander, thanks for creating a plugin for this. I haven’t had a chance to try it yet, but I see one user reviewer shared that your plugin works well with Gutenberg.

      Reply
    • May 14, 2019 at 3:25 am
      Permalink

      I tried the plugin and the downside is that it is somehow not stable.

      When plugin is activated it works….until you edit a post – then it is not active.

      Then you need to deactivate and then activate plugin again.

      Reply
  • July 30, 2019 at 2:54 am
    Permalink

    I put this code in my functions.php file :

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

    It does not work.

    Reply
  • August 15, 2019 at 2:34 am
    Permalink

    Thanks for sharing the code.

    Not working in amp. What to do?

    Reply
  • October 15, 2019 at 7:41 am
    Permalink

    Hi,
    This method works, but in the comments and my sidebar, I still have links with the noreferer code wich I don’t want. I need those also to be refered.

    Is there a code for that also that I can use?

    Reply
    • October 15, 2019 at 10:16 pm
      Permalink

      Hi Jochem,

      I have not been able to replicate that issue. I did check your site and I see that your sidebar and comments are showing noreferrer, but I’m not sure why. It is possible that it is a plugin or a theme setting adding the noreferrer attribute.

      Did you try to edit the links on the sidebar and/or comments to manually remove the noreferrer from Step 2?

      Have you tried the plugin mentioned above by Alexander Kadyrov?
      https://wordpress.org/plugins/remove-noreferrer/

      Reply

Leave a Reply

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