An external link icon is a small graphic that denotes to the visitor the link takes them away from the current domain. For example, there would be a tiny arrow graphic behind the link if we added one to Google.com from GreenGeeks.com.
This is seen a lot in wiki pages across the Internet. It is a nice little cosmetic addition to further engage visitors. It lets people know which content is available on the website and what links take them away.
Most of these images are small, 10-by-10 pixel icons that fit perfectly within a line of text without causing it to shift. However, choosing a smaller font size may result in using a smaller graphic.
In this tutorial, I’m going to show you how to add these tiny little graphics and how to customize your own. It’s a simple process that becomes automatic when you choose the best plugin for the job. This means you won’t have to add the graphic each time you make a link.
Using the External Links Plugin #
The easiest way to add the link icon is to use a plugin. In this tutorial, I’m focusing on the External Links plugin. This tool has a variety of functions ranging from adding the icon to adding the nofollow command. It’s a useful plugin that has potential to improve optimization.
Although it’s been a while since this plugin was updated, I did test it on WordPress 4.7.1 and it works great.
To use this plugin:
Got to the plugins area of the WordPress admin panel.
Click the “Add New” button at the top and search for “External Links.”
There will be quite a few plugins to choose from, but we’re looking for the one by Denis de Bernardy and Mike Koepke. Install and activate the plugin.
This will add a new function to the settings area in WordPress. Go to “Settings” and click on the option for, “External Links.”
This plugin has several options available regarding how to handle external connections. At the moment, we’re only concerned with the “Apply Globally” and “Add Icons” controls. Find these two options and check the boxes.
Scroll down and click to save your changes. Now, all external links on the website will automatically have an icon showing.
Create a new post. It doesn’t have to be anything special. We just want to test out the options from the plugin. For instance, I created a post named, “Trash Me” so I remember to delete it when I’m done.
Let’s create a link to Google from the website. If you’re unsure how, you can use the following code in the text editor of your site:
<a href=”http://www.google.com”>Google</a>
Click to save draft.
In the top tool bar of WordPress, click the “View Post” link. A new tab will load and you’ll see your link with a little blue arrow image afterward.
Close the new tab.
That’s all there is to it. Now, every link on the website aiming at a source outside of your domain will have a little icon next to it. Because this plugin uses very few resources, it won’t affect the SEO of your site.
How do I change the icon? #
Unfortunately, this plugin doesn’t have a way to change the icon through the admin panel. However, it doesn’t take a lot of effort to create your own. In fact, it can be a great way to add more appeal to the experience. For example, what if you want to match the color of the icon with your site’s design?
Using a graphic editor and uploading the image, you can show a different external link icon within your website. Don’t worry, it doesn’t take any kind of programming knowledge.
To customize your icon:
Open any image editing application. For this tutorial, I am using Photoshop. However, you can use Pixlr Editor if you don’t have an imaging program. It’s an easy system that resembles Photoshop and is completely free to use.
Create a PNG file that is 10-by-10 pixels, such as an arrow or other graphic. Perhaps a nice globe would give a sense of appeal. You need to name this file, “external.png.” This is what the plugin will look for when assigning it to the external links.
Save the file somewhere that will be easy to find on your computer.
Now, we need to upload it to the website. Open your FTP program or access File Manager through your cPanel.
Go to the following directory:
/wp-content/plugins/sem-external-links
Download the external.png file located there into a separate directory. This is to create a backup in case you want to switch back to the original image later.
Upload the new icon you just made in step 2. You will need to overwrite the existing file.
Now, your website will use the new icon when showing external links. You may have to refresh your page if you want to see it in action.
Why use a PNG file? #
Portable Network Graphics, or PNG, can utilize a transparent background. Because JPGs cannot handle this function, PNGs are more versatile because they don’t show a white background behind the image. This means you don’t have to worry about color matching the site or showing a gaudy white box around the icon.
How can you get an arrow image quickly? #
If you have Photoshop, use an arrow image you like and shrink it to fit into a 10-by-10 square box for the icon. I would suggest zooming in as far as you can while making changes such as color. Don’t worry if the image is pixelated when you zoom in all the way. Once you go back to normal size, the graphic will look quite nice.
How do you get the default icon back into WordPress? #
You can replace the icon with the original by simply following the steps above. This time, you want to upload the backup copy you saved of the original external.png file.
Other Points of Interest in this Plugin #
This plugin is a great way to control your external links. Aside from the images you can also make changes to:
- Control Links to Subdomains
If you create a subdomain, you don’t have to show an icon as an external image.
- Auto Convert Text URLs
Instead of creating links manually, any URLs in text will automatically turn into clickable links.
- Automatic Nofollow
This option allows you to put the nofollow rule for all external links, which may improve SEO for your site.
- Open in New Window
This function is much like the “open in new tab” ability WordPress has. However, it makes all external links open in a new window without having to set it yourself.
- Exclude HTML Code Blocks
Perhaps you provide examples in code blocks on your website that don’t need to have icons or automatic links? Checking this box will make sure that URLs listed in the <code> or <pre> commands of WordPress are ignored.
- Excluding Domains
You can set the plugin to ignore links to specific domains for all of these rules. For example, putting “google.com” would result in no icons or other rules for any link aiming at the Google domain name.
Creating an external link icon is easy when you use WordPress. It’s an easy way to give your site more visual appeal while engaging visitors in a small, 10-pixel wide graphic. Don’t underestimate what even the smallest additions can do for retaining visitors. Adjustments like this are often points of interest for many people browsing the Internet.
What kind of small add-ons do you use to engage your audience? What’s your favorite graphic tool, and how does it help you?
