How to Create Anchor Links: A Step-By-Step Guide

Imagine you open a web page that is a guide on a topic as vast as photography styles. Now, it’s anybody’s guess that such a topic would likely have sections and subsections to cover the subject in detail. And, in all probability, it is going to be a long read. However, it is possible for you to be slightly more familiar with some parts of the topic, while other sections of the subject might need your detailed attention. And therefore, you might want to quickly skip to that segment instead of wasting your time skimming through other materials. How do you ensure you get to the right part without getting lost in the crowd of information scrolling up and down the page? The answer – anchor links! These hyperlinks can make that possible in a seamless manner. So, if you want to give your readers a similar experience when they are looking for particular information on your web page, all you need to do is link the anchor text that will direct them to the particular section. One click on the linked text, and your readers will land on the section they are looking for. Want to learn more about how it is done? Let’s find out!

What Are Anchor Links?

Before diving deep into the topic, let’s just understand what anchor links are and how they can be used in your favor. Also known as jump menu links, anchor links work as bridges that direct your audience to a specific section of the same web page. While they are commonly used in the ‘table of contents’ section of a page, where an outline of the entire blog is provided in the form of a bulleted list, you can place them anywhere on the page where you think they make sense.

They can be easily created by adding a basic HTML code, but more on that later. Mostly, using them can widely improve the user experience of your website. Even more so if you often tend to publish longer pieces of information, such as guides. This helps the reader easily navigate through the article and jump to the part that is most relevant to them. Best of all, you can also use these links outside of your website to refer to a specific section of a particular web page. 

How To Create An Anchor Link?

The process of adding an anchor link is rather simple and pretty straightforward. One can create an anchor link with ease by making changes in the HTML code. Not familiar with CSS? Don’t fret! Just follow the steps outlined here and you would be able to easily add an them anywhere:

• Step 1: Go to the text where you would want to add an anchor. Switch to the HTML editor tab in your content management system – Shopify, WordPress, etc.
• Step 2: Select the anchor text and click on the hyperlink icon in the rich text editor.
• Step 3: In the URL section, enter your website’s URL, then insert the slug, and end it with a (/) slash sign. You can click on the Open In New Window checkbox if you want the readers to remain on the same page after clicking on the link. It should appear something like this – https://websitename.com/slug/
• Step 4: Now, it is time to create a unique ID. To do this, add (#) hashtag sign to the following URL. And then add your unique ID and use the (-) hyphen sign to separate the words. Also, note that while your ID could be anything, it is better to keep it relevant. Moreover, remember that it is case-sensitive and can only be used once within a web page. Once you have added the unique ID, this is how your URL would appear – https://websitename.com/slug/#my-unique-id
• Step 5: The next step requires you to link the unique ID to a specific part of your web page where you want the anchor text to lead to. To do this, go to that specific part of the page, again switch to the HTML editor tab and enter your unique ID code by adding id=”my-unique-id” under the paragraph tag (<p>). For example, <p id=”my-unique-id”>. Then, add the text you want to showcase on your web page and then simply close the paragraph tag (</p>). This is how it should appear once you have added everything – <p id=”my-unique-id”>The text you want to be displayed</p>
• Step 6: After you are done with everything, click on Save and your changes will be reflected on the frontend.

Use Plugins

Want to add anchor links but don’t want to go through the process of creating one by adding the HTML code? We have a simpler alternative – install plugins. There are multiple free plugins available online for different content management systems that can be used to easily add these links anywhere without having to make changes in the code. Some of such plugins that are available for WordPress include Scroll To Anchor, TinyMCE Advanced, Easy Table Of Contents, WP Anchor Header, etc.

Suggested Read: 8 WordPress Plugins That Help Your Website Run Seamlessly

Weighing The Pros And Cons

There are many perks to using jump links; however, if not used in a mindful manner, there could be a few downsides too. Here’s a list of the pros and cons of using these links for your understanding.

Pros:

• Improves user experience by making long-form content easy to navigate
• Can help improve the click-through rate (CTR) by appearing as a result of a specific query in search engines
• Can be used as a “table of contents” feature
• Can be used as a “return to top” button

Cons:

• Can affect the average time on the page
• Can reduce ad clicks
• Can be a complicated process if you are adding 301 redirects

One of the ways to make the jump links work for your website is to start with A/B testing some articles. Segment your long-form articles into two lists – where you publish some articles with these jump menu links and the others without them. And monitor the results in your traffic, CTR, bounce rate, ad revenue, etc. This could help you build a tried and tested strategy for using anchor links for your website.

Further Read: Improve Readability Of Your Blogs With These 6 Writing Tips

At Fotoskribe, we aim to help businesses like yours grow their online presence by delivering smart and meaningful content that engages your audience. And we do it in a way that gets Google’s attention.

For more information on how we can help – check out our pricing plans.