How to Create Anchor Links in WordPress

Guides, Marketing, Resources

How to Create Anchor Links in WordPress

If you’re looking at how to create anchor links in WordPress blog posts, then you’ve come to the right place.

Following our post: How to create a pillar content marketing strategy, we established that your pillar content needs to be a minimum of 4000 words. It is vital that with such long articles, readers are given an enjoyable user experience (UX). That’s when you create anchor links in WordPress to help.

 

In this post, we are going to look at:

 

Let’s get stuck in and find out more!

  

What are Anchor Links?

Anchor Links, otherwise known as jump menu links, are links that act as shortcuts enabling readers to jump to a specific section in a text.
  

Reasons for Using Anchor Links

There are many reasons for using anchor links. The overall objective is to boost the user experience (UX) of your website, and anchor links enable precisely that. Let’s look at the pros and cons:

 

Pros:
  

  • Improved UX

Having a great UX for your website is critical to achieving visitors.

We’ve all been there, and we can see on the front page of Google that an article has the information we are looking for, then when we click on the link, we can’t find the text anywhere as it’s lost in a 4000-word post.

This puts off a lot of readers, and we’ve all done it. We jump right out of that website and find another link that gives us the answer quicker.

Having anchor links allows readers to easily access the information they need by jumping straight to the text. Thus, drastically improving your websites UX.

“A great UX will not only attract readers to your blog, but it will allow readers to develop a relationship with you. In time you’ll be organically growing a loyal readership, who will then hopefully turn into leads, and then into customers.” –  https://wcic.tech/how-to-create-a-pillar-content-marketing-strategy/

  

  • Higher search engine rankings!

Your anchor links allow Google and other search engines to understand better the context of your page of content. As we highlighted in a previous post, any time you create content that is more useful and understandable to users, Google would favour it immensely.

Anchor links are more likely to show up on Search Engine Results Pages (SERPs), giving you another line of text for your organic search engine listing allowing users to see more of your writing that you didn’t include in your meta description, keyword or title.

 

Cons:
  

  • Lower website session duration

Enabling users to shortcut directly to specific text will decrease your average session duration on your website. Although we have sectioned this as a disadvantage of anchor links, there is a real benefit of allowing the reader to get the exact answer instantly. And if your content is high quality, we don’t think you need to worry about them leaving your page right away. They will likely stay and continue reading if they are getting the right answers and enjoying your content.
  

  • Decrease ad revenue

If you rely heavily on advertisement revenue on your website, then anchor links are likely to decrease impressions and clicks for the ads.
  

How do anchor links work?

Understanding how anchor links work may help you implement them into your blog posts. It’s also fun to know how, right?

An anchor link is different to regular links, as it directs the users to a specific section of text either in the same page or on a separate page on your website whereas regular links use an external URL to take users to a new page.

Anchor links work on using two elements: the Anchor Source and the Destination Anchor.

 

Anchor Source– This is the linking element, typically used in a table of contents.

Destination Anchor– This is the destination that we want our link to take us to.
  

Getting Started on your anchor linking!

Now you know a little more about anchor links and what they do, let’s take a look at how we insert them into our blogs.
  

How to manually create same page anchor links

Here’s how to manually create your anchor links using HTML code. If you are unfamiliar with coding, fear not, as it is much more straightforward than it initially seems.

Here’s how to do it:

After all your text is written for your post and your table of contents is ready, you can begin coding in the anchor link.

 

Step 1: Create your anchor source (anchor link)

TIP: using a ‘#’ after the href (hyperlink reference) tag tells the anchor it is on the same page link

 

Head to the text where you want to insert the anchor link. (usually in the table of contents)

 

Option 1:

 

Select your text and click the WordPress insert link button. Then name your link, remember to use a ‘#’ before the title for same-page linking.

Create Anchor Links in WordPress | Wesley Clover
Create Anchor Links in WordPress | Wesley Clover

 

Option 2:

 

Switch to the text view (HTML) in the WordPress editor.

Create Anchor Links in WordPress | Wesley Clover
Create Anchor Links in WordPress | Wesley Clover

Create the anchor source using the below code, and change your anchor name from “#anchorname” to your title.

And change >here<to the text that you want to represent your anchor link. As you can see ours is ‘What are anchor links’


COPY THIS CODE: <a href=”#anchor name”>here</a>


(Our example:  <li><a href=”#createanchorlinksinwordpress”>Create Anchor Links in WordPress</a></li>)

 

Step 2: Create your anchor destination

TIP: paste the below HTML code a few paragraphs above the desired destination. This will give space above the text to make reading easier.

You must switch to the text view (HTML) for step 2.

Copy and paste the below code, and change your anchor name from “anchor name” to match the title you created in your anchor source.


 COPY THIS CODE: <a name=”anchor name“></a>


Create Anchor Links in WordPress | Wesley Clover
Create Anchor Links in WordPress | Wesley Clover
Create Anchor Links in WordPress | Wesley Clover
Create Anchor Links in WordPress | Wesley Clover

Switch your view back from ‘text view’ to ‘viewer’. You’ll now see that a small anchor image is visible where the anchor destination is placed (see the screenshot). You’ll notice the anchor slightly higher than the header to give room above on the post.
  

Manually Create different page anchor links

Sometimes you want to anchor links from one page to a specific piece of text within another page on your blog. Below we will show you how.

 

Step 1:

The process is basically the same. You need to slightly modify the HTML code in step one by adding the new page URL before the ‘#’.

 

COPY THIS CODE: <a href=”URL#anchor name”>here</a>

(Our example:  <a href=”https://wcic.tech/how-to-create-a-pillar-content-marketing-strategy/#typesofpillarcontent”> Types of Pillar Content</a>)

 

The process for anchor links to an external page is the same for step 2.
  
  

WordPress Anchor Plug-ins:

If you are continually creating anchor links in your blog posts, then you may find it easier to install a specific WordPress plug-in.

In no particular order here are a few Anchor Link Plug-in’s you can use for WordPress:

 

  1. WP Simple Anchors Links 

This is an excellent anchor plugin, making it easy to insert anchor links without ever needing to go into text view and code in your anchor links.

It has an easy to use anchor icon in your Visual Editor toolbar to use for linking.

 

  1. Content Anchor Links

This plugin works by creating unique ids to all h2 and h3 headings. Then when it comes to editing your content, these heading ID’s become available as ‘anchors’ making linking very easy.

 

  1. Smoothscroller

This is a great tool to allow your anchor links to scroll smoothly to the desired text rather than jumping to it in a jarring action.

 

  1. Easy Table of Contents

This plugin is great as it not only enables you to insert anchor links but automatically generates a table of contents for your posts.

 

There you have it! We hope you enjoyed our quick guide to creating anchor links for WordPress.

You’ll find that with these slight and easy adaptions to your posts you’ll be delivering a much higher quality user experience.

 

 

For more blog writing tips and trick see our marketing posts here> https://wcic.tech/marketing/

 

 

Write a comment

SUBSCRIBE TO WCIC.tech