The way links should be created in WordPress has changed radically due to the prominence of mobile site surfing, new security threats, the release of Gutenberg, and failing link related plugins.
Discover how to properly create links in WordPress now, including manual creation, opening in a new tab, and affiliate links.
And see a real test of what happens to your links created with a nofollow plugin when it is deleted.
Read this whole post.
At the end are videos with examples of creating links in Classic Editor, TinyMCE Advanced as Classic Editor, and Gutenberg.
Plus, a video on what happens to your links if you delete the Ultimate NoFollow plugin.
Link Attributes
Before we jump into how to properly create links, let’s review the attributes that can be in them.
Here’s a fully loaded link structure, meaning that it has several of the most common attributes in use.
Attributes Explained
target=”_blank”
This makes the link open in a new tab/window.
nofollow
This is the opposite of dofollow, which all links are by default, and is most commonly used on affiliate links.
The nofollow attribute ensures that no “link juice” or site authority is passed from your site to the linked (receiving) site. In other words, you’re instructing Googlebots not to follow the link to the destination and crawl/index that site’s content. You’re also telling Google not to consider your link to that other site a “vote” nor consider it a backlink from your site to their site.
Links in blog comments are also set to nofollow by default as a way to discourage spammers from dropping links into your comments as a cheap way to get a backlink from your site to theirs. (Unfortunately, it hasn’t discouraged them from trying! And that’s why we need good security to kick bad bots to the curb before they ever hit our sites, and a good comment spam filter and settings for those that do get through.)
noopener
This attribute is a security feature that is coupled with noreferrer when a link is set to open in a new tab.
It prevents the newly opened page from being able to access the original, referring page and take control, or hijack it.
You can use noopener without using noreferrer. But, I don’t recommend it.
Some browsers do not support this attribute, like older versions of Internet Explorer and even the newer Edge version (as of July 2019).
Instead, you need to address opening links in a new tab/window.
Read below for more on this security combo and why I suggest fixing the issue at the root of the problem instead.
noreferrer
This attribute truncates header information from being included in the link click info.
Let me explain that a little bit.
When you click a link, a whole bunch of info can travel along with it to the other site, like:
- The type of device you are using and the OS on it – like PC with Windows 10
- The browser you are using
- The day and time
- Your IP address
- The site you were on when you clicked the link
The receiving site’s analytics picks up this info.
And that’s why you have such rich data in Google Analytics about folks visiting your site too!
When a link includes the noreferrer attribute, any or all of that extra data is excluded.
So, the receiving site may have no idea where the visitor to their site came from, or any other rich data.
That can be a HUGE problem for them to properly track and credit incoming affiliate links.
In your Google Analytics, that traffic falls into the Direct category, as Google can’t tell where the click originated.
Why You Don’t Want to Remove noreferrer
Of course, affiliate marketers want to ensure that their affiliate links get properly credited.
So, they may be tempted to remove the noreferrer attribute.
That’s a big security mistake!!!!!
Opening links in a new tab requires a little JavaScript object called window.opener to execute.
During that process a hacker can actually hijack and/or collect all of that rich header data that is traveling from your site to the receiving site.
To fix this issue, WordPress 4.7.4 began applying the noopener noreferrer attributes to all links set to open in a new tab or window. That includes both internal and external links.
That means you’re missing referrer data even to your own internal links and sometimes not tracking your internal site clicks properly in your Google Analytics either!!
Some folks have claimed that noreferrer is bad for SEO.
That’s a myth. It’s simply not true.
The Fix for noreferrer
It’s simple.
Stop marking links to open in a new tab/window.
If target _blank is not used, then that JavaScript object is not being requested to fire, and WP has no need to add the additional security attributes of noopener and noreferrer to the link.
It’s Better for Mobile Anyway
But, but, but….
Yeah, I can hear you screaming that if you don’t open links in a new tab that you’re sending traffic off your site, never to return.
Let me help you get over that mindset. (I had to make this switch in my thinking too.)
If your main traffic source is mobile, you want to stop using target _blank anyway.
It’s a bad user experience on mobile.
And it’s way more of a hassle for the visitor to find and reopen the tab that has your site in it than just to hit their back button to return to you.
WordPress Flip Flopping on Inclusion of noreferrer
As I mentioned previously, noopener and noreferrer were added by the TinyMCE editor to WordPress 4.7.4.
Keep in mind that TinyMCE is a standalone, open-source product that WordPress integrated into the core. WP does not completely control what TinyMCE does.
Since WP 5.0 was released, with the Gutenberg editor, link creation has not stabilized with regard to noreferrer being included or not.
The Gutenberg editor does not depend on TinyMCE.
However, the Classic Editor plugin does, as does the TinyMCE Advanced plugin, which can replace the Classic Editor plugin.
And there has been a battle of wills between TinyMCE and Gutenberg ever since.
Here is just one thread I found about the nooperner/noreferrer attributes coming and going with WP updates since 5.0 was released.
As that thread says, this is a nightmare.
And it’s just one more reason I suggest you stop the practice of opening links in a new tab, and manually add the nofollow attribute.
That way you’ll be out of the middle of this battle and your links will be stable no matter what.
How to Create Links in WordPress
There are multiple ways to do this via plugins, or manually, and many of them work differently between the Classic Editor and Gutenberg.
Examples of all of them will be covered here.
Plus, I’ll show you easy ways to add the nofollow attribute in each too.
NOTE: The videos below show what is added to links in WordPress as of July 2019. See the note above about WP flip flopping on the inclusion of noreferrer for links that open in a new tab.
Create Links Using the Classic Editor Plugin
Create Links Using TinyMCE Advanced Plugin Set for Classic Editor
NOTE: The following video was made with these settings active in the TinyMCE Advanced plugin.
See this post for more on how to use TinyMCE Advanced instead of the Classic Editor plugin.
Create Links in Gutenberg
My Gutenberg Ninja course is WAY beyond an introduction.
It has real-world tutorials for what you need to do most. And all the new things you can do will blow you away!
NoFollow Plugins
While they give you an easy interface to use, they are not recommended as too many such plugins have failed to be properly maintained and/or get removed from the WP plugin repository.
One such example is the popular Ultimate NoFollow plugin.
It was removed from the repo on July 5, 2019 and may or may not return.
I tested this plugin and have found zero evidence that deleting Ultimate NoFollow removes the nofollow links you created with it previously.
The nofollow and noopener remain. However, the noreferrer is added, which can be undesirable for affiliate links.
Here’s my proof.
I can’t speak to what happens when you delete other such plugins as I have not tested them.
Contact me if you are using another such plugin and we’ll test what happens without risk to your links.
Spread the Word
Share this post with your blogger buddies to help dispel all the outdated info, rumor, and conjecture about how to create links these days.
I love it MaAnna. Doing the links in gute are easy. And looking at the code side is much clearer to comprehend. Thanks for the hard work.
You’re welcome, Marilyn. Most folks don’t care for looking at code. But this is simple enough to do.
I’m absolutely against using Schlechtenberg (as I call Gutenberg), so I’m using the ‘Disable Gutenberg’ plugin, which supposedly is better than the ‘Classic Editor’ as it prevents some Gutenberg related code from loading in the first place.
[Blocks? I started to hate them with MailChimp! To a point that I gave up writing newsletters and passed this task over to my wife. I also don’t use WYSIWYG editors for anything.]
Anyhow, I’m using the ‘Title and Nofollow For Links’ plugin [ https://wordpress.org/plugins/title-and-nofollow-for-links/ ], which had its last update 7 months ago. It’s lightweight and works for me. Reportedly it has some problems with Schlechtenberg, but since I’m not using that editor…
Gutenberg has changed a LOT in the last 7 months since rolling into the core.
It’s a lot better than it used to be.
But, if you don’t like WYSIWYG editors at all, then you don’t!! I’m an old coder and was a late adopter to WP because of it. So, I understand.
Thanks for the plugin suggestion. But I think it’s clear that all such plugins are going to either adopt the Gute code in the core, even for those who use classic editor type plugins, or fall by the wayside.
I would not trust a plugin forever for this. Gute code will win in the end.
If Schlechtenberg wins WordPress loses me! I’ll look for a different platform or make (again) my own pages…
Since Gutenberg code rolling into the core is already goofing with parts of Classic Editor, and since support for Classic Editor will end in 2021, why wait? Why not go ahead and move over to the fork of WP that vows to never have Gute code in it? It’s called ClassicPress.
Thanks so much for this information MaAnna! So I’m wondering if we need to go back into all of our existing posts and change each and every link so that they do not open in a new window?
I have no plans to update my old links to not open in a new window. However, you likely would want to update top posts with affiliate links to just have the nofollow attribute alone.
As I said about a month ago I’ve been using Gutenberg as my default editor since version 3.2 and I’m not happy there isn’t a way via which one can set up this attributes except “target_blank”Not going back to the legacy editor.
But the info is pretty useful.
Thank You!
It does seem like there are many basic things missing. And I do hope they focus more on those than creating shiny new stuff for Gute.