How to Properly Add Nofollow Links in Your WordPress Navigation Menus (4 Easy Methods)

Want to add links to external websites in your WordPress navigation menus without hurting your SEO? You need to add the handy rel="nofollow" attribute to those outbound links.

Navi.

I‘ll walk you through exactly how and why to nofollow navigation menu links in WordPress step-by-step. Whether you‘re using the Classic Editor or the new Block Editor, I‘ve got you covered with detailed instructions and annotated screenshots every step of the way.

But first, let‘s make sure we‘re on the same page about what nofollow links are and when you should use them in your WordPress menus.

What Are Nofollow Links?

Nofollow is a link attribute that tells search engines not to pass any link equity (aka "link juice") from your page to the linked page. It looks like this in the HTML:

<a href="https://example.com" rel="nofollow">anchor text</a>

The rel="nofollow" part instructs search engine bots not to follow the link or pass any PageRank. Essentially, it makes the link invisible for SEO purposes.

Nofollow was introduced by Google way back in 2005 to combat comment spam. Today, SEOs recommend using it on any links you don‘t want to "vouch for" in terms of search rankings, such as:

Links in sponsored/paid content
Links in user-generated content (forums, blog comments, etc.)
Links to registration/login pages
Links to off-topic or lower-quality websites

Using nofollow on certain links helps keep your site‘s "link neighborhood" clean and optimizes your crawl budget. It‘s a trust signal that your outbound links are editorial and chosen with care.

When to Use Nofollow for WordPress Navigation Menu Links

Okay, so nofollow makes sense for sketchy blog comments and paid links. But what about the links in your own WordPress site‘s navigation menu?

In most cases, your nav menu will link to important pages you want search engines to crawl and rank, like your cornerstone content. Nofollowing internal links is usually not necessary or helpful for SEO.

However, there are a few scenarios where adding rel="nofollow" to WordPress menu links is a smart move:

1. External links

If you link to any third-party websites in your nav menu, consider nofollowing them. Unless you fully vouch for the site and want to pass link equity, nofollow is a safer choice. Some common examples:

Social media profile links
Links to external blogs/resources
Affiliate/sponsored links
Links to a parent company site

2. Login/registration pages

Many websites include a link to the login page or "My Account" area in the navigation for easy access. Since these pages have little to no SEO value, nofollowing the links conserves crawl budget.

3. Duplicate links

In rare cases, you may have the same link appear more than once in your navigation, such as in a submenu or the footer. To avoid having multiple followed links to the same URL, you could nofollow one instance.

When in doubt, only use nofollow on WordPress navigation menu links pointing to external websites or non-indexed pages. As Google‘s John Mueller notes, the flow of PageRank internally via your navigation is important:

"I recommend not using nofollow for internal links — let the PageRank flow through your site normally." (Source)

Now, let‘s dive into exactly how to add nofollow to your WordPress menu links. I‘ll cover four methods:

Classic Editor with Appearance > Menus
Classic Editor with a custom nav menu walker
Block Editor (WordPress 5.9+)
Manually in the code

Method 1: Add Nofollow to Menu Links in the Classic Editor

If your WordPress site uses the Classic Editor or a classic theme, follow these steps to nofollow navigation links:

Go to Appearance > Menus in your WordPress dashboard.
Select the menu you want to edit under the Select a menu dropdown.
Locate the link you want to nofollow in the Menu structure panel on the right. Expand the link‘s options by clicking the down arrow.
Click Screen Options in the upper right corner and enable the Link Relationship (XFN) and Link Target checkboxes. This reveals more fields.
In the expanded options for the menu link, enter nofollow in the Link Relationship (XFN) field.
For external links, check the Open link in a new tab box to enable this behavior.
Click the Save Menu button to publish your changes.

Here‘s a visual of steps 3-6:

To double-check that it worked, view the page with the nav menu, right-click the link, and choose Inspect. In the Elements tab, you should see rel="nofollow" in the link‘s <a> tag.

Method 2: Add Nofollow Using a Custom Nav Menu Walker

For more granular control over your WordPress navigation menus and attributes, you can use a custom nav menu walker function. This allows you to add a checkbox toggle for the nofollow attribute.

Here‘s a step-by-step guide:

Open the functions.php file in your active WordPress theme or create a child theme.
Add the following code to the end of functions.php to extend the Walker_Nav_Menu class and add a nofollow checkbox:

class Walker_Nav_Menu_Nofollow extends Walker_Nav_Menu {
  function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    $classes = empty($item->classes) ? array() : (array) $item->classes;

    if (in_array(‘nofollow‘, $classes)) {
      $item->xfn .= ‘ nofollow‘;
    }

    parent::start_el($output, $item, $depth, $args, $id);
  }
}

// Add custom fields to menu item
function custom_nav_menu_item($item_id, $item_object) {
  $nofollow = get_post_meta($item_id, ‘_menu_item_nofollow‘, true);
  ?>
  <p class="field-nofollow description description-wide">
    <label for="edit-menu-item-nofollow-<?php echo $item_id; ?>">
      <input type="checkbox" id="edit-menu-item-nofollow-<?php echo $item_id; ?>" name="menu-item-nofollow[<?php echo $item_id; ?>]" value="nofollow" <?php checked($nofollow, ‘nofollow‘); ?> />
      <?php _e(‘Add nofollow to link‘); ?>
    </label>
  </p>
  <?php
}
add_action(‘wp_nav_menu_item_custom_fields‘, ‘custom_nav_menu_item‘, 10, 2);

// Save custom fields values
function custom_nav_menu_item_save($menu_id, $menu_item_db_id) {
  if (isset($_POST[‘menu-item-nofollow‘][$menu_item_db_id])) {
    $nofollow_value = $_POST[‘menu-item-nofollow‘][$menu_item_db_id];
    update_post_meta($menu_item_db_id, ‘_menu_item_nofollow‘, $nofollow_value);
  } else {
    delete_post_meta($menu_item_db_id, ‘_menu_item_nofollow‘);
  }
}
add_action(‘wp_update_nav_menu_item‘, ‘custom_nav_menu_item_save‘, 10, 2);

In the WordPress dashboard, go to Appearance > Menus and locate the menu link you want to edit.
Expand the Screen options and enable the Nofollow checkbox.
Under the menu item‘s settings, check the new Add nofollow to link option that appears.

Click Save Menu to apply the changes. The nav menu link will now output the rel="nofollow" attribute in the HTML.

While this method requires adding some custom code, it provides an intuitive checkbox option that can be toggled on or off for individual menu links. This is handy if you expect to change a link‘s nofollow status frequently.

Method 3: Add Nofollow in the WordPress Block Editor

For WordPress 5.9+ with block theme support, you can add nofollow to navigation menu links using the Site Editor. Here‘s how:

Go to Appearance > Editor to open the Site Editor.
Click on the navigation block that contains the link you want to nofollow.
Select the individual link block within the nav block.
In the block settings panel on the right, expand the Link settings.
Enter nofollow in the Link rel field.
You can also enable the Open in new tab option here for external links.
Click the Save button in the top right to publish your changes.

Here‘s a visual of what to look for:

View the front end of your site and use the Inspector tool to verify that rel="nofollow" was added to the <a> tag for the selected menu link.

Method 4: Manually Add Nofollow to WordPress Menu Links

Finally, you can directly edit your WordPress theme‘s template files to add the nofollow attribute to specific navigation menu links. This method provides the most control but requires caution as you‘ll be editing code.

To manually nofollow a WordPress menu link:

Open the relevant theme template file that outputs the navigation menu, such as header.php.
Locate the wp_nav_menu() function that controls the menu output.
Within the <a> tag for the link you want to nofollow, add rel="nofollow" before the closing >.

For example, here‘s what adding nofollow to a Home link might look like:

<li><a href="/" rel="nofollow">Home</a></li>

Save the edited template file and re-upload it to your server if needed.

Since this requires directly editing your theme‘s template files, I only recommend it for advanced WordPress users. Remember to use a child theme and always back up your site before making code changes.

Frequently Asked Questions About Nofollow Links in WordPress Menus

Before we wrap up, let me address some common questions I see about nofollow nav menu links in WordPress:

What‘s the difference between nofollow and sponsored/UGC link attributes?

In addition to the nofollow link attribute, Google recognizes two more granular values:

rel="sponsored" for paid/affiliate links
rel="ugc" for user-generated content links

If a link is both nofollow and sponsored/UGC, you can use them together like rel="nofollow sponsored".

For WordPress navigation menu links, rel="nofollow" is sufficient unless the link is a sponsored/affiliate link. In that case, I recommend using rel="sponsored" in addition to nofollow.

Can I use a plugin to nofollow menu links?

Yes, there are several WordPress plugins that add nofollow functionality to the Menus screen, such as:

These can make it easier to add nofollow/sponsored to multiple menu links without code, but be aware of the potential performance impact of installing additional plugins.

Does the position of the nofollow attribute matter?

Not really. According to Google, "the placement of the rel attribute does not matter for the nofollow link attribute." It‘s valid in the <a>, <link>, or <area> elements.

So a nofollow tag can look like any of these:

<a href="https://example.com" rel="nofollow">
<link rel="nofollow" href="https://example.com">
<area href="https://example.com" rel="nofollow">

The important part is that rel="nofollow" is included in the tag somewhere.

Will nofollow links in my nav menu affect the user experience?

No, adding the rel="nofollow" attribute to a link does not affect how it functions for users. The link will still work the same when clicked.

The nofollow designation only changes how search engines treat the link. They will not pass PageRank or anchor text to the linked page.

So feel free to nofollow links wherever needed for SEO without worrying about breaking the user experience.

Key Takeaways & Next Steps

If you‘ve made it this far, you should have a solid understanding of when and how to add nofollow to your WordPress navigation menu links. To recap the main points:

Use rel="nofollow" on WordPress nav menu links to external sites you don‘t vouch for and non-indexed pages like login screens
You can nofollow WordPress menu links via the Menus screen (classic editor), a custom nav menu walker function, the Site Editor (block editor), or directly in the code
Always test to make sure the nofollow tag was added by inspecting the link in your browser‘s dev tools
Consider using rel="sponsored" for affiliate/paid links in addition to nofollow
Focus on internal linking and site structure in your navigation for SEO rather than nofollowing internal menu links

With those key steps in mind, you‘re ready to clean up your WordPress navigation menus and make them more SEO-friendly with strategic use of the nofollow attribute.

Don‘t forget other menu optimization best practices like: