{"id":24249,"date":"2018-12-03T18:50:05","date_gmt":"2018-12-03T13:20:05","guid":{"rendered":"https:\/\/blog.resellerclub.com\/?p=24249"},"modified":"2026-05-21T10:27:29","modified_gmt":"2026-05-21T10:27:29","slug":"importance-of-anchor-link-and-how-to-add-it-to-your-wordpress","status":"publish","type":"post","link":"https:\/\/www.resellerclub.com\/blog\/importance-of-anchor-link-and-how-to-add-it-to-your-wordpress\/","title":{"rendered":"Importance of Anchor Link and How to Add it to your WordPress"},"content":{"rendered":"

<\/h2>\n

We have covered the different kinds of linking a lot on our blog, right from internal linking to backlinking for SEO purposes. However, there is another type of linking and this isn\u2019t really related to SEO or how to boost your website ranking but is equally important as it can improve the user experience on your website. These links are known as anchor links.<\/p>\n

In this article, we\u2019ll cover what is an anchor link, benefits of anchor linking and how to create anchor links. So let us begin!<\/p>\n

What is an Anchor Link?<\/h2>\n

Anchor links also known as jump tag\/jump menu links or table of contents, are links that enable you to jump to a section within the specified linked page instantly. Anchor links help ease the transition of going from one part of the webpage to another especially in a long post.
\n <\/p>\n

Advantages and Disadvantages of an Anchor Link<\/h2>\n

Advantages<\/h3>\n
    \n
  1. Anchor links help enhance the user experience<\/strong>. Say, for example, your website blog has really long but informative articles. If a reader wants to read a particular section they can directly jump to it instead of scrolling<\/strong> all the way down. This helps users in saving their time.<\/li>\n
  2. Helps organise<\/strong> the content on the website in a systematic manner, especially if the content is long. For example, an online user guide for a specific product or a tutorial.<\/li>\n
  3. Another advantage is that at times, Google takes these anchor tags into consideration<\/strong> while displaying the results on the search engine. This can help boost your CTR<\/strong> as users might end up noticing something useful to them that wasn\u2019t covered in your meta title or description.<\/li>\n<\/ol>\n

    Disadvantages<\/h3>\n
      \n
    1. Although anchor links speed up the process of finding data for visitors by reducing the scrolling time, it indirectly affects the average time a visitor would spend on your website, as chances are they might abandon the site no sooner they are done reading what they want and forget the starting position from where they navigated.To make sure the visitor doesn\u2019t abandon your website immediately you can redirect them to the previous reading location so they don\u2019t lose track.<\/li>\n
    2. If your website relies on Ads to generate revenue then adding anchor links can reduce the number of impressions and clicks. This is because impressions are only counted if an Ad loads & display in front of the user. If by any chance an Ad fails to load in front of a user it might result in loss of revenue to the business website. It is safer to say, you need to test how and when the Ads display on your web page else you might be on the losing end.<\/li>\n<\/ol>\n

       <\/p>\n

      How to add an Anchor Link<\/h2>\n

      Now that we\u2019ve seen what can anchor link is and covered both the pros and cons of using anchor links on your website. Let us see, how to add them. There are two ways to add an anchor link:<\/p>\n

        \n
      1. Manually<\/li>\n
      2. Using a Plugin<\/li>\n<\/ol>\n

        Adding an anchor link manually<\/h3>\n

        To add an anchor link to your WordPress post directly, all you need to do is make changes in the HTML section.<\/p>\n

        Step 1:<\/h4>\n

        Select the text you wish to add an anchor link to, this is a normal line in your article and the link should be added like you would add a normal hyperlink. However, instead of adding the link of a URL we would assign it to an anchor name. For this, we would link it using a URI (Uniform Resource Identifier). The URI for an anchor contains the \u2018#\u2019 character followed by the anchor name. Keep the name short and in line with the text, you\u2019re anchoring.<\/p>\n

        For example. this is a text from one of our articles<\/a> where we had used anchor linking. The text we linked was \u2018how to put your WordPress site in maintenance mode\u2019 and should a user want they could directly jump to the method. And the anchor text used was \u2018#wordpress-maintenance-mode\u2019<\/p>\n

        \"\"<\/p>\n

        Step 2:<\/h4>\n

        Should you want to see how this looks in the HTML format, you can go to the \u2018text view\u2019 section of the editor and see the code. Alternatively, if you prefer writing in HTML, here is the code to use.<\/p>\n

        <<\/span>a href<\/span>=<\/span>\"<\/span>#<\/span><\/span>wordpress-maintenance-mode<\/span><\/span><\/code>\"<\/span><\/span>><\/span><\/span><\/code>how to put your WordPress site in maintenance mode<\/code><\/<\/span>a<\/span><\/code><\/pre>\n
        Step 3:<\/h4>\n
        Finally, you need to add an ID to the header you want your anchor link to jump to. Switch to the \u2018text view\u2019 section of your WordPress editor (HTML) and add the relevant Header size (we prefer H4). Now add the ID along with the anchor name you mentioned in the above step 2.<\/p>\n
        Note:<\/em> The ID and anchor name have to be exactly the same for the link to work.<\/p>\n
        <<\/span>h4<\/span> id<\/span>=<\/span>\"<\/span>wordpress-maintenance-mode\"<\/span><\/span>><\/span><\/span>how to put your WordPress site in maintenance mode<\/<\/span>h4<\/span>><\/span><\/span><\/pre>\n
        You\u2019ve successfully added an anchor link to your post. We added one anchor link, however, depending on the length of the post you may add as many as you want.
        \n <\/p>\n
        Step 1:<\/h4>\n
        Download the plugin from WordPress.org and install it. Post the successful installation, select the text you want to anchor and create a hyperlink. Just like the manual step, we will prefix a # character before the designated URI.<\/p>\n
        \"\"<\/p>\n
         <\/p>\n
        Step 2:<\/h4>\n
        Select the header you wish to link to and then click on \u2018Insert\u2019. The Insert tab is available because we installed the plugin. In the Insert tab, select \u2018Anchor\u2019.<\/p>\n
        \"\"<\/p>\n
        Step 3: <\/strong>
        \nA new window pops up, here in the ID section mention the same anchor name you used in Step 1. Now, you\u2019ve successfully created an anchor link.<\/p>\n
        \"\"<\/p>\n
        Conclusion<\/h2>\n
        Adding an anchor link to your posts is an optional thing, however, if you post long content you might as well take advantage of anchor linking. This way you have a higher chance of the visitor reading the content relevant to them on your website instead of skipping it altogether. And well it eventually does help improve your CTR.<\/p>\n
        So what are you waiting for? If you still haven\u2019t tried anchor linking on your WordPress website try it today. Or are you already using them? If yes, do let us know your experience in the comments box below.<\/p>\n
        Reseller Club Hosting Services<\/h2>\n
        Reseller Hosting<\/a> | Windows Reseller Hosting<\/a> | Cloud Hosting<\/a> | VPS Hosting<\/a> | Managed VPS Hosting<\/a> | Dedicated Server Hosting<\/a> | Windows Dedicated Server<\/a> | Managed Dedicated Server<\/a> | Linux Shared Hosting<\/a> | Windows Shared Hosting<\/a><\/p>\n
        \n\t\t\t  
        \n\t\t\t  <\/div><\/div>\n\t\t  
        Adding anchor link using a plugin<\/h3>\n
        Some people are not comfortable with the idea of making changes in their HTML, partly because they are not so tech savvy. To help them add anchor links to their posts, there are several plugins available. Some of the plugins available are, Scroll to Anchor<\/a>, TinyMCE Advanced<\/a> Plugin, WP Anchor Header<\/a> and others.<\/p>\n
        We have used TinyMCE Advanced Plugin, this is one of the most popular plugins with 2+ million active installations. Being a visual editor it can be used for a variety of things.<\/p>\n