{"id":13555,"date":"2020-10-03T15:00:05","date_gmt":"2020-10-03T13:00:05","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=13555"},"modified":"2021-01-24T23:58:27","modified_gmt":"2021-01-24T22:58:27","slug":"wordpress-noopener-noreferrer","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-noopener-noreferrer\/","title":{"rendered":"What are rel=&#8221;noopener&#8221; and rel=&#8221;noreferrer&#8221; in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Website security is and has always been one of the top concerns of every WordPress website owner. As the number of external links any site can have has grown, it became important to have a layer of security that will make using them safe. To have a tool that ensures the security of your website from malicious attacks by hackers that want to exploit those links. WordPress version 4.7.4 that came out in 2017 introduced a helpful feature\u2014the rel=\u201dnoopener\u201d and rel=\u201dnoreferrer\u201d HTML attributes.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This feature raised a lot of controversies and was subject to misconception when it was introduced. To avoid that, every website owner needs to understand the purpose and effects of the rel=&#8221;noopener&#8221; and rel=\u201dnoreferrer\u201dattributes in WordPress. Therefore, we have dedicated this article to providing answers to different questions our readers may have:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-rel-noopener\">What is rel=\u201dnoopener\u201d<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#does-rel-noopener-affect-your-seo\">Does rel=\u201dnoopener\u201d affect your SEO?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-rel-noreferrer\">What is rel=\u201dnoreferrer\u201d<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#does-rel-noreferrer-affect-your-affiliate-links\">Does rel=\u201dnoreferrer\u201d affect your affiliate links?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-remove-rel-noreferrer-attributes\">Bonus section &#8211; How to remove rel=\u201dnoreferrer\u201d attributes<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-rel-noopener\"><\/a>What is rel=\u201dnoopener\u201d<\/h2>\n<p>[\/vc_column_text][vc_column_text]Whenever you add a link to your website\u2019s content, you can choose if you want to open it in the same or a new tab. With external links, the usual choice is to have the links open in a separate tab, as you don\u2019t want visitors to leave your website. And when you arrange links to open in a new tab, they will have an HTML target attribute that is set to \u201c_blank\u201d. Those links will also, by default, have two additional values added to the rel HTML attribute \u2013 <strong>noopener<\/strong> and <strong>noreferrer<\/strong>. In this section, we are going to take a closer look at the rel=\u201dnoopener\u201d attribute.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In general, the links that you set to open in a new tab will have the following HTML structure:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;a href=\"link-url-goes-here\" target=\"_blank\" rel=\"noopener noreferrer\"&gt;link text goes here&lt;\/a&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Please note that this is an example and a real link will have the URL and link text properly filled out.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And it would look a bit like this:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Noopener-Noreferrer-Code.jpg\" class=\"attachment-full size-full\" alt=\"Noopener Noreferrer Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Noopener-Noreferrer-Code.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Noopener-Noreferrer-Code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Noopener-Noreferrer-Code-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Adding the rel attribute to the &lt;a&gt; tag serves to specify the relationship between your website and the target web page or document.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The purpose of the noopener value is to prevent external malicious websites from accessing the website where the link is located. This is designed specifically to combat malicious phishing attacks called <strong>reversed tabnabbing<\/strong>. It is a type of a hacking attack best described in the following manner: the link target page, often called a child page, can contain malicious code. That code can be employed to send users to a copy of the page where the link originated. So, instead of the original, parent page users are reassigned using window.opener.location.assign() to a fake parent page. Then the fake parent page can be used to acquire sensitive user information or spread malware.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"does-rel-noopener-affect-your-seo\"><\/a>Does rel=\u201dnoopener\u201d affect your SEO?<\/h3>\n<p>[\/vc_column_text][vc_column_text]Both rel attribute values are quite beneficial as they serve to improve website security. However, there is concern among website owners that these values could negatively impact their site\u2019s SEO rankings. This is a common misconception that we will address now.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The mistaken belief is mostly due to people confusing the rel=\u201dnoopener\u201d and rel=\u201dnofollow\u201d attributes. Only the rel=\u201dnoopener\u201d attribute relates to website security. It tells the browsers to stop using the window.opener Javascript property. This does not affect SEO in any way as search engines don\u2019t consider it relevant when ranking a website. On the other hand, the rel=\u201dnofollow\u201d is very relevant to a website\u2019s SERP ranking. The rel=\u201dnofollow\u201d attribute tells search engines not to follow the link, which means your site won\u2019t pass any link authority to the link target.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-rel-noreferrer\"><\/a>What is rel=\u201dnoreferrer\u201d<\/h2>\n<p>[\/vc_column_text][vc_column_text]The rel=\u201cnoreferrer\u201d attribute serves a similar purpose to rel=\u201dnoopener\u201d. It prevents the browser from collecting information about the parent page (also known as a link referrer) and passing it onto a child page. Essentially, it hides information about the referrer when a link is clicked. While this has no effect on your SEO, it can affect your analytics. Since rel=\u201dnoreferrer\u201d hides the link referrer information, analytics tools can\u2019t determine where a user came from. That means you won\u2019t know the source of your incoming traffic.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Both the rel=\u201dnoreferrer\u201d and the rel=\u201dnoopener\u201d serve to improve your site\u2019s security. In fact, noreferrer value was added to WordPress as a fallback because the noopener value <a href=\"https:\/\/caniuse.com\/#feat=rel-noopener\" target=\"_blank\" rel=\"noopener noreferrer\">wasn\u2019t always supported across all browsers<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Just like with the rel=\u201dnoopener, users can sometimes confuse the rel=\u201cnoreferrer\u201d and rel=\u201dnofollow\u201d attributes. However, there is a significant difference. Links with the rel=\u201dnoreferrer\u201d attribute don\u2019t pass referrer information while passing the link juice, which is exactly the opposite of what rel=\u201dnofollow\u201d links do.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"does-rel-noreferrer-affect-your-affiliate-links\"><\/a>Does rel=\u201dnoreferrer\u201d affect your affiliate links?<\/h3>\n<p>[\/vc_column_text][vc_column_text]Another common concern WordPress website owners have is whether rel=\u201dnoreferrer\u201d affects their affiliate links. Despite not passing referrer information to the child page, the rel=\u201dnoreferrer\u201d attribute doesn\u2019t affect affiliate links. This is because most affiliate programs include referral URLs containing unique IDs. That affiliate ID, contained in the given URL, is used for tracking and ensures you will get your well-earned commission.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, most affiliate marketers often use cloaking plugins to hide the URLs. This can be because they don\u2019t want to disclose such information publicly. Or they prefer to hide the long query-like permalinks (that look like <em>affiliate-website-url\/products\/?product_id=x&amp;affiliate=y<\/em>, with x and y being numbers).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Cloaking plugins will obscure the query parameters that would otherwise be visible in the URL. However, their effect is cosmetic and it doesn\u2019t stop users from being redirected to the appropriate affiliated website, or you from getting your commission.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"how-to-remove-rel-noreferrer-attributes\"><\/a>How to remove rel=\u201dnoreferrer\u201d attributes from your WordPress website<\/h3>\n<p>[\/vc_column_text][vc_column_text]Links with the rel=\u201dnoreferrer\u201d might not affect your SEO or affiliate links, but they do play a role in analytics. You might be running several interconnected sites, or own a site with several subdomains, and you want to create links between them. In that case, it might benefit you to know which page and link appealed to the users and inspired them to engage further. Alternatively, you might other website owners to know you\u2019re linking to them so they would consider linking back to you.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Whatever your reason may be, if you decide to remove the rel=\u201dnoreferrer\u201d attribute from your site, you need to use custom code. That is because <strong>this attribute is currently integrated in WordPress by default<\/strong>. We will carefully explain the process for removing the rel=\u201dnoreferrer\u201d attribute and then you can decide whether you want to implement it or not.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As a requirement for this process, you will need to disable the Gutenberg editor. One way you can do this is by <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing a plugin<\/a> called <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Classic Editor<\/a>. Then, to remove the noreferrer value, you will need to add some code, <strong>either in the functions.php file of your theme or inside your site-specific plugin<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will show you the steps using a <a href=\"https:\/\/docs.google.com\/document\/d\/1joS5MXiX9iZBnZ-CFNTlOc6aUzNSEOFS\/edit#heading=h.vkluh43o1x00\" target=\"_blank\" rel=\"noopener noreferrer\">site-specific plugin<\/a>. Make sure you brush up on your <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">knowledge of FTP<\/a>, as you will need it in further steps. Also, we strongly suggest <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-manually-backup-wordpress-website\/\">making a backup of your website<\/a> before proceeding, just in case.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, <strong>connect to the server<\/strong> using your FTP credentials and <strong>navigate to your root WordPress directory<\/strong>, often called public_html.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Public-HTML.jpg\" class=\"attachment-full size-full\" alt=\"FTP Public HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Public-HTML.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Public-HTML-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Public-HTML-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>navigate to the wp-content\/themes directory<\/strong> and<strong> click on your theme\u2019s directory<\/strong> to open it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-WP-Content.jpg\" class=\"attachment-full size-full\" alt=\"FTP WP Content\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-WP-Content.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-WP-Content-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-WP-Content-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Find the functions.php file<\/strong> within your theme\u2019s directory, <strong>right-click on it<\/strong>, and <strong>select the View\/Edit option<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"500\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Functions.jpg\" class=\"attachment-full size-full\" alt=\"FTP Functions\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Functions.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Functions-300x214.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Functions-620x443.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Open the file using your preferred text editor and insert the following code<\/strong> at the end of the file.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">\/\/This code removes the noreferrer value from the rel attribute of your new or updated links\r\nfunction removing_noreferrer_link_rel( $rel_values ) {\r\nreturn 'noopener';\r\n}\r\nadd_filter( 'wp_targeted_link_rel', 'removing_noreferrer_link_rel', 999 );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Code.jpg\" class=\"attachment-full size-full\" alt=\"FTP Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Code.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/FTP-Code-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Afterward, <strong>save the changes<\/strong> you made and <strong>upload the file back to the server<\/strong>, which will override the old file.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You might have noticed we added a comment before the code. This is good practice and can help you keep track of the code you add and what it does. In this case, the code removes the noreferrer value from new or updated links, meaning they will be the only ones affected by this change.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can also remove the noreferrer value from existing links if you need to. That can be done manually, using the Classic Editor, or automatically, using a database-alteration plugin like <a href=\"https:\/\/wordpress.org\/plugins\/better-search-replace\/\" target=\"_blank\" rel=\"noopener noreferrer\">Better Search Replace<\/a>. Since using a plugin is far quicker and easier than doing it manually, we suggest opting to <a href=\"https:\/\/qodeinteractive.com\/magazine\/search-and-replace-wordpress\/\">perform a search-replace on your WordPress website<\/a>. With it, you can simply insert noreferrer in the Search for string field and keep the Replace field empty.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Since its inception WordPress has always improved and tried to address any security concerns that could arise. This led to the introduction of the rel=\u201dnoopener\u201d and rel=\u201dnoreferrer\u201d attributes for links that open in a new window.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]These attributes contribute to the overall safety of your site, which helps both you and your users. Using rel=\u201dnoopener\u201d and rel=\u201dnoreferrer\u201d in WordPress won\u2019t affect your SERP ranking or your user\u2019s experience of your site, it will simply make the browsing experience a safe and fun one for all. So, if you had any misconceptions about these attributes, hopefully, this article managed to clear them up.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>The noopener noreferrer are HTML link attributes that contribute to your site&#8217;s security. So, why all the hubbub around them? Come find out!<\/p>\n","protected":false},"author":11229,"featured_media":13577,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[34,4,13],"class_list":["post-13555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-security","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/13555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=13555"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/13555\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/13577"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=13555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=13555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=13555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}