A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

anchor-link-in-wordpress

How to Create an Anchor Link in WordPress

It is always a good idea to provide your visitors with a dynamic experience while they browse your website’s content. Moreover, including some interactivity can surely benefit your site and engage the audience. When you insert a link in WordPress or include anchor links in your textual content, you can definitively spice up user experience. That’s why we’ll show you how to create an anchor link in WordPress in this article.

We will take you through each phase of the proces, step by step:

What Is an Anchor Link?

Anchor links are essentially a one-page navigation method. Namely, you can set certain pieces of text (e.g. headings or titles) to lead to other bits of text (like a paragraph) when clicked. This provides readers with a satisfying, effective and easy-to-use navigation method, all within the same page.

A good example of anchor functionality is a table of contents. In most cases it is located at the beginning of the text and leads to certain parts of the same text. The most obvious example of it is this article with its table of contents created by using anchors. What has been done in this case is that the items from the TOC lead to certain parts where the anchors are placed. Placing an anchor means giving a certain ID to that place in the article that helps us quickly “jump” to that place. The only place that leads to the anchor is actually the link to the anchor.

As for the pros and cons of anchor links, we generally lean towards believing that the pros outweigh the cons, but we leave it for you to be the judge.

Anchor links are a great way to make longer articles more attractive and easier to read. Endless scrolling is a serious threat to a quality user experience and anchor links simply let your readers instantly find what interests them most. Anchor links allow them to jump through the text following their own paste without having to dive into the topics that don’t matter that much to them.

Another plus is that anchor links can discreetly help you improve your position in the search engine result pages as they give you another line of text for your organic listing.

On the other hand, anchor links in the form of a table of contents or jump menus could decrease average time a user spends on your page. This could also affect conversion rate, but we believe that’s the risk worth taking. In the long run, quality user experience can bring you more conversions.

The only serious con that we actually find is more a technicality than a con. Here is the thing – if you need to add a large number redirects or you are changing domains you need to know that the fragment identifier (#) is never sent to the server. If you are making changes with your anchor links on the go, this fact can complicate many things for you. But, if you are not changing domain nor adding 300+ redirects, you don’t have to worry about this.

Adding Anchor ID to Parts of the Text

Placing an ID in the specific location means that the location gets a specific URL. This URL consists of the URL of the page itself, to which we add the URL with the added ID. This may sound confusing, but the example below makes it all much clearer.

Let’s take for example that we want to create an anchor link to lead as to the title above photo.

Put anchor on a header

First of all, we have to add a unique ID to the title.

In the Classic Editor, the unique ID is added in the text editor directly to the title.

Locate the starting point of the text bit you wish the anchor link to lead to. Next, paste this <a id=”a-picture-is-worth-a-thousand-words”></a> in front of the paragraph. Note that we are using a-picture-is-worth-a-thousand-words only as an example here, and you can put any word you like between the quotation marks.

Anchor in Classic WordPress editor

We have a very similar situation with Gutenberg – it is necessary to add the ID and we do it in a block called Custom Html.

Anchor in Gutenberg WordPress editor

Adding ID in the WP Bakery is very similar to adding it in the Classic WP Editor and Gutenberg. With Elementor, it is even easier as it features a special Menu Anchor element which makes creating an achor very simple.

We mentioned that the part to which we assigned an ID now has its own URL and looks like this:

https://pageURL/#ID

ID becomes a slug as a part of the permalink, so it is very important to carefully choose what the ID will consist of.

Create an Anchor Link in WordPress

When we have added IDs it is very easy to make an anchor link. No matter which editor you use, the procedure is the same. All you have to do is insert a link to the desired place that you want to lead to another part of the page, in the same way as you insert any link.

Let’s say we want a sentence at the beginning of our text that leads to the part of the text that talks about its content (again, we can use this for the Table of Contents). All it takes is to link that sentence at the beginning.

What is important here is that instead of a link, we put a #ID – the ID we just created.

Create anhor link

Another thing you can see in the picture above is the arrow next to the title where we added the anchor. This arrow shows us that an anchor has been added only in the editor, not in the live article, as there is no need for users to see it.

Since it links to the same page, there is no need to put the full URL we just mentioned (https://pageURL/#ID).

How to Use an Anchor Link to Link Two Different Pages

Although the most common reason why you might be interested in how to create an anchor link in WordPress is that you want to do interlinking on the page itself, sometimes linking two different pages this way makes a lot of sense.

This is the case when you want to link from one text to a specific part of another text because somehow it relates to the topic of the first text.

The first thing you need to do here is to assign an ID to that part of the text in the second article. You must enter in the admin panel of that page and add the ID as described above. As we said, now that part has a specific URL, the url of the page where the + ID is located. The point is clear, we will use that URL to link where necessary.

You can see how this works immediately: just go back to the top of our page and click on any item in the TOC , you will see the structure of the URL and you will see that the last part contains the #ID. By copying this link, you can link to that part from any of your pages.

Tips on Choosing What Text to Use as Your Anchor Link ID

Exact and Partial Matches

Anchor text plays a small but important part of your SEO. One of the most commonly used tactics is to choose anchor text that matches your keywords completely or partially. A partial match is called a long tail anchor. But if you rely too much on this straightforward tactic Google might penalize as too many exact matches look like you are spamming, and you can’t use the same keyword too many times, so you’ll have to turn to other types of anchor texts.

Branded Anchors

You can always use your brand name as an anchor text. It can improve your brand recognition, and to spice it up, you can also add a long-tail key phrase to your brand name to make the link stronger.

Generic Anchor Text

This the anchor text that has nothing to do with your brand name or keywords but it is a handy tactic to add diversity to your links. These are the “click here” or “contact us” type of anchors and they are very useful when you want to create a call to action.

Latent Semantic Indexing

If you want to focus on your SEO this is an excellent tactic. It boils down to choosing the words and synonyms related to your targeted keyword. This way you can rank for multiple keywords at the same time. Google won’t penalize you, it will even help you find the related words with special tools and you can’t make a mistake when you use Google’s own resources.

No Text Links

These are links that use images instead of text. Actually, what is used in this case is the image’s ALT tag. This tactic can inspire lots of creative ideas, but don’t forget to edit the ALT tag description and a text description below it to help Google’s detectors understand the content and intent of the page.

Naked Anchors

As their name suggests, these are the anchors that use only the raw URL as a link. There’s no text in the anchor, no keyword or phrase. Although they don’t seem attractive in any sense, the fact is that visitors very often click on these types of anchors, so you shouldn’t avoid using them.

Conclusion

This rounds up the entire process. We hope we have been successful in conveying how simple it is to create an anchor link in WordPress. Finally, don’t forget to use a different link word for each new anchor on the page, and you’re all set!

We hope that you found this article to be helpful. If you liked it, please feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply