CentrioHost Blog

Anchor links, also referred to as jump menu links or table of contents, are links that instantly take you to a specific part of the page (or an external page). The anchor destinations are typically specified by using either the A element (naming it with the name attribute), or by any other element (naming with the ID attribute). Both methods are fully compliant with W3C standards (source).

Example of an Anchor Link

If you’re still a little confused on what anchor links are, don’t worry. See the example image below. We are using anchor links on each of these bulleted list items. When you click on them, it takes you directly down to the H2 header that contains that content. You can check these out for yourself further down in the post. Anchor links can be used on anything, such as text, images and H1-H6 headers.

On a lot of sites, anchor links are merely used to create a table of contents at the beginning of long-form posts. If you know a little CSS, you can get creative and make them look a little more stylish, as we’ve done on our landing pages.

On other sites, you may not see the anchor link, instead, they are being used on headers simply so that they can share links directly to the specific sections.

Pros and Cons of Anchor Links

Just because we’re doing something doesn’t always mean you should. Here are a few pros and cons to consider when using anchor links on your WordPress site.

Pros

• One of the biggest advantages of anchor links is creating a better user experience when browsing your site. This is especially true when it comes to long-form articles. We publish a lot of in-depth content (4,000+ words) and scrolling can become a pain. Using anchor links allows the user to instantly jump to the section that they’re interested in. Let your users find what they need faster.
• Using anchor links on headers lets you share direct links to different sections within an article. This is awesome for social media and even support teams. For example, our support team at Host SEO heavily relies on anchor links in our Knowledge Base articles so that we can send the user to the exact troubleshooting step they need to follow. Our sales team also utilizes these to more quickly answer Host SEO related queries.
• When it comes to search engine results pages (SERPs), results can always vary based on what shows up. However, we have seen time and time again the anchor links (jump menus) appear on our SERP listing because we’ve used them in our articles. These are awesome because they essentially give you another line of text for your organic listing. They can also help increase CTR as the user might see something related to their query that you didn’t convey in the meta description or title.

• Anchor links can also be used for other things such as the “return to top” link that Wikipedia uses along with its citations ^ or footnotes. ^[1]

Cons

While we think the pros definitely outweigh the cons, here are a few setbacks you might want to consider.

• Anchor links or a table of contents could decrease the average time on site per visitor. Why? Because they are skipping right to the content they want instead of reading your entire article. However, if you make your visitor happy right off the bat, this could result in them signing up for your newsletter or researching more into what you’re selling. So this could be seen as a pro or a con.
• Directly related to the issue above, anchor links could possibly impact your ad revenue. Visitors skipping straight to a certain section could decrease impressions and clicks. Sites that rely heavily on advertising might want to A/B test using anchor links and table of contents.
• If you’re changing domains or needing to add 301 redirects it’s important to note that the fragment identifier (#) is never sent to the server. This can complicate things if your changing things around down the road with your anchor links. There are ways to get around this with JavaScript, but this is by no means an easy task.

Anchor Link Transition

You might also want to think about changing the anchor link transition. By default, anchor links will jump suddenly to the ID further down the page. This can be jarring for some. You can change this so it’s a smooth scrolling transition. This is actually what we do on the Host SEO blog. You can utilize a free plugin like Page scroll to id or add some CSS to your site, such as scroll-behavior: smooth;. This Stack Overflow post has some additional tips for developers.

As with most WordPress tips, there are a few different ways you can go about adding anchor links in WordPress. Check out these four different easy methods. And yes, these links directly below are using anchor text. ?

• How to Manually Create Anchor Links in WordPress
• How to Create Anchor Links in WordPress with a Plugin
• How to Create Anchor Links in WordPress with Gutenberg
• How to Create Anchor Links in WordPress with Chrome Extension

How to Manually Create Anchor Links in WordPress

The first way to create anchor links in WordPress is to simply do it manually with HTML in each of your posts. Let’s create one so you can see how they work.

Step 1

Create the text for your link and add a hyperlink on it like you would normally for any other link.

Step 2

Instead of linking it to a URL, post, or page; you will assign it an anchor name. URIs that designate anchors contain a “#” character followed by the anchor name. You can name this anything you want, although we typically recommend keeping them short and related to the actual name of the header.

If you look at the text view (HTML) it looks like this:

<a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a>

Here is an example all of the anchor links we’re using in this post: