Wordpress anchor links: Create anchor links for A+ UX (plugins & manual)

Reading Time: 15 minutes

User experience is one of the 200 Google ranking factor uses to rank your content. Out of a ton of ways you can enhance UX of your end users, anchor links is one of easiest ways you can do that. Anchor links are many times confused with anchor text. In this post, I will help you understand the difference and set up anchor links (by plugins and manually) so that you can enhance the user experience for your end users.

If you are just starting out, it is important to have anchor links as part of your on-page SEO strategy and user experience. As part of this post, you will be learning the following.

That being said, let us begin this guide and learn about anchor links.

What is an Anchor link? How is it different from Anchor Text?

An anchor link is a hyperlink that lets your end user jump to a specific point of your webpage. An anchor link is different from an anchor text. Anchor links are also known as jump menu links or table of content. There are two elements in an anchor link, one that becomes the link (source) and the second one is the ID where the user will jump to (destination).

On the other hand, anchor text is a hyperlink that is visible to end users that are linking to external or internal webpages. Anchor text has a lot of significance in SEO and plays an important role in determining the page of the pages the anchor text is linking to. Search engines pay a lot of attention to the text used as anchor text. Search engines learn about the content present in the link mentioned by the anchor text used.

Read also: How to create ‘Recently updated section’ in WordPress

Example of Anchor Links (Table of Content)

If you are an absolute beginner, I have the best example to explain what the anchor link is. I’m sure you must have used MS Word for creating documents for your school and high school. In MS office, you can create a table of content, with which you can jump to the specific point of the whole document.

Similarly, you can have a table of content, what we call an anchor link in the blog post to let users jump to the specific point of the post. If you are intending to give a great user experience and have a grip on CSS, you can have an awesome table of content on your landing pages.

Pros & Cons of Anchor Links

Sure, with help of anchor link you can enhance the user experience, give a great navigation menu and help a user find what they’re looking for in no time. But, it is something not completely necessary to do. That being said, here are some Pros & Cons that you should know to make educated decisions in the future.

Pros of anchor links

Sure, with help of anchor link you can enhance the user experience, give a great navigation menu and help a user find what they’re looking for in no time. But, it is something not completely necessary to do. That being said, here are some Pros & Cons that you should know to make educated decisions in the future.

Pros of anchor links

• One thing that is convincing enough for anyone to make use of anchor link in their blog post is user experience. Depending on your niche, the length of the content would vary. Ideally, a blog post has at least 800 words and I have seen (and written) blog posts of 10,000 words too (like this post on SEO Glossary). In such scenarios, you can bring the information that your users are looking for, faster.
• If you have a support team for a product or service you offer, having anchor links is a great help. You can redirect users to a specific portion of a help article which they were finding difficult to locate. Furthermore, if you get traffic from social media, there are chances that more users would interact and engage with your articles on social media. Since you’ve made it easier to find the information they are looking for, there are chances that your post will have more organic reach.
• Speaking of SEO benefits, Search engines tend to show links within blog posts in SERPs. That requires you to set up structured data and teach the search engine about the links on webpages. You can test your webpages on Google structured data testing tool. You’d ask what does it have to do with anchor links? Well, it turns out that many times an anchor link appears in a SERP along with anchor links within the SERP of that particular result. If that is the case, you wouldn’t want to miss out organic traffic from the search engine

Cons of anchor links

Every benefit comes at a cost. Depending on the need and outcome, it becomes tougher or easier to bear that cost. Similarly, anchor links have a couple of disadvantages that you should know before you can utilize it.

Why Anchor Links Are Not Always Good (why I don’t use it)

The cons section has demotivated you and turned you against anchor links. I too thought this way and decided that I’d never use it. Soon I happened to write articles around 4000 words to 10,000 words. At the end of the article, I found myself confused while reading the post.

That’s when I realized that articles with words more than 3000 words should have anchor links. I don’t prefer articles with 3000+ words having anchor links on my blog, but it’s a personal decision. I choose to have anchor links only in articles above 5000 words (which are very few in number on my blog) and not 3000+ words.

This is the only way in my views to decide whether or not to have anchor links in a blog post. Anchor link has great benefits and loss at the same time. Furthermore, anchor link effects one of the 200 Google ranking factors at the same time. One increases the chances of ranking higher and at the same time, it also reduces the chance of ranking higher. The side your blog posts lean on depends on the content you prepare. If you bound yourself to basic on-page SEO best practices, you can mitigate this issue to some extent. However, it is completely dynamic to have this feature in your blog posts.

Read also: What are featured snippets? How to rank for position zero?

Are you still curious to implement the anchor links on your blog posts? Let me share various ways you can make use of this inexpensive way to increase the user experience of the end users.

How to Manually Create Anchor Links In WordPress?

The beauty of self-hosted wordpress is that you can customize anything, literally anything. Which is not possible if you are on wordpress.com, and this is one of the reasons why wordpress.org is better than wordpress.com.

Here are the steps to manually create anchor links in wordpress:

Step 1: Create text for your link

Create the hyperlink of the text you want the users to jump from. Simply highlight it and press ctrl+k to create a link.

Step 2: Append “#” in the URL

Anchor name in HTML is denoted by appending a “#” in the URL. You can create anything as URL, just be sure to it is easily recognizable by anyone and have a # symbol in the front of it.

If you switch to text mode of the editor, you’d see something like this,

<a href="#Header-1">What are Anchor links? How is it different from anchor text?</a>

