Anchor links are a special type of hyperlinks, which allow users to jump to a specific part of a web page. Anchor links are sometimes referred to as jump links, page jumps or “jump to” links.
No matter what you call them, they can improve the user experience by making it easier to navigate to the necessary section of a long page.
You are probably used to seeing jump links at the bottom of many websites, they often say “Back to top” or are simply an upwards arrow icon.
You can also find anchor links in Table of Contents sections, like the one below:
Table of Contents
What are Anchor Links (Page Jumps)?
Anchor links are, in essence, just like standard links, but instead of simply pointing to a different page, these links point to a specific section of page.
They can point to a section of the current page or to a specific page section on another page.
Google announced support for “named anchors” all the way back in September of 2009. This is how they describe the purpose of anchor links in search result pages (emphasis mine):
We just announced a couple of new features on the Official Google Blog that enable users to get to the information they want faster. Both features provide additional links in the result block, which allow users to jump directly to parts of a larger page. This is useful when a user has a specific interest in mind that is almost entirely covered in a single section of a page. Now they can navigate directly to the relevant section instead of scrolling through the page looking for their information.
When to use Jump Links?
If you’re writing long pieces of content, with multiple sections and headings, Jump Links are a great way to improve the user experience. According to Google:
First, ensure that long, multi-topic pages on your site are well-structured and broken into distinct logical sections. Second, ensure that each section has an associated anchor with a descriptive name (that is, not just “Section 2.1”), and that your page includes a “table of contents” which links to the individual anchors.
The HTML Mark-up for Anchor Links
This is how the HTML code for a Table of Contents (TOC) section could look like on a page about a WordPress theme:
<h2 id="table-of-contents">Table of Contents</h2>
<ul>
<li><a href="#benefits">Benefits of Theme Name</a></li>
<li><a href="#installation">Theme Installation</a></li>
<li><a href="#configuration">Theme Configuration</a></li>
<li><a href="#customization">How to Customize</a></li>
<li><a href="#support">Theme Support</a></li>
</ul>
And then the rest of your content could look something like this:
<h2 id="benefits">The Benefits of Using our WordPress Theme</h2>
<p>Lorem ipsum.</p>
<h2 id="installation">How to Install the Foundation Theme</h2>
<p>Lorem ipsum.</p>
<h2 id="configuration">Configuration is as Easy as 1-2-3</h2>
<p>Lorem ipsum.</p>
<h3 id="customization">Easy Customization Tools</h3>
<p>Lorem ipsum.</p>
<h2 id="support">Need help? Get in touch</h2>
<p>Lorem ipsum.</p>
<!-- contact form -->
It is important to note that even if it makes sense to do so, technically you are not required to put the Table of Contents section at the top of your pages.
It also doesn’t matter which HTML tag has the id="" attribute that you want to jump to. You are not limited just to headings.
Just remember that the same ID value can be used only once on the same page.
How to use Anchor Links in the WordPress Block Editor (Gutenberg)
The modern WordPress Block Editor (Gutenberg) makes it very easy to create a Table of Contents section with anchor links.
You can do it using the HTML Anchor field in the Advanced tab in the Block panel. Simply select the block that should be the anchor and enter a valid ID for it. Just like before, remember the proper syntax (no empty spaces).
After you have defined your anchors, it is time to create the anchor links.
Select the text or element that should serve as your link. In this case, it is a list item in a List block. Click on the chain icon to open the Add Link window.
Enter the ID that was previously defined in the HTML Anchor field. Don’t forget to add the hash (#) character at the beginning. Press Enter or click on the button highlighted in the screenshot.
Congratulations! You now have a functional anchor link. But we’re not finished yet.
I recommend that you continue reading about the SEO benefits of anchor links and how to enable smooth scrolling for page jumps with CSS.
How to use Anchor Links in the WordPress Classic Editor
If you are still using the Classic Editor, then the easiest way is to switch to Text Mode, add the HTML anchor links and then switch back to Visual Mode.
If you are new to HTML, make sure to pay extra attention to the correct syntax of HTML tag attributes. Don’t forget to wrap the IDs with ="".
What are the SEO Benefits of Anchor Links?
When used correctly, this is how a page with anchor links is displayed in Google search results:
As always with Google, there are no guarantees that your Anchor Links will be used when displaying your content in search result pages (emphasis mine):
The new in-snippet links only appear for relevant queries, so you won’t see it on the results all the time, only when we think that a link to a section would be highly useful for a particular query.
PRO Tip: Smooth Page Jumps with just 1 line of CSS
When clicking on a page jump link, browsers tend to instantly scroll to that section of the page. This sudden jump is a bit extreme for some users.
In the not-so distant past, web developers had to implement some JavaScript code to make these scroll jumps smooth and less distracting. Fortunately for us, JavaScript is no longer needed. Modern CSS can handle it with a single line of code.
html { scroll-behavior: smooth; }That’s all it takes. Seriously!
All my WordPress themes already have this line of CSS. If your theme has not implemented it yet, then you can easily do it yourself. The quickest and easiest way is to go to your WordPress dashboard, then navigate to Appearance > Customize > Additional CSS.
Copy the CSS line from above and paste it in the Additional CSS tab. Click the Publish button and it’s done. Make sure that the button actually says “Publish” and not “Save Draft”.
Browser Compatibility for scroll-behavior
You should expect this to work in all modern browsers. Hopefully we can stop worrying about backward compatibility with Internet Explorer.
Source: https://developer.mozilla.org/
Common Problems
If you are having problems implementing anchor links, then the first thing that you should check is the correct usage of the id="" and href="" values.
The HTML tag that is used as a named page section should contain the ID attribute with a valid value. If using more than one word, use dashes or underscores, spaces are not allowed.
The anchor tag that serves as a jump trigger should have the href="" attribute, with the hash (#) character before the text value.
These are all examples of valid code:
<a href="#section-name">Click to find out why we are the best!</a>
<a href="#important-chart">Jump to important chart</a>
<a href="#why-our-company-best">Click to find out why we are the best!</a>
<a href="#get-in-touch">Contact us for details</a>
...
<h2 id="section-name">Why our company is the best</h2>
<img id="important-chart" src="" width="" height="" alt="" />
<div id="why-our-company-best">
<h3>Why our company is the best</h3>
<p>Lorem ipsum.</p>
</div>
<form id="get-in-touch"></form>Will NOT work with anchor links:
<h2 id="section name">Why our company is the best</h2>
<h3 name="why-our-company-best">Why our company is the best</h3>
In Conclusion
This is a rare occasion when a SEO principle is actually beneficial to the user experience.
- Content length requirements leads to a lot of superficial, low-value content, just to stretch that word count;
- Keyword stuffing dumbed everything down;
- Image alternative text attributes often have the wrong values;
- etc.
But page jump links, when implemented correctly, make pages look so much better. And if in the process you get more real estate in search result pages, then that’s just an added bonus.
But that’s just what I think.
I would love to hear what you think about anchor links and table of contents sections. Love them or hate them? And are they here to stay? The comments section is open.
1 Comment
A fine tutorial on my beloved anchor links. I find them as versatile as they are simple to implement. One thing that sometimes gives me a headache is the offset that pushes the target content up and out of view. e.g. when I link to an h2-heading farther down the page, this heading often would be out of view, especially when using a sticky header. Maybe you have some kind of trick here that you could share.
Thanks and keep up the interesting work!