Anchor links is not a topic that is discussed a lot, but we’ve had excellent results with them! Today we’ll be diving into how to create anchor links in WordPress and explore why you might want to start using them. From our experience, anchor links can help improve the user experience, make navigating long-form content a lot easier, and even give you a slight advantage in Google. Who doesn’t want a free advantage in Google? 😉
What Are Anchor Links?
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).
Prefer to watch the video version?
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.
- 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 Kinsta 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 Kinsta 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. 
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.
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 Kinsta 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 three 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 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.
Create the text for your link and add a hyperlink on it like you would normally for any other link.
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:
<ul> <li><a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a></li> <li><a href="#anchor-links-wordpress-plugin">How to Create Anchor Links in WordPress with a Plugin</a></li> <li><a href="#anchor-links-wordpress-gutenberg">How to Create Anchor Links in WordPress with Gutenberg</a></li> </ul>
Next, you need to add an ID on the header you want your anchor link to jump to. To do this you’ll need to switch over to the text view (HTML) in the WordPress editor. On the header, in this case, an H2 header, add the ID along with the anchor name you chose in step 2. The anchor name and ID attribute have to be exactly the same for the link to work.
<h2 id="manually-create-anchor-links-wordpress">How to Manually Create Anchors Link in WordPress</h2>
How to Create Anchor Links in WordPress with a Plugin
Don’t want to bother with HTML code every time? No worries, there are some awesome free WordPress plugins you can utilize to easily add anchor links and even a table of contents to each post.
Add Anchor Link with a Plugin
One of the easiest ways to add an anchor link is with the free TinyMCE Advanced plugin. This plugin basically adds extra functionality to the editor with quick shortcut buttons. As of writing this, the plugin has over 2 million active installs with a 4.5 out of 5-star rating.
After you’ve installed and activated the plugin, go into your post and create a hyperlink on your anchor text. Instead of linking it to a URL, post, or page; you will assign it an anchor name with a # before it.
Highlight the header you want to link it up to. Then click on “Insert” from the button at the top and select “Anchor.” This button shows up in the editor because of the TinyMCE Advanced plugin.
Input the anchor name you gave it in Step 1 and click “OK.” This plugin saves you time because you never have to leave the visual editor view. If you’re doing it manually with HTML you have to bounce between both the visual editor and text editor (HTML) views.
Add Table of Contents with a Plugin
Perhaps you want to speed up the process even more. 😄 If you’re writing a lot of in-depth content and always want to include a table of contents (anchor link lists/jump menu) in your posts, then you should take advantage of a table of contents plugin.
One of the best free plugins is Easy Table of Contents. This plugin automatically generates anchor links for your headers and lets you insert your table of contents anywhere in your post with a simple shortcode. As of writing this, the plugin has over 30,000 active installs with a 4.5 out of 5-star rating.
After you’ve installed and activated the plugin, there are a few settings you’ll probably want to change. These can be found under “Settings → Table of Contents.”
- The “Enable support” option allows you to choose which post types you want to use the table of contents on. Most likely this is your “Posts” type.
- You can then choose whether or not you want a table of contents automatically inserted or if you want to insert it manually. We would probably recommend doing manual if your posts change around a bit.
- The “Show when” option lets you define how many headings the post should have before a table of contents shows up. For example, you probably don’t want a table of contents showing up on a short blog post, so doing at least four or more headers is probably best.
To insert the table of contents manually, simply insert the
[ez-toc] shortcode where you want it to show up in the post.
The table of contents is then automatically generated for all of the headers in the post. How awesome is that?
You can also make more changes in the settings regarding what should show up, exclusions, appearance, etc. For example, perhaps you always have a “Summary” heading at the end of your posts. You can input that header into the list of exclusions in the settings so it’s not included in the table of contents.
Another table of contents plugin you might want to check out is Shortcode Table of Contents. This is a newer plugin on the market, but it’s developed by James Kemp, who we’ve had the pleasure of interviewing.
Add Anchor Links on Headers Automatically with a Plugin
Want to simply add anchor links on all of your headers automatically? Then you should check out the free WP Anchor Header plugin. This will add anchor links to all of your H1-H6 headers.
This is a very basic plugin and there aren’t any settings. Simply install it, activate it, and you’re good to go. Each header will automatically get an anchor name (derived from the header name), and they even get a cool little anchor icon that shows up when you hover over the header. This allows visitors to easily see there is a link there that they could copy if they wanted.
How to Create Anchor Links in WordPress with Gutenberg
The new Gutenberg editor is just around the corner and is projected to ship with WordPress 5.0. With it is improved and built-in support for adding anchor IDs to headers.
Highlight the header in the Gutenberg block and click on “Advanced” on the right-hand side. You will then see an option to add an HTML Anchor.
If you want to link to it, simply create a hyperlink on your anchor text. Instead of linking it to a URL, post, or page; you will assign it an anchor name with a # before it.
As you can see there are a lot of creative ways to add anchor links in WordPress. Some are easier than others. If you’re publishing a lot of longer content this helps your visitors get to the content they want right away. We’ve also seen anchor links help aid in getting “jump to menus” in SERPs, which helps increase CTR on your organic listing.
Are you using anchor links yet on your WordPress site? If so, we’d love to hear your experience or thoughts.
I’ve created Anchor Links, a free Chrome Extension for WordPress (and Medium).
You can create anchor links in only two steps. It’s SEO-friendly as well.
Check it out here: https://castroalves.github.io/anchor-links
It’s a good alternative because you don’t need to install a plugin on every WordPress installation you have.
Also, if your blog/site is hosted on WordPress.com, it’s the only option available since we can’t install those plugins there.
I hope you like it. :)
Hey Cadu! I think you’ve reached out to me before. I actually forgot about this handy Chrome extension. I’ve now added it to the post.
It’s truly an awesome solution for adding anchor links in WordPress. Great job!
Thanks, Brian! =)
Would it be possible for firefox?
Thanks for the great post as usual. I think one aspect you should cover is the scroll animation. This blog’s anchor link scroll animation is smooth, but that won’t be the case for other sites. The user will notice a sharp and sudden jump from one section to another.
Great tip Simon! We’ve added another section above to the post about anchor link transitions.
Link building is actually a very important practice when it comes to On-Page SEO, most of the times this is also underestimated.
Building backlinks for your promoted post, for instance, is a very difficult task, therefore is not easy to get this pages to rank well on SERPs. That’s when internal link building really helps a lot because you can pass link juice from a blog post with many backlinks to other ones with not so many.
This is one of the things that caused me more trouble when I started my blogging journey, but we always have this type of articles to save the day.
Thanks a lot for such a great article.
Hi! Once you create the Anchor Link in Gutenburg, how do you link something to that?
Thanks for the article. It was useful.
I used the anchor links with Gutenberg editor. And observed that I couldn’t test in the draft page. I had to publish to test it. Would you be able to tell if that is the normal case or it is do with some setting or the other in my installation?
Thank you for this post.
Hmm.. Left out a big part of adding manual links.. i.e. how to link to text in a DIFFERENT PAGE.. totally cant figure it out after looking at many different website “explanations”.. Not using Guttenberg.
Once you`ve added all the anchors how do you find them to make a link to them (other than if you make the link straight away) ?
Is there any way to get WordPress bring up all the anchors on a page (like Webplus does), then you select one and Bingo it`s all done ?
Awesome post, i was wondering which one does Kinsta.com’s blog uses? The ones in this post look really good.
Hello Nasim, we just a custom solution for our anchor links.
Hi Brian. I’ve implemented this, but the scroll jumps to text a line or two below where it’s meant to be (on desktop) while on mobile it jumps to the first sentence but goes past the heading. How do you fix this? Is there a way to influence where you actually jump to? Thanks!
Hello: Thank you for the post. I’m just wondering can you use an anchor on a page and then direct users to a specific element of a post. For example, my website has a blog with four or five entries (on a post), but would like to have users click on the homepage and then be directed to the blog post — and the specific part of the blog that covers a unique topic.
Yes, I believe you can set a specific HTML ID for that element (e.g. ), then you can jump to that element by using a URL like domain.com/page/#something.
thanks a lot, it was really useful for me :)
How can you leave a “Back to Top” link in each section of a page or post? Thanks
Hi Russ, I’ll pass this feedback to the development team. Thank you.
I apologize, allow me to rephrase my questions. I have “Jump to” sections for long-form articles on my website, however, I also want to add a “Back t the top” links so that a person can jump back up to the top of the page. Do you know how I can add a “back to the top” link to pages/posts?
thank you! the article turned out very helpful for me!
Hi Russ, you can try using the WPFront Scroll Top plugin, just did it today, works fine.
I really love your content .. Your all articles are so valuable and really inspiring and to the point & no bull shit.
Love it.. keep producing value
Including anchor links in your web pages can boost your SEO since it provides your visitors an enhanced user experience and they add an additional line for your organic listing. Through these two, visitors can navigate and understand your website faster. However, if you’re a beginner in using anchor links, it is best to study them first before incorporating them into your content.
Thanks for the video and text explanation of anchor links–specifically the Gutenberg example.