Step 3: Create a target ID

Next, you need to create a target ID where the user will jump to. Again, this is manual so you will need to switch to text mode in the editor screen and make changes. Locate the header you want the users to jump to, in this case, it is H1. Add the ID you created in step 2 (the URL you created will act as ID) and make sure it doesn’t have # in the front. Your code should look something like this:

<h1 id="Header-1">What are Anchor links? How is it different from anchor text?</h1>

That’s it. You can create anchor links manually anytime and any number of times. However, this seems tiresome when you have to create a lot of jump links in long articles. Well, I have a way where you can do these things in a few clicks. No dealing with code and no wastage of your valuable time.

WordPress Plugins For Anchor Links

Another reason why I love WordPress over any other content management system is the Plugins. WordPress has way over 55,000 plugins that can enhance your blog’s experience. There’s a bunch of plugins for everything and if your requirement is out of the box, you can create a custom plugin and have available only for your blog/website.

That being said, let me show you best wordpress plugins for anchor links.

Anchor Links plugin #1: TinyMCE Advanced

TinyMCE Advanced is a great replacement to the default editor menu. It has a wide range of functionalities including buttons, formats, shortcut buttons and more. Let’s have a look at how does it work and how easy it is to create anchor links with this plugin.

Steps to create anchor links with TinyMCE wordpress plugin:

Step 1: Install, activate and create a link

Once you’ve installed the plugin, create a hyperlink like you usually create — by pressing ctrl+k. Just like the way we add a # symbol in the beginning, add it here too.

Step 2: Highlight the destination header

Locate the portion of the blog where you want the users to jump to. Highlight it and click on Insert menu and then click on Anchor link.

Step 3: Create ID for the destination header

Once you click on Anchor link in the menu, you be will be asked for the ID that the users will be jumping to. This plugin saves the time of creating the tag by switching to HTML and then creating the tag.

That’s it. 3 steps and you’re good to go. This is the best way you can create anchor links, there are other plugins in wordpress plugins directory but I wouldn’t recommend having a special plugin to do just this thing. TinyMCE has a lot of features including creating anchor links and hence there is no need to have a special plugin for this.

How to Create Anchor Links in WordPress with Gutenberg

Gutenberg was the most awaited plugin in recent times. Gutenberg editor is scheduled to come with WordPress 5.0 and it is going to be a game changer. Editor plugins are going to have a tough time to survive against Gutenberg. Gutenberg is more than just an editor and has a ton of features including anchor links. However, the steps are similar to the TinyMCE plugin. Install Gutenberg from wordpress directory and activate it.

Here are the steps to create anchor links in wordpress with Gutenberg

Step 1: Highlight the header

Highlight the header and click “Advanced” on the settings menu on your right. You should see an option to add HTML anchor link.

Step 2: Insert ID and hyperlink

Next and the final step is to add the hyperlink just like we have added in previous steps, by adding # before the link. Hit enter, and you are done for good. That’s how powerful Gutenberg is, everything in lesser time.

How to Create Anchor Links in WordPress with a Google Chrome Extension

Look who’s up for the party. Google Chrome.

Let’s admit it, Google Chrome kills the RAM and eats it like a monster. But who doesn’t use Google Chrome? Google Chrome has an extension that can do this exact thing and help you save some space by not installing any plugin on your web server. The extension that I am talking about is Anchor Links Chrome Extension. It is fully compatible with self-hosted WordPress and WordPress.com.

Here are the steps to create anchor links using the Google Chrome extension:

Step 1: Install and add the activate the extension

Once you have got the extension ready to rock and roll, activate it by clicking on the icon appearing top right corner of the browser. Select the header you want to create the anchor link for, and then click on the icon. You do this everytime you need to create anchor links.

When you click on the icon, the extension automatically copies the anchor ID it has created for you. Here, you don’t have the liberty to chose the anchor name, instead, it chooses the header you highlighted.

Step 2: Create the hyperlink

Locate the text the you want the hyperlink to jump to and create a hyperlink. Paste the anchor name you copied in the previous step. You don’t even need to add # symbol for the URL.

Hit enter and you are done. The chrome extension will add the anchor name and copy it. All you gotta do is paste and save it.

Final Thought on Anchor Links

Considering your time, I recommend using the chrome extension for multiple reasons.

Jump to menus, or anchor links are an optional method to enhance user experience. You can invest in better content, themes, designs, navigation menu, page load speed and a lot more such stuff. Anchor link surely will bring down your revenue & session time.

In my views, have anchor links only in wordpress pages and not posts. Considering the fact that pages are static and hence you won’t have ads. Furthermore, you wouldn’t even bother having low session time on wordpress pages.

That being said, we reach at the end of this post Over to you, which method are you going to use first? Is the TinyMCE or the chrome extension? Are you aware of any other method or plugin that I did not include in this guide? Let me know in the comment section below.

If you like this post, feel free to share the content on your social media profiles. Do you know someone who’s looking for this information? Share it with them too.

Join my mailing list where I share exclusive updates. Also, join Btricks telegram channel for instant updates and tips to grow your blog into a money making machine.

Here are some handpicked articles that you will find informative:

• Inexpensive ways to create a kick-ass Robots.txt file to boost your SEO
• 20+ things you should definitely do after installing wordpress
• How to get a free domain on Bluehost and start a wordpress blog?
• WordPress hosting vs Web hosting: Which one should you choose?

Originally published at www.btricks.in on August 23, 2018.