Tag - Links

How to Open External Links in a New Window or Tab with WordPress


Do you want to open external links from your blog posts in a new window?

Opening external links in a new window allows your users to visit the link without leaving your website.

Many beginners struggle with finding the option to open a link in a window mainly because it is not instantly visible when you are adding a link in WordPress.

In this beginner’s guide, we will show how to easily open external links in a new window on your WordPress site. We will also show different methods to do that, so you can choose the one that best suits you.

How to open external links in a new window

Why and When You Should Open External Links in a New Window?

External links are links to websites that you don’t own or control. Normally, if you add a link to an external website your visitors will simply leave your site by clicking on the link.

While some user experience experts say that you should not open external links in a new window, we do not agree with that.

You see, most users easily forget the last website they were visiting. If they have multiple tabs open then chances are that they will never be able to find your website again.

For better user experience, we recommend opening external links in a new window or tab. This way the original web page is not lost and users can resume browsing your website by switching back.

Another benefit of opening external links in a new window is increased page views and user engagement on your site. Users are more likely to return to the previous tab and finish reading the article.

Users who spend more time on your site are more likely to join your email newsletter, follow you on social media, leave a comment, and buy your products.

That being said, let’s take a look at how to easily open external links in a new Window in WordPress.

Open External Link in New Window in Gutenberg Editor

The new WordPress block editor has a built-in feature that lets you open external links in a new window. However the option is hidden behind a button which is why beginners often don’t notice it.

Simply edit a blog post or page where you want to add an external link. Next, select the text you want to link and then click on the insert link button (or press CTRL + K on Windows / Command + K on Mac).

Open link in new tab

This will bring up the insert link popup. Simply enter the link and then click on the down arrow next to it. This will reveal the option to open the link new tab.

Click to toggle the option and then press enter. Your selected text will now be linked, and you can preview it by visiting your website.

Open External Link in a New Window Using Classic Editor

WordPress introduced a new block editor with WordPress 5.0. Many users prefer to use the old editor by installing the classic editor plugin.

If you are still using classic editor, then we will recommend you to start using the new editor. It is modern, faster, and includes many new features that you are missing out.

However, if you still want to use the classic editor, then this is how you would open a link in a new window using the classic editor.

First, you need to edit the post or page where you want to add the link. Next, select the text that you want to link and then click on the add link button.

Add new link in classic editor

A popup would appear where you can add your external link. After that, click on the gear icon next to it. This will bring up the advanced insert link popup.

Open link in new tab using the classic editor

From here you need to check the box next to ‘Open link in a new tab’ checkbox and then click on the ‘Update’ button to add your link.

You can now save your post and preview it to see the link in action.

Open a Link in New Tab Using Text Tab in Classic Editor

If you are using the HTML editor labeled ‘Text‘ in the old classic editor, then here is how you would open an external link in a new window.

Add link button in the Text editor

Simply select the text that you want to link and then click on the Add Link button. This will bring up the advanced Insert link popup.

Adding a link in plain text editor using the classic editor

From here, you can add the link and check the box next to ‘Open link in new tab’ option. After that click on the Add Link button and the popup will disappear. You will now see the HTML code for the link in the text editor.

HTML code for the external link

You can now save your changes and view the post to see the external link in action.

How to Open External Links in a New Window using HTML

Sometimes you may need to write HTML to add a link in WordPress. For example, when you are using the HTML mode in the new block editor or adding a link in a WordPress theme template file.

You’ll need to add the link using the following HTML code.


<a href="http://example.com" target="_blank" rel="noopener">Link Text</a> 

Simply replace the example.com with the external link URL, and the Link Text with the text you want to link.

The target parameter in this code tells browsers to open the link in a new window or tab.

Automatically Open All External Links in New Window with a WordPress Plugin

It may sound like extra work to manually check the option for every external link that you add. However, over time you will get used to it.

If you run a multi-author blog or often forget to make external links open in a new tab, then you can use a plugin for that.

First, you need to install and activate the Open External Links in a New Window plugin. For more details, see our step by step guide on how to install a WordPress plugin.

The plugin works out of the box, and it will automatically open external links in a new window.

It does not actually change the external links in your blog posts. Instead, it uses JavaScript to open external links in a new window.

Note: Keep in mind that deactivating the plugin will stop opening external links in a new window.

We hope this article helped you learn how to easily open external links in a new window in WordPress. You may also want to see our ultimate list of the most useful WordPress tips, tricks, and hacks that you can use on your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

How to Add Nofollow Links in WordPress (Beginner’s Guide)


Are you wondering how to add nofollow links in WordPress? When you link to an external website, search engines pass a small part of link authority from your website to the other website.

Since you don’t own or control those third-party websites, it is usually a SEO best practice to add nofollow attribute to those links.

In this article, we’ll explain what is nofollow links, and how you can add nofollow links in WordPress posts, pages, and navigation menus.

How to Add Nofollow Links in WordPress - Simple Guide for Beginners

Here’s a quick overview of what you’ll learn in this article:

A nofollow link is a type of link that tells search engines to not pass any link authority from your page to the other website that you’re linking to. You can turn any link into a nofollow link by adding the following link attribute: rel=”nofollow”.

Links or backlinks are an important search engine ranking factor.

When you link to a website, search engines consider that as a ranking signal, and they will pass a small portion of your page authority (link juice) to the other website.

Some SEO experts believe that by making external links nofollow, their own website will rank higher.

How to Check if a Link is Nofollow?

All nofollow links must contain the rel=”nofollow” HTML attribute.

Here’s an example HTML code of a nofollow link:

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

To check whether a nofollow attribute is added to a link on a website, you need to take your mouse to that link, right click on it, and then select Inspect on your browser.

Check nofollow attribute in the link

Your browser window will now split into two parts.

In the bottom window, you will be able to see the HTML source code of the link along with the nofollow attribute.

As a general best practice, you should add nofollow to all external websites that you don’t trust.

It’s completely acceptable and actually recommended to link to authority websites like Wikipedia, WPBeginner, New York Times, etc without the nofollow attribute because linking to authority sites help you add credibility to your own website.

However we always recommend users to nofollow less credible websites or websites that you simply don’t trust.

The following are some cases when you should always add nofollow attributes to the links:

1. Affiliate and Sponsored Links

Most bloggers make money online using affiliate marketing.

Affiliate links are tracking links for products and services that you recommend and get referral commissions for if someone purchases your link.

Whether you’re using a direct affiliate link or cloaking it using Pretty Links, you should always add nofollow attribute to affiliate links.

Another popular way bloggers make money is by adding sponsored links. You should always add nofollow to sponsored links because otherwise search engines may consider your site as selling links / spammy.

2. External Links

Sometimes, you may link to an external source to provide a reference to your statement. Since you don’t control the content on those websites, you should consider adding nofollow to them.

In simple words, you are telling the search engines that you are linking to a source, but it is not something you can vouch for.

Note: You don’t need to nofollow a link to an authority website.

3. Sidebar Links

Some bloggers add a list of external or affiliate links to the sidebar of their WordPress blog. These external links can be from authority sites or websites that they trust.

The problem is every time a new page is created on your site, you are creating a new backlink for those websites from your sidebar.

It is important to make these links nofollow and make sure that you are not passing the SEO juice from every page to certain links.

Since Gutenberg is a new WordPress content editor, the old nofollow plugins for WordPress are not yet compatible with it.

Currently, the only way to add nofollow links in Gutenberg is to do it manually.

Let’s take a look at the step by step process on how to add nofollow links in WordPress posts or pages with Gutenberg.

First, you need to go to Posts » Add New from the left sidebar of your admin panel.

On this page, you need to select the text that you want to add a link to, and then click on the “anchor / link” icon.

select text to add link in Gutenberg Editor

This will open a text field just below the selected text. You can paste the external link directly in the box.

If you want the link to open in a new tab, then you need to click on the down arrow icon. This will open a menu where you have to click on the “Open in New Tab” toggle box.

Add external link to the textbox

Once done, you can click on the apply or Enter icon to add the link.

To add the nofollow attribute to your link, you need to select the block containing your link and then click on the 3 vertical dots icon present at the top bar.

Select edit as HTML option from the top bar

This will open a menu where you need to click on the Edit as HTML option.

You will now see the HTML code of your link. Go ahead to add the rel=”nofollow” attribute to the link element.

rel nofollow attribute to link

If you see the rel=”noopener noreferrer” attribute in the HTML code, then add a space after noreferrer and paste nofollow after that.

Once done, you can click on the 3 vertical dots icon again and select the Edit visually option to go back to the visual format.

Select edit visually option

This will convert your normal link to a nofollow link. You can follow the same process for adding nofollow attribute to all other external links.

Although it is recommended to upgrade to the newer version of WordPress, some users still prefer to use the Classic Editor for writing their posts.

Unlike the default editor, you can easily add nofollow links in the Classic Editor with the help of a plugin.

First thing you need to do is install and activate the Title and Nofollow For Links plugin. You can follow our guide on how to install a WordPress plugin for help.

This plugin works out of the box, and there are no settings for you to configure.

Head over to Posts » Add New to create a new post. You need to add some text to the post editor and select the text that you want to link. Next, click on the Link icon present in the toolbar.

Add Link to WordPress Classic Editor

After that you can add the external link to the textbox field below and click on the gear icon to open the Link options.

This will open up a modal window where you will see a nofollow checkbox just below the “Open link in a new tab” option.

Go ahead to select the Add rel=”nofollow” to link checkbox and then click on the Update button.

Add Nofollow attribute to a link in WordPress Classic Editor

This allows you to add a nofollow attribute to any link when writing a post. This is also useful for users who are not confident with editing HTML code.

Most bloggers select the “Open link in a new tab” checkbox as well when adding an external link. This is a great way to reduce bounce rate and keep your visitors from leaving your website.

You have already learned how to add nofollow links in the Gutenberg editor manually. However, that method is only useful when you want to add the nofollow attribute to some of your links.

If you have a lot of external and affiliate links in your post, then you should switch to the Code Editor to add nofollow attribute faster.

Open code editor to edit external links

Simply, click on the 3 vertical dots icon, present at the top-right corner of the page. This will open a dropdown menu where you need to select the Code Editor option.

You will now see the HTML code of the page. Next, search for the external and affiliate links and then, add the nofollow attribute to all of them.

Add nofollow to external links

Once done, you need to click on the “Exit Code Editor” link to revert to the visual editor.

If you’re using the Classic Editor, then you can easily use a plugin to add nofollow links. However, you can also add nofollow links manually.

To do that, you need to switch to the Text Editor by clicking on the Text tab. Next, you can add rel=”nofollow” to any link you want.

Add nofollow attribute to links in classic text editor

To go back to the visual editor, you have to click on the Visual tab, placed just beside the Text tab.

Some bloggers and site owners may add external links to the navigation menu of their website.

While adding a nofollow attribute to WordPress menu links is extremely simple, it is not as clearly visible.

Let’s take a look at how to add nofollow links in WordPress navigation menus.

First, you need to click on Appearance » Menus from the left sidebar of your admin panel.

Next, select the menu where you want to add the external link and then click on the Select button to open it.

Select a navigation menu to edit

After that, you need to click on the “Custom Links” tab to add the link text and external link URL. Once done, you need to click on the “Add to Menu” button to create a new menu item.

Add Custom Link to Navigation menu in WordPress

The external link will now appear in the Menu Structure column along with the other menu items.

Next, click on the Screen Options button at the top-right corner of the screen and select the Link Relationship (XFN) and Link Target options.

Screen Options navigation menus

Now scroll back down and click on the downward arrow icon of the new menu item to expand it. Here you will find the “Link Relationship” and “Open link in a new tab” options, just below the Navigation Label textbox.

Add nofollow to Link Relationship XFN option

To add the nofollow attribute, you need to write nofollow in the Link Relationship (XFN) textbox. You can also check the “Open link in a new tab” option if you want.

Click on the Save Menu button

Lastly, click on the Save Menu button to store your changes. This will add the nofollow attribute to the external link in your WordPress menu.

Some WordPress users want to automatically add the nofollow attribute to all external links on their site.

Most solutions that offer this are done with the help of JavaScript which is not helpful for Google and the SEO of your site. Instead, you should manually nofollow the links using the above methods.

In case you are concerned about the comment section, then the good news is that WordPress already adds the nofollow attribute to all comment links by default.

If you’re still looking for a solution to automatically nofollow the external links, then you can use the External Links plugin.

It adds the rel=”nofollow” attribute to all the external links on the posts, pages, navigation menus, and the sidebar.

To install the External Links plugin, head over to Plugins » Add New from the left sidebar of your admin panel.

Upon activation, you need to go to Settings » External Links page.

External Links plugin settings page

Here you need to select the “Add No Follow” checkbox. If you want the external links to open in a new tab, then you should select the “Open in New Windows” checkbox as well.

This plugin also allows you to add a list of domains and subdomains which should not be made nofollow.

To do that, you need to scroll down to the bottom of the page and then add the domains, separated by commas or space, to the “Domains to Exclude” textarea.

Domains to exclude nofollow attribute

Once done, you should click on the Save Changes button to store the settings.

That’s all! This plugin will now make all the external links nofollow on your site automatically.

We hope this guide helped you to learn how to add nofollow links to your WordPress site. You may also want to read our beginner’s guide to image SEO, and our ultimate guide for blog post SEO to help you further optimize your blog posts.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link