Effective navigation is essential for an excellent website experience. When users can easily identify the destination of each link, they feel more confident exploring your content.
External link icons facilitate this by offering immediate visual cues about links that lead away from your site.
These small indicators empower visitors to make informed choices about their browsing experience, resulting in a more seamless and professional interaction.
Having observed numerous WordPress site owners implement this feature, we’ve witnessed how these minor details can significantly enhance user satisfaction.
Are you ready to enhance your site’s navigation? We will guide you through our effective process for adding external link icons to your WordPress site.
Why Incorporate External Link Icons in WordPress?Understanding External Link Icons
An external link icon is a small graphic that appears next to a link directing users to a different website.
For instance, if you scroll to the bottom of any Wikipedia article, you will notice that most links in the References section feature an external link icon.
By incorporating links with icons into your WordPress blog, your visitors will easily distinguish between outbound and internal links. Many websites also utilize external link icons to indicate that the link will open in a new window or tab.
These icons can help retain visitors on your site longer and boost your pageviews by minimizing the chance of them unintentionally clicking away to an external link.
Now, let’s explore how to customize your external links and add icons next to them on your WordPress site.
How to Add External Link Icons in WordPress
The simplest method to incorporate link icons on your website is by utilizing the WP External Links plugin.
This plugin allows you to automatically add various images, Dashicons, and Font Awesome icons to your external links.
First, install and activate the WP External Links plugin. If you need assistance, please refer to our guide on installing a WordPress plugin.
Next, click on the new WP External Links option in the left-hand menu.
If a popup prompts you to upgrade, simply click anywhere outside the popup to dismiss it.
As you can see, the plugin offers much more than just adding an external link icon to your site. For instance, it can automatically convert all your external links into nofollow links in WordPress.
WP External Links can also help keep visitors on your site by opening all external links in a new window or tab.
We recommend activating this feature because many users expect that links with an external link icon will open in a new window or tab.
To ensure all external URLs open in a new window or tab, select the ‘Open external links’ dropdown and choose ‘each in a separate new window or tab.’
By default, WP External Links applies this setting to every new external link you create.
Additionally, it can scan your site and update any previously added external URLs.
This will enhance the user experience, so it’s advisable to check the ‘Overwrite existing values’ option.
After that, you’re set to create an icon for your external links. Begin by navigating to the ‘Choose icon type’ section.
Next, click on the ‘no icon’ label to access the dropdown menu.
You can choose from Image, Font Awesome, or Dashicon.
Both Font Awesome and Dashicon offer a box-with-arrow icon that can serve as your external link icon.
This icon will consistently appear in blue on your site, as shown in the following image.
This is the standard icon used by many websites for external links, so most visitors will recognize the meaning of the box-with-arrow icon.
The ‘Image’ option allows you to select from various box-with-arrow icons, featuring different styles and colors.
The following image illustrates how a vibrant box-with-arrow icon will appear on your WordPress site.
To add a colorful link button to your site, select ‘Image’ from the ‘Choose icon type’ dropdown menu.
After that, click on the icon you wish to use for your external links, ensuring it complements your WordPress theme.
Next, open the ‘Icon position’ dropdown menu.
Here, decide whether the icon will be positioned on the ‘Right side of the link’ or the ‘Left side of the link.’ Most websites display the external icon to the right of the link.
Would you prefer to use the classic blue box-with-arrow icon?
If so, open the ‘Choose icon type’ dropdown and select either ‘Font Awesome’ or ‘Dashicon.’
Then, open the dropdown menu next to ‘Choose Dashicon’ or ‘Choose FA’ and select the box-with-arrow icon.
Note:Both Font Awesome and Dashicons offer a wide variety of icons. However, we recommend using the box-with-arrow icon, as it is widely recognized as an external link indicator.
After selecting the Font Awesome or Dashicon you wish to use, you can choose whether it should be positioned to the right or left of the link, following the same steps outlined earlier.
Once you are satisfied with your chosen external link icon, simply click on ‘Save Changes’ to apply it.
The plugin will automatically add the link icons to all external URLs on your website.
Discover More Tips and Tricks for Customizing Your WordPress Site
If you enjoyed this article on customizing external link icons, you might find these additional tips helpful.
For instance, footnotes are an excellent way to provide extra information or citations without interrupting your text flow. Check out our guide on adding simple and elegant footnotes in WordPress for more details.
Additionally, have you thought about enhancing the appearance of your links? Altering the color of your links can make them stand out from the surrounding text, enhancing their visual appeal.
Moreover, highlighting text is an effective way to capture your readers’ attention on important information. We offer a guide on how to highlight text in WordPress, showcasing various methods you can use.
Want to enhance the visual appeal of your blog posts? Drop caps are large, decorative letters that introduce paragraphs, adding a stylish and distinctive flair to your content.
Improving your website’s navigation can greatly enhance the user experience. Breadcrumb navigation shows users their current location within your site’s hierarchy, making it easier for them to explore.
Frequently Asked Questions: Adding External Link Icons in WordPress
Here are some common questions our readers have about incorporating external link icons into their WordPress sites:
Do external link icons impact SEO?
No, external link icons do not directly influence your SEO. They serve as a visual enhancement that improves user experience.
However, the way you manage external links can significantly affect SEO. For instance:
- Opening links in a new tab (
target="_blank") keeps users from leaving your site. - Adding
rel="nofollow"orrel="sponsored"attributes can help control link equity, particularly for affiliate links. - Using icons helps users easily recognize third-party links, potentially lowering bounce rates by making your site feel more trustworthy.
While icons themselves don’t directly influence search rankings, they can enhance user engagement, which may indirectly improve your site’s performance.
Will adding an icon to external links affect my website’s loading speed?
Not necessarily. If you use a lightweight plugin like WP External Links or implement the icon with CSS, the effect on performance will be minimal. Just keep a few considerations in mind:
- Avoid using large or unoptimized image icons. Instead, opt for SVGs or icon fonts such as Font Awesome.
- Don’t load an entire icon library just for a single external link icon, as that would be excessive.
- Plugins that offer multiple functionalities (like link monitoring or redirection) may be heavier, so it’s wise to select one that focuses solely on link icons if speed is a priority.
Following these tips will ensure that external link icons do not negatively impact your site’s loading speed.
Should I display external link icons for all external links?
Not necessarily. There are instances where you might choose to omit the icon, such as:
- In menus or footers, where space is limited.
- On social media icons, where the purpose is already clear.
- If the icon does not align with your site’s overall design.
Many plugins allow you to exclude specific links by using classes or domain names. For instance, you can choose to exclude links to YouTube or your brand partners while displaying icons for other links. The key is to use icons in a way that enhances the user experience.
We hope this guide has helped you understand how to add an external link icon to your WordPress site. Additionally, feel free to explore our comprehensive guide on the most effective WordPress design elements and our top recommendations for the best drag-and-drop page builders for WordPress.
If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
