How to Quickly Identify External Links in the WordPress Editor

Published in WordPress.

Crafting quality content is not easy. This is a topic we’ve covered several times in our blog: how to write catchy titles, how to write the perfect introduction, the important role images play in your post and where to find images, etc. But creating great content is the most important of them all, and it’s essential if we want to correctly position our blog and attract many visitors.

One of the main recommendations when generating quality content is to link it correctly. This includes both links to your own blog and links to external sources. Link to the blog itself is useful for obvious reasons: you get the visitor to stay on your website and jump from one page to another. But, why is it interesting to link to content that drives your visitors out of your website? Doesn’t this contribute to increasing the bounce rate?

There are many reasons why linking to external sources is positive:

  • External links make your website more interesting, since people will find what they need on your website or in the sources you use.
  • Search engines can more easily identify the niche you are in if you link to external sources, as you give them a broader context.
  • Linking to other sources encourages other sources to link back to you too (“you follow me, I follow you”). Although it is not guaranteed this will happen, linking to others conveys the idea that you are working for an open and interconnected community and, therefore, that you might be worth to be linked too.

However, links to external sources open the possibility of your visitors leaving your website and going somewhere else. Or maybe not?

How to Keep a Visitor on Our Website When They Click on an External Link

If we want to keep our visitors on our website, even when they click on a link that will take them to an external website, the solution is very simple: make the link open in a new tab. In this way, the user can follow the link and expand the information, but our website will always be there, in the background, waiting for our curious visitor to close the new tab and come back to us.

Defining external links in the block editor is very simple. Just click on the link in question, click on the ellipsis icon, and activate the option Open in New Tab:

How to open an external link in a new tab
How to open an external link in a new tab

Now, when we have a post full of internal and external links, how can we know which ones are external? And, even more important, how can we know if we have activated this option?

Identifying External Links in the WordPress Editor

Identifying external links in the WordPress editor and differentiating them from internal links at a glance is extremely simple. We only need to use a simple CSS rule that marks the links that point to any domain other than ours.

For example, our website is https://neliosoftware.com, so any link that points to a URL that does not start with https://neliosoftware.com will be an external link. Using this information, we can define a rule like the following:

which will highlight all the links that point to different websites to ours by adding an icon after the link itself:

External link identified as such with an icon
With a simple CSS rule we can add a small icon at the end of the link that marks it as “external”.

If we complicate our CSS a bit, we can color the “external link” icon differently depending on how the link is defined. That is, if we identify an external link, we can paint it with a bright red if the option to open it in a new tab is not enabled:

Identifying external links that will not open a new tab
By modifying the CSS rules that we have defined, we can even mark when an external link will not be opened in a new tab. Just tweak the color we use in the icon and you’re done!

with a rule as simple as this:

How to Add the Necessary CSS Rules to Identify External Links

To add the CSS rules that we just saw in your WordPress, simply add this PHP snippet:

in a plugin with your customizations.

I hope you liked this tip. See you next week!

Featured image by Kevin Wang on Unsplash.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Leave a Reply

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

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.