How to Remove Website Anchor Links: A Complete Guide
Introduction
Anchor links are an essential part of web navigation, allowing users to jump to specific sections of a page. However, there are times when you may want to remove them—whether for SEO reasons, design changes, or to fix broken navigation. In this article, we’ll explore what anchor links are, why you might need to remove them, and how to do it effectively.
What Are Anchor Links?
Anchor links (also called jump links) are hyperlinks that point to a specific element on the same page or another page. They typically use the symbol followed by an element’s ID. For example:
<a href="#section1">Go to Section 1</a>
When clicked, the browser scrolls to the element with id="section1". While useful, anchor links can sometimes cause issues, such as duplicate content, poor user experience, or SEO penalties if overused.
Why Remove Anchor Links?
There are several reasons to remove anchor links:
- SEO Optimization – Search engines may treat anchor links as separate URLs, leading to duplicate content issues. Removing them can consolidate link equity.
- Design Changes – If you redesign your site, old anchor links may break or become irrelevant.
- Broken Navigation – Anchor links that point to non-existent IDs can frustrate users.
- Content Updates – When you remove a section, its anchor link becomes obsolete.
How to Remove Anchor Links
The method depends on whether you want to remove the link but keep the text, or remove the link entirely.
Method 1: Remove the Link but Keep the Text
If you want to keep the visible text but remove the clickable link, you can strip the <a> tag.
Using HTML:
Replace:
<a href="#section1">Read more</a>
With:
Read more
Using JavaScript:
If you need to do this dynamically, use:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
const text = anchor.innerText;
anchor.replaceWith(text);
});
This script finds all anchor links and replaces them with plain text.
Method 2: Remove the Entire Anchor Element
If you want to remove both the link and its text, use:
document.querySelectorAll('a[href^="#"]').forEach(anchor => anchor.remove());
Method 3: Remove Anchor Links in WordPress
If you’re using WordPress, you can:
- Use a plugin like Better Search Replace to remove
href="#..."patterns. - Edit your theme’s functions.php to filter content:
add_filter('the_content', function($content) {
return preg_replace('/<a[^>]*href="#[^"]*"[^>]*>(.*?)<\/a>/i', '$1', $content);
});
Method 4: Remove Anchor Links via CSS (Not Recommended)
CSS cannot remove links, but you can disable pointer events:
a[href^="#"] {
pointer-events: none;
cursor: default;
text-decoration: none;
color: inherit;
}
This makes anchor links unclickable but doesn’t remove them from the DOM. Use this only as a temporary fix.
Best Practices
- Backup First – Always backup your site before making bulk changes.
- Use 301 Redirects – If anchor links point to important content, redirect them.
- Update Sitemaps – After removal, update your XML sitemap.
- Test Thoroughly – Check navigation and internal linking after changes.
Conclusion
Removing website anchor links doesn’t have to be complicated. Whether you prefer manual HTML edits, JavaScript, or WordPress plugins, the key is to choose the method that best fits your workflow. Always consider the SEO impact and user experience before making changes. With the steps above, you can clean up your anchor links and keep your site running smoothly.
Related Reading:
