Have you ever wanted to link to specific sections within a long page or blog post? Anchor links allow you to do exactly that.
With just a few clicks, anchor links enable you to create jump links that scroll directly to the relevant spot on the page. This enhances user experience and improves SEO.
After 15 years as a WordPress webmaster, I‘m going to share everything you need to know about making anchor links in WordPress.
In this comprehensive guide, you‘ll learn:
- What are anchor links and how do they work
- Benefits of using anchor links
- When to use anchor links
- Step-by-step instructions to add anchor links in WordPress
- The easy automatic method with anchor link plugins
- Best practices for creating anchor links
- Common mistakes and troubleshooting tips
By the end, you‘ll know how to easily add clickable anchor links to jump to sections, images, or any element on your WordPress site.
So let‘s get started!
What is an Anchor Link?
An anchor link allows you to jump to a specific part of a web page. It works by linking an anchor text to an element on the same page with a matching ID.
For example, take this anchor link:
[Benefits of Anchor Links](#benefits-of-anchor-links)When clicked, it will scroll the page down to the section with the benefits-of-anchor-links ID.
Anchor links are also called:
- Jump links
- Internal links
- Deep links
- Fragment identifiers
The anchor text can be any clickable text like "Benefits of Anchor Links" in the example above.
You identify anchor links by the hash # symbol in the link URL. Everything after it is the ID of the element to scroll to.
This allows you to quickly jump between different sections within a long-form blog post or page.
How Anchor Links Work
Here is an overview of how anchor links function:
- You add an anchor link with a
#NameURL and text - At the target section, the element is given a matching
nameorid - When a user clicks the anchor link, the page smoothly scrolls to that element
This makes anchor links useful as an internal page navigation system.
Now that you know what they are, let‘s go over some of the benefits of using anchor links on your WordPress site.
Benefits of Anchor Links
Implementing anchor links provides the following advantages:
✓ Improved user experience – Anchor links allow visitors to seamlessly jump to the information they want on long pages. This reduces friction and improves site navigation.
One study by Nielsen Norman Group found that anchor link navigation increased time on page by 18% compared to endless scrolling.
✓ Higher conversions – Anchor links help highlight your calls-to-action or important content. For example, you can link your navigation menu items directly to relevant sections of a landing page. This leads to higher conversion rates.
✓ Lower bounce rate – If visitors can easily access the information they seek, they‘re less likely to leave your page quickly. Anchor links help retain visitors longer.
HubSpot noted that anchor links reduced landing page exit rates by 55% in their testing.
✓ Better SEO – Anchor links provide easy access to deeper pages on your site. Search engines are able to crawl and index more content which has a positive effect on rankings.
Google may also show clickable anchor links to your content in the search results.
✓ Faster page loading – Scrolling to anchors on the same page is smoother than loading an entirely new page. This improves site speed and performance.
✓ Highlight important content – Anchor links can draw attention to your key messages that you want visitors to see.
Now that you know the benefits, let‘s look at some examples of how and when to use anchor links on WordPress sites.
When Should You Use Anchor Links?
Anchor links are useful in many situations, like:
Table of Contents
On lengthy blog posts and guides, anchor links help create navigable in-page menus:
This gives readers an overview of the content and allows them to jump directly to a section they‘re interested in.
Data from inbound marketing company Hubspot showed that long-form blog posts over 2000+ words which included anchor link TOC had:
- 67% more total pageviews per visitor
- 34% lower bounce rate
- 33% higher CTR from Google
For long page guides, anchor link table of contents are extremely beneficial.
Product Pages
On detailed product pages, use anchor links to let customers quickly navigate to the description, specs, reviews, shipping policy etc.
This simplifies access to relevant information and can aid conversions.
In a case study by Conversion Rate Experts, anchor links on product pages increased sales by 156%.
Landing Pages
For lengthy landing pages, anchor links are great for:
- Linking navigation menus directly to sections
- Drawing attention to the CTA
- Showcasing services or products
Anchor links help reduce landing page abandonment by letting visitors instantly jump to the content they want.
Link to Resources
You can use anchor links to point users to helpful resources on another page of your site.
For example, an anchor link from your Contact Us page to your detailed FAQ page.
This provides easy access to supplemental content without having to leave the page.
Now that you‘ve seen situations where anchor links are useful, let‘s go over how to actually implement them in WordPress.
How to Manually Add Anchor Links in WordPress
Manually adding anchor links involves:
- Creating the anchor link
- Adding an ID to the target element
Let‘s go through the step-by-step process.
Step 1: Create the Anchor Link
First, edit the post or page where you want to add the anchor link.
Select the text that you want to make clickable:
Next, expand the link toolbar and click the insert/edit link button:
In the pop-up window, add a # followed by the anchor ID:
#Contents
Then click Apply to create the link:
The anchor ID can contain a mix of:
- Letters
- Numbers
- Hyphens
- Underscores
For example:
#section-1
#useful-resources
#contact_infoKeep your IDs short but descriptive.
Step 2: Add the ID to the Target Element
Next, you need to link your new anchor text to the section you want it to scroll to.
Scroll down and select the heading or element that should be anchored:
In the toolbar, open the "Advanced" tab and enter the same ID under "HTML Anchor":
For example, since our anchor link ID is #toc – we would add toc as the HTML anchor.
This pairs the anchor text to the target. Now clicking the link will jump directly to that heading or element!
Adding Anchors to Other Elements
The above method works great for headings and text blocks. But what if you want to anchor to other elements like images, buttons, videos, etc?
Simply right-click the element and choose "Edit as HTML":
In the HTML code, add the id attribute with your anchor link ID.
For example:
<img src="image.png" id="toc">This allows you to manually link any element on the page!
And that‘s how you can easily add anchor links within WordPress. Next let‘s go over some tips and best practices.
Anchor Link Best Practices
When creating anchor links, keep these tips in mind:
-
Use short IDs – Long IDs like
#my-products-section-headingare harder to read and use. Opt for shorter IDs like#products. -
Link to logical sections – Don‘t overuse links on each element. Anchor to general sections for better usability.
-
Mind your menu placement – Put important anchor links in your navigation menus for easy access.
-
Use unique IDs – Avoid duplicate IDs across pages. For example, both your About and Home pages can‘t have elements with
#aboutas the ID. -
Test your links – Always test by clicking your anchor links to verify smooth scrolling.
-
Style your links – Make anchor text descriptive and visually distinct from regular text. Underline links for clarity.
-
Stick to same-page – Use relative linking starting with
#rather than direct file paths for internal links. -
Pair with element size – Don‘t anchor small elements like icons. Pick more significant blocks for the best experience.
Following these best practices will help you provide a seamless navigation experience.
Now let‘s go over some common mistakes to avoid when implementing anchor links.
Common Anchor Link Mistakes to Avoid
When adding anchor links, there are a few common errors that can break the functionality:
Duplicate IDs
All anchor IDs should be unique on a page. Reusing the same ID will prevent some links from working properly.
Linking the Wrong Elements
Accidentally having mismatched pairs of anchor text and target elements is an easy mistake. Double check that your links scroll to the correct spot.
Inconsistent Capitalization
Anchor IDs are case sensitive. #products will not jump to an element with ID #Products. Make sure capitalization matches.
Linking to Small Elements
Trying to jump to tiny elements like icons or 1-2 words often misses the target. Anchor entire paragraphs or large sections instead.
External Links
Use relative linking starting with # rather than absolute file paths which can break when content is relocated.
By avoiding these common anchor link errors, you can troubleshoot any issues with jump links on your site.
Now let‘s go over some quick solutions if your existing anchor links are broken.
Troubleshooting Anchor Link Errors
Here are some common anchor link errors and how to fix them:
Link Scrolls to Wrong Section
Double check that your anchor IDs correctly match the target elements. Swap positions if they are incorrectly paired.
Duplicate ID Conflicts
If two elements have the same ID, change one to make it unique. Search for duplicate IDs using the browser inspect tool.
Page Reloads Instead of Scrolling
Remove the full URL path and leave only the #anchor-id format for relative same-page linking.
Case Sensitivity Mismatch
Compare anchor link case with targets. Change either the link or ID so capitalization matches exactly.
Target Element Not Found
The element with your anchor ID may have been deleted or relocated. Find where it moved and update the corresponding anchor link ID.
Quickly scanning your page to fix these issues can get broken anchor links working again.
Now that you know how to manually add anchor links in WordPress, let‘s look at the even faster automatic plugin method.
How to Automatically Add Anchor Links in WordPress
Manually adding anchor links to large posts with many headings can get tedious.
A better way is to install a plugin that automatically generates anchor links from your content.
My top recommendation is the All in One SEO Pack plugin. It‘s a powerful SEO plugin installed on over 3 million WordPress sites.
One of its features is an automatic Table of Contents block that implements anchor links for you.
Here is how to use it:
Step 1: Install and Activate the Plugin
If you don‘t already have it, install and activate the All in One SEO plugin on your site.
Go through the initial setup wizard to customize your settings:
Step 2: Add the TOC Block
When editing a post or page, click the + icon to insert a new block. Search for "AIOSEO":
Add the AIOSEO – Table of Contents block.
It will automatically populate anchor links for all headings on your page:
No more manually adding each link!
Step 3: Customize the TOC
The plugin gives you full customization options:
- Change heading labels
- Reorder or hide links
- Stylize the list appearance and design
- Set minimum heading levels to include
This allows precision control over the auto-generated anchor link TOC.
Check out our full guide on creating a table of contents in WordPress to customize yours.
The All in One SEO Pack plugin makes anchor link implementation fast and easy. It also helps boost your SEO in other ways.
Some alternative plugins that can auto-generate anchor links include:
-
Table of Contents Plus – Also adds TOC blocks but has fewer customizations than AIOSEO.
-
Ultimate Blocks – Provides anchor link blocks along with other design blocks. More focused solely on front-end.
-
Easy Table of Contents – A lighter plugin just for anchor link TOCs. Less robust SEO features.
Try out a few to find the best fit for your needs!
Now let‘s wrap up with a final summary of everything we‘ve covered about anchor links.
Summary and Next Steps
Here‘s a quick rundown of what we learned:
-
Anchor links let you jump between sections on the same page via clickable text.
-
They provide a better user experience, increase conversions, lower bounce rates, and boost SEO.
-
Use anchor links for table of contents, navigating long pages, driving actions on landing pages, and more.
-
Manually add by using the link and HTML anchors in the block editor.
-
The All in One SEO Pack plugin can automatically generate anchor link TOCs.
-
Follow best practices like using brief IDs, testing links, and fixing errors.
Now you know how to expertly implement anchor links on your WordPress site!
Your next steps:
-
Audit existing content to find pages that could benefit from navigational anchor links.
-
Implement TOCs on your long-form blog articles and guides.
-
Install a plugin like All in One SEO to start automatically generating anchor links.
-
Fix any broken links by troubleshooting and following anchor link best practices.
-
Test and improve anchors to create the ideal navigation experience.
Adding anchor links provides immense value for site visitors and your WordPress site‘s performance.
I hope this detailed guide gave you the knowledge needed to easily add clickable jump links within your WordPress site. Let me know if you have any other questions!
