Added nofollow option for links #16609

abotteram · 2019-07-16T09:20:30Z

Description

Adds a "nofollow" option for links allowing the author to discourage search engines from following links.

This is an alternative for #13190 which was overly complicated. Also because of #13190 (comment).

How has this been tested?

Add a link in any block that allows it.
Enable the No Follow option. Save the post and see that a rel="nofollow" is added.
Enable the Open in New Tab option. Save the post and see that the links now has the rel="noopener norefferer nofollow" attribute, aside from the aria-label and target attributes that are also added by the Open in New Tab option.
Disable the No Follow option. See that the nofollow has been removed from the rel attribute.

Screenshots

Types of changes

New feature

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

Fixes #13542

Soean · 2019-07-16T09:29:35Z

Fixes #13542

ellatrix · 2019-07-24T11:18:02Z

packages/format-library/src/link/inline.js

+			if ( typeof rel === 'string' ) {
+				const noFollow = rel.split( ' ' ).includes( 'nofollow' );
+				if ( noFollow !== state.noFollow ) {
+					return { noFollow };


What if opensInNewWindow !== state.opensInNewWindow? Then noFollow won't be derived?

ellatrix · 2019-07-24T11:21:19Z

packages/format-library/src/link/inline.js

+		}
+	}
+
+	setNoFollow( noFollow ) {


Looks much the same as the code above. Could similar logic be merged?

ellatrix · 2019-07-24T11:26:15Z

packages/e2e-tests/specs/__snapshots__/links.test.js.snap

+
+exports[`Links should contain a nofollow rel attribute when the option is selected 1`] = `
+"<!-- wp:paragraph -->
+<p>This is <a href=\\"http://w.org\\">WordPress</a></p>


I don't see the attribute here.

jphorn · 2019-08-21T14:02:54Z

Why is noreferrer added automatically? This hurts affiliate marketing since all outbound nofollow clicks are non-trackable anymore. Could you please make it optional at least?

paaljoachim · 2019-09-04T12:06:32Z

What is needed to move this PR onward?
@xyfi

mapk · 2019-09-04T14:18:48Z

I’m hesitant on this one. I think it’s been a long-standing discussion and there are reasons behind not including this option in the Classic Editor.

How does it adhere to the WordPress 80/20 rule? We’re looking to implement this as an option (not a decision)… so will 80% of WP users benefit from it?

PhotoWorkout · 2019-09-04T18:57:54Z

@mapk I don't know the "reasons behind not including this option in the Classic Editor", but installing a nofollow plugins like this one: https://wordpress.org/plugins/rel-nofollow-checkbox/ made it easy to add a no follow checkbox in the classic editor.
Now, with Gutenberg, you can only add a nofollow by switching to the HTML version and manually add the nofollow attribute. It's a big pain. I don't know how to best implement it (I am not a programer), but this is an important feature the Gutenberg editor should have.

@jphorn I don't see a problem with the norefferer being there automatically, it does not hurt in terms of tracking affiliate referrals (norefferer does not equal non-trackable).

paaljoachim · 2019-09-06T12:40:09Z

As there is hesitation in adding this into Gutenberg Core then there needs to be a simple way for plugins to extend the link dialog box. (I have no idea if a plugin developer can extend the link dialog box in Gutenberg at present time.) If this is it not available today then someone needs to create an issue and someone needs to work on the PR to get it in.

phpbits · 2019-09-16T05:59:08Z

@paaljoachim I've just gone ahead and added this option to EditorsKit plugin( https://wordpress.org/plugins/block-options/ ). I've added the new "sponsored" rel attribute value as well. Thanks for letting me know about this one 👍

desaiuditd · 2019-09-16T06:58:19Z

there needs to be a simple way for plugins to extend the link dialog box.

💯 Agree on this.

What @phpbits has done, probably works. But seems like he has un-registered the existing core/link format, taken the current version of Link dialog component into his own codebase and added some customization on top of it to add new features.

I would like to avoid that approach because that will raise the tech debt on the plugin developer's end and they would have to maintain their copy of link format.

If the link dialog box can provide certain hooks/filters, then plugin developers can use them to extend the existing link format. So that they don't have to maintain their copy of link format in their codebase. Figuratively, There's no point of maintaining two wheels to run a cycle in the same direction.

phpbits · 2019-09-16T07:36:58Z

What @phpbits has done, probably works. But seems like he has un-registered the existing core/link format, taken the current version of Link dialog component into his own codebase and added some customization on top of it to add new features.

@desaiuditd I've actually found a simpler approach but chose to this in order to support the core editor version. I hope they'll add much easier filter though.

deckerweb · 2019-09-16T09:36:21Z

@mapk I cannot understand if this feature will not be included in Core of Block Editor. And I believe hosts of other users would also not understand.

It is a different situation than with Classic Editor: the HTML switch in Classic was usable.
In Gutenberg it is better not to use it at all - in my opinion. And I would never recommend this to any content editor: they should only ever use the regular visual editor of Gutenberg - which makes total sense.

But if those content editors never have a chance of adding/removing/tweakin the rel attribute for nofollow or other attributes then this would be really, really bad.

The promise of Gutenberg is to make things more easy and more simple after all - at least how I understand it, and I assume millions of other users also.

I can only encourage you, leave some of the old ballast of Classic-Editor-Discussions from 10 years ago behind. If it makes sense for a lot of users to be able to tweak the nofollow attribute they should be able to do it - easily.

And if you decide to not include this option/feature - then please make it easy for plugin devs to extend this area of Gutenberg. So that we can at least get simple awesome plugins and NO hacky solutions.

Thanks a lot in advance for listening to your user and developer base!

carlenzoliyuri · 2019-09-21T08:27:22Z

Nofollow, for Google and W3 is a rel to identify paid links. Stop.

Not all WordPress user sell links, normally link to other websites, why dont send autority to links?

Not good/non sense implementation.

PhotoWorkout · 2019-09-21T15:45:52Z

Any serious webmaster (and content writer) should have the ability to manage outgoing links fast. Unless you are a hobby blogger, you will come across links which need special attribution.
You should add rel="nofollow" (in addition to the new attribute rel="sponsored") if you have any sort of ad banner, sponsored link, affiliate link, advertorials, in some cases I would even consider guest blog contributions with certain links in them. If you don't assign the right link attribute and and pass on page rank, you may run into troubles.
For those who just want to link out without caring about link attribution options (e.g. because they run no ads, have no sort of affiliations, etc.), there could be an overall on/off switch in the Wordpress general settings page: e.g. click here to disable outgoing link attribution options.

carlenzoliyuri · 2019-09-21T16:36:06Z

@PhotoWorkout, yes, but, if now exist rel="sponsored" why add rel="nofollow"?

If i don't trust website i won't link.

But, the main "problem" is: WordPress is used by 24,808,989 websites, not all is "serious" webmasters, why add a not long term function (nofollow) only for few people? Use a plugin.

Bye,
Yuri.

PhotoWorkout · 2019-09-21T17:42:21Z

The rel=“sponsored” is currently only used by Google. Other search engines like Bing don’t (they probably will in future). So for now the right way would be to add both (rel=“sponsored nofollow”).

I believe Wordpress.org should make rel link attribute selection a core part of Gutenberg editor. You wouldn’t even see those link rel options if you don’t expand your link options, adding two on/off toggles in addition to the “Open in a new window” toggle is not going to harm the user experience.

carlenzoliyuri · 2019-09-21T18:02:03Z

You wouldn’t even see those link rel options if you don’t expand your link options, adding two on/off > toggles in addition to the “Open in a new window” toggle is not going to harm the user experience.

Agree with this (if is accesible), but IMHO is useless, advanced webmaster/i if want add nofollow and other code add in code editor with Gutenberg.

PhotoWorkout · 2019-09-22T15:33:26Z

@phpbits your EditorKit plugin works just fine. This seems to be the best solution (at least for now) Thanks!

karmatosed · 2019-09-24T16:23:33Z

Someone adding a link wants to do just that, by adding more and more options we put extra hurdles in their way to add that link. Having to explain those hurdles adds more and more weight. For me, this comes down to being something that would be ok to have extendable by developers but not visible in the default interface.

mapk · 2019-09-24T16:47:49Z

With #17556 in play now, let's work to make it easier for plugin devs to extend the link options similarly to how @phpbits explained it.

I'm going to close this for now and encourage implementation of #17556.

tripledm · 2019-12-14T11:30:09Z

So much effort went in to provide a logical and workable solution yet Wordpress core team ignoring the blatantly obvious need for this. All websites from blogs to publishers of all sizes needs this. Please get this implemented we NEED IT!

kaispriestersbach · 2020-04-05T10:41:00Z

WTF?! Could someone just make a plugin out of this?

phpbits · 2020-04-05T11:19:20Z

WTF?! Could someone just make a plugin out of this?

There is, you can use EditorsKit plugin.

tripledm · 2020-06-02T12:07:38Z

The EditorsKit plugin does not work for me as afer install on a few sites you cannot edit posts it crashes.
This is a MUST HAVE feature, literally. It should be included in core by default same as open in new window as it is more than commony used attributes that editorial staff need to add in every day countless times and they keep stuffing it up by having to edit in HTML.

arnaudbroes · 2020-06-06T17:07:03Z

The EditorsKit plugin does not work for me as afer install on a few sites you cannot edit posts it crashes.

AIOSEO also has it now.

devisan · 2020-07-07T16:24:08Z

WTF?! Could someone just make a plugin out of this?

There is, you can use EditorsKit plugin.

I initially didn't want to use your plugin because it wasn't adding the rel tags into the actual HTML code. That meant if the plugin ever broke, the links would be dofollow until it was fixed. But I've just tried it again recently. I made a link with nofollow, deleted your plugin completely, and nofollow remained in the HTML. Can you confirm that's what it's doing now, @phpbits ? Because that's what I had with Ultimate Nofollow in classic editor that seemed to be impossible in Gutenberg.

Either way, your plugin has come a long way and is now making Gutenberg tolerable for me. I'm never going to like a block editor for my purposes, but EditorsKit fixes a lot of what was adding so much time to my workflow (not just the nofollow links).

tripledm · 2020-07-07T18:11:24Z

WTF?! Could someone just make a plugin out of this?

There is, you can use EditorsKit plugin.

I initially didn't want to use your plugin because it wasn't adding the rel tags into the actual HTML code. That meant if the plugin ever broke, the links would be dofollow until it was fixed. But I've just tried it again recently. I made a link with nofollow, deleted your plugin completely, and nofollow remained in the HTML. Can you confirm that's what it's doing now, @phpbits ? Because that's what I had with Ultimate Nofollow in classic editor that seemed to be impossible in Gutenberg.

Either way, your plugin has come a long way and is now making Gutenberg tolerable for me. I'm never going to like a block editor for my purposes, but EditorsKit fixes a lot of what was adding so much time to my workflow (not just the nofollow links).

It is now built in and part of Yoast SEO so you can mark it sponsored and nofollow and it's in the editor so a permanent change in the actual html

devisan · 2020-07-07T20:42:47Z

Then it must be possible to do that now. Good to know. I don't use Yoast, but good for those who do.

Added nofollow option for links

cd9a36a

abotteram requested review from aduth, daniloercoli, ellatrix, etoledom, jorgefilipecosta, SergioEstevao and youknowriad as code owners July 16, 2019 09:20

abotteram added the [Package] Format library /packages/format-library label Jul 16, 2019

abotteram requested review from ajitbohra, gziolo, nerrad, ntwb and talldan as code owners July 16, 2019 10:44

Fixed e2e-tests

fced87c

abotteram force-pushed the add/link-no-follow branch from b833de2 to fced87c Compare July 16, 2019 10:46

Added e2e for No Follow option

a3d589f

ellatrix reviewed Jul 24, 2019

View reviewed changes

ellatrix added the [Status] In Progress Tracking issues with work in progress label Jul 24, 2019

paaljoachim mentioned this pull request Aug 25, 2019

adds nofollow and blank target #16640

Closed

4 tasks

phpbits mentioned this pull request Sep 24, 2019

Add easy way to modify links and add toggle options. #17556

Open

mapk closed this Sep 24, 2019

jorgefilipecosta mentioned this pull request Nov 13, 2019

Link images in media + text #18139

Merged

5 tasks

phpbits mentioned this pull request Feb 12, 2020

Add Link Option to Cover Block #19776

Closed

youknowriad deleted the add/link-no-follow branch May 27, 2020 17:47

kaispriestersbach mentioned this pull request Jun 7, 2020

Add nofollow/sponsored/ugc option for links Yoast/wordpress-seo#15375

Closed

jdevalk mentioned this pull request Jun 15, 2020

Link Control: Add more controls. #23011

Open

sybrew mentioned this pull request Nov 20, 2020

Support for rel nofollow/ugc/sponsored link attributes in Gutenberg sybrew/the-seo-framework#568

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added nofollow option for links #16609

Added nofollow option for links #16609

abotteram commented Jul 16, 2019 •

edited

Loading

Soean commented Jul 16, 2019

ellatrix Jul 24, 2019

ellatrix Jul 24, 2019

ellatrix Jul 24, 2019

jphorn commented Aug 21, 2019 •

edited

Loading

paaljoachim commented Sep 4, 2019 •

edited

Loading

mapk commented Sep 4, 2019

PhotoWorkout commented Sep 4, 2019

paaljoachim commented Sep 6, 2019

phpbits commented Sep 16, 2019

desaiuditd commented Sep 16, 2019 •

edited

Loading

phpbits commented Sep 16, 2019

deckerweb commented Sep 16, 2019 •

edited

Loading

carlenzoliyuri commented Sep 21, 2019

PhotoWorkout commented Sep 21, 2019

carlenzoliyuri commented Sep 21, 2019

PhotoWorkout commented Sep 21, 2019

carlenzoliyuri commented Sep 21, 2019

PhotoWorkout commented Sep 22, 2019

karmatosed commented Sep 24, 2019

mapk commented Sep 24, 2019

tripledm commented Dec 14, 2019

kaispriestersbach commented Apr 5, 2020

phpbits commented Apr 5, 2020

tripledm commented Jun 2, 2020

arnaudbroes commented Jun 6, 2020

devisan commented Jul 7, 2020

tripledm commented Jul 7, 2020

devisan commented Jul 7, 2020

Added nofollow option for links #16609

Added nofollow option for links #16609

Conversation

abotteram commented Jul 16, 2019 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

Soean commented Jul 16, 2019

ellatrix Jul 24, 2019

Choose a reason for hiding this comment

ellatrix Jul 24, 2019

Choose a reason for hiding this comment

ellatrix Jul 24, 2019

Choose a reason for hiding this comment

jphorn commented Aug 21, 2019 • edited Loading

paaljoachim commented Sep 4, 2019 • edited Loading

mapk commented Sep 4, 2019

PhotoWorkout commented Sep 4, 2019

paaljoachim commented Sep 6, 2019

phpbits commented Sep 16, 2019

desaiuditd commented Sep 16, 2019 • edited Loading

phpbits commented Sep 16, 2019

deckerweb commented Sep 16, 2019 • edited Loading

carlenzoliyuri commented Sep 21, 2019

PhotoWorkout commented Sep 21, 2019

carlenzoliyuri commented Sep 21, 2019

PhotoWorkout commented Sep 21, 2019

carlenzoliyuri commented Sep 21, 2019

PhotoWorkout commented Sep 22, 2019

karmatosed commented Sep 24, 2019

mapk commented Sep 24, 2019

tripledm commented Dec 14, 2019

kaispriestersbach commented Apr 5, 2020

phpbits commented Apr 5, 2020

tripledm commented Jun 2, 2020

arnaudbroes commented Jun 6, 2020

devisan commented Jul 7, 2020

tripledm commented Jul 7, 2020

devisan commented Jul 7, 2020

abotteram commented Jul 16, 2019 •

edited

Loading

jphorn commented Aug 21, 2019 •

edited

Loading

paaljoachim commented Sep 4, 2019 •

edited

Loading

desaiuditd commented Sep 16, 2019 •

edited

Loading

deckerweb commented Sep 16, 2019 •

edited

Loading