Adding Nofollow Made Hard by WP5

It used to be, in the not-too-distant past, that messing with your affiliate links in WordPress was a fairly straightforward thing to do. To be fair, it’s currently not all that difficult right now in 2019 either. It’s just that Gutenberg (aka WordPress 5.0+) makes it seem hard.

In case you haven’t added a link in this new block system yet, let me cover that briefly first.

Let’s say you’ve added some text that you want to link to Wikipedia. I’m going to make the word “Wikipedia” at the end of the previous sentence into an actual link. By the time you read this, you’ll already know that. Self-references can be weird.

So, I highlight the text like this….

Highlighting text for linking
Highlighting text for linking

Notice the popup “menu” that appears at the upper left of that block. The last icon on the right is supposed to be some links in a chain. You click that icon to open another box in which you will paste the URL of the page you want to link to. Like this….

WordPress link box
WP shows a link box

WordPress even nicely prompts you as to the purpose of the box by saying, “Paste URL or type to search”. If you start typing in the box, WP will search the other pages of your site in hopes of finding something relevant that you want to link to. We don’t want that in this case. We’re going to link to an external page.

The next thing to do is to actually go to Wikipedia in another tab or browser and grab the URL. After copying it and pasting it into the box, it looks like this….

Link pasted into URL box
Link pasted into URL box

So far, so good. Don’t leave that box without clicking the down-and-left arrow though. (That’s the symbol for “Return” or “Enter”, so hitting that key on your keyboard will do the same thing.) This action actually adds the URL and creates the link. The box now looks like this….

Link created
Link created

Note that the link icon is now highlighted and has changed slightly into a “break link” symbol. Clicking this icon would remove or break the link you just made. (Don’t do that, unless you made a mistake.)

The link box itself is now telling you the site to which you linked and is showing that clicking the link will take you away from the current site. If you need to change the link, you can edit it by clicking the pencil icon.

Unfortunately, WP doesn’t let us make a more complicated change just by clicking that edit pencil. Mainly Amazon affiliate marketers need to do what I’ll describe next: Add rel=”nofollow” to a link.

To add that text to a link tag, we need to see the HTML of the link. To get at the HTML, you can click anywhere in the same block as your link, so you can see the upper left menu again. Then click the 3 vertical dots, to bring up yet another menu, like this….

3-dot menu
3-dot menu

Other than “Remove Block”, I think the only menu item here that I’ve used to date is “Edit as HTML”. That’s the item to click now. When I did that up above, I got a mess that looks like this….

Editing the HTML
Editing the HTML

Actually, this looks much cleaner than an Amazon affiliate link, which has all sorts of other words and characters required by Amazon. You can see “Wikipedia” in the middle of the second line. It is surrounded by “anchor” tags. The “a” stands for “anchor”. You can also see “href” which is short for “hyperlink reference”. All of this together is the link we just created.

If this were an Amazon affiliate link that required the rel=”nofollow” attribute (as it’s called) to be added, I could type that text anywhere inside the opening anchor tag, like this….

Adding an attribute
Adding an attribute

I usually add such attributes at the end of the tag. That way I know where to look for it later…just in case. (This hardly ever happens though.)

Then I can just click the 3 dots again and return to editing visually. The popup menu changed like this….

Edit Visually
Edit Visually

That’s it. As I said, it really isn’t all that tough, it just feels that way, especially the first time or two you need to do it.

Summary
Adding Nofollow Made Hard by Gutenberg
Article Name
Adding Nofollow Made Hard by Gutenberg
Description
One of the many things you need to get used to with Gutenberg (aka WordPress 5.0) is how to make changes when you need to dig into the underlying HTML itself. This article explains how to get there and back.
Author
Publisher Name
The WP Inn
Publisher Logo

Leave a Comment

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