Link to the most relevant page on a site. Link to the most relevant heading on a page.Google developer documentation style guide
Often, I would have liked to direct my readers to a specific part of an article. For instance, a textbox (on a specific topic) buried within a lengthy piece. While linking to the relevant article was straightforward (the first part of the above quote), I couldn’t easily link to the specific textbox within that article. This limitation forced me to provide convoluted directions like “the textbox entitled BLABLA at the end of the article,” leading to frustration for both me and my readers. Would they even bother to find that hidden textbox? The worst part is that I knew the problem and the solution: anchor links.
An anchor link is a link that takes you to a specific part of a webpage. With anchor links, you can quickly direct readers to specific content (e.g., my buried textbox), allowing them to find the exact information they need without sifting through hundreds—or thousands—of words. So, what was holding me back from using them?
In fact, I already use this method for my footnotes. If you follow this blog, you’ve likely noticed that my numbered notes link to the specific footnote (with a link in the footnote back to the main article). This minimizes scrolling by allowing visitors to jump directly to the content they want (and back to their reading). So, why not apply the same approach to my textbox?
As you may know, especially if you’ve read my previous articles, for hyperlinks to work, you must specify their destination or URL (in the href attribute). This is the standard linking scenario when you’re linking to a page. However, to link to a specific piece of content (the anchor) within a page, you must assign that anchor element a unique ID so the anchor link has a location to jump to.
The missing ingredient: you need to add an ID to the element you want your anchor link to target.
That’s it, to create an anchor link, you first need to set an anchor. My textbox (in the example above), or any of my headings, lacked this crucial element! Adding this missing piece is the task I listed in my Blog post housekeeping series, and it’s the focus of this article.
About anchor links
Traditional hyperlinks send users to a page while anchor links send users to a specific section of a page. Anchor links can link to a section on the same page or a section on a different page. But it seems the former is more prevalent.Christopher Morris
Anchor links are used as a navigational tool on websites. By clicking on an anchor link, the reader is automatically brought to the section of the page that the link corresponds to. Typically, anchor links (also known as jump links) are used within a page to point to a specific section on that same page. I’ve already mentioned the footnote use case, but the most typical example is a table of contents (ToC).
I don’t have a ToC on this article or my blog yet 1, but you might have encountered them on other sites. Each item in the ToC is an anchor link that, when clicked, takes the reader directly to the corresponding section within the document. This greatly enhances navigation, especially for long-form content, by allowing readers to quickly jump to the sections they are most interested in.
However, anchor links go beyond this jump links use case; their application is not limited to navigation within a page. An anchor link can indeed be used to link to a specific section of another page, which is the main point of this article.
Benefits of using anchor links
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.Brian Jackson
One of the primary benefits of anchor links is their ability to streamline the user experience by improving navigation. In long-form content, anchor links act as a powerful navigational tool, providing direct paths to specific content without having to scroll through the entire page. For instance, I use anchor links in my footnotes to connect in-text references to detailed notes and vice versa, streamlining access to additional information without interrupting the main text flow. Another common example is “back to top” links, which enable users to quickly return to the top of a page, making it easier to navigate lengthy articles or documents. These anchor link examples facilitate smoother navigation and keep users engaged by providing a seamless browsing experience.
In the same vein, a ToC allows readers to jump directly to different sections of a long document, saving them the hassle of scrolling through extensive content. However, a ToC offers numerous advantages beyond improved navigation. First, it provides readers with a quick overview of your article’s structure, allowing them to gauge the scope and main topics at a glance. This is particularly beneficial in cases where readers seek specific information. This overview can reduce bounce rates by helping users find the sections they are interested in more efficiently. By engaging users more effectively, a well-implemented ToC enhances the user experience by minimizing the effort required to navigate through the content, thereby increasing overall reader satisfaction.
Anchor links are not limited to within-page navigation. Adding IDs to your headers, or any elements for that matter, enables you to share direct links to a specific area on another page—the main point of this article. This functionality allows you to guide readers directly to relevant content across your website, enhancing their journey and ensuring they find the information they need quickly and efficiently. My textbox example from the introduction demonstrates this benefit clearly; not having anchor links made both my life and the experience of my readers miserable.
This feature—adding IDs to your headers—is invisible to the reader.
Another significant advantage of anchor links is their potential impact on SEO. By equipping your headers with anchors, other sites can link directly to specific pieces of content on your page, which can enhance your link-building strategy and increase the likelihood of gaining backlinks. Conversely, you can link to specific content on other websites more effectively if they have proper anchors set up.
Bonus: When Google finds that an internal anchor link is helpful to display to searchers, they may include popular anchor links in the search snippet. This provides visitors with more information when deciding whether to view your article or web page.
“You’ve mentioned the pros; what about the cons?”
“The typical cons mentioned by others is that anchor links might reduce the average time visitors spend on your site because they can skip directly to the content they want instead of reading the entire article.”
“But this applies only to ToC. Besides, isn’t that a disadvantage from an SEO perspective?”
“Yes, from an SEO standpoint, it might seem like a disadvantage. However, my main focus is on providing the best possible experience for my readers. If they can quickly find the information they’re looking for, they’re more likely to trust my content and return in the future.”
“That makes sense. But what about your specific use case?”
“Well, the real challenge I faced was that my headers didn’t have IDs, which meant I couldn’t use anchor links effectively. The lack of IDs in my headers was indeed a significant roadblock that I have to address. This is actually the whole point of this post.”
“That does sound frustrating. Why didn’t your headers have IDs?”
“Read on, I’ll explain later…”
The anatomy of an anchor link
As alluded to in the introduction, anchor links have two components: an anchor (the missing part in my equation) and a link. Anchor links work by linking to a specific HTML element that has an ID attribute assigned to it. You can link to a heading, section, or other content block by targeting its unique ID, but first, you need to set an anchor. Without going too deep (the techies will come later), let’s look at what this means in terms of HTML with a heading example:
Before:
<h2>Time and Tide wait for none</h2>
After:
<h2 id="time-and-tide">Time and Tide wait for none</h2>Once the ID is in place, you create an anchor link:
You can jump ahead to my <a href="#time-and-tide">Time and Tide wait for none</a> section. The secret ingredient: the pound sign “#”
Now, this example works when the destination to which it should be linked is on the same page as the link. Clicking this link will automatically scroll the page to bring the anchor tag into view. However, if you wanted to add an anchor link to a specific section of a different page, you would need to include the URL of the page before the anchor ID as follows:
You might read my thoughts on <a href="https://blog.cogitactive.com/time-management/#time-and-tide">Time and Tide wait for none</a> that I published in a previous post.- Fragment identifier
Some URIs refer to a location within a resource. This kind of URI ends with “#” followed by an anchor identifier (called the fragment identifier).
WordPress auto anchor generation
In some content management systems, anchors are automatically created for headings. Believe it or not, this was the case—for a limited period, though—in WordPress as well.
Note: For content published on wordpress.org, WordPress may automatically create a link target for headings by default.
The ability to auto-generate the ID of a heading is incredibly useful, and I appreciated this functionality introduced 2 with WordPress 5.9. For a short period, I indeed observed a change in the code of my headers:
Before
<!-- wp:heading -->
<h2>Time and Tide wait for none</h2>
<!-- /wp:heading -->
After
<!-- wp:heading -->
<h2 id="the-no-brainers">The no-brainers</h2>
<!-- /wp:heading -->However, not everyone appreciated this “auto-generate ID” feature as I did. Here are some potential issues I considered (before starting my investigation):
- Breaking Existing Links: If the anchor for the heading is generated automatically, it changes when you revise the heading, breaking existing links.
- Preference for Custom Anchors: People might prefer to add a custom anchor to a heading, for instance, an anchor that’s shorter than the automatically generated anchor.
However, the main complaint was about incompatibility issues with ToC plugins and the fact that the anchor cannot be deleted. Now, there were also (real) problems linked to headings in both Latin (e.g., German) and non-Latin languages, with most issues being reported with the latter. Not to mention other bugs, though these could potentially have been fixed over time.
This functionality should be optional. I don’t see any real benefit to forcing anchors on all headings automatically – it’s very easy for conflicts to occur on short headings and very messy on long headings.John Daigneault
The fix to make this feature opt-in should have shipped with WordPress 5.9.1. Then it was postponed to WordPress 6.0… However, instead of making this feature optional 3, it appears that George Mamadashvili (Mamaduka) ended up making this feature opt-out by default. As of today, to the best of my knowledge, the only fix is a code snippet to place in functions.php:
add_filter( 'block_editor_settings_all', function( $editor_settings, $editor_context ) {
$editor_settings['generateAnchors'] = true;
return $editor_settings;
}, 10, 2 );This post is not about turning this feature back on; for now, I have decided to add the ID manually. First, in doing so, I can use custom anchors (remember: shorter than the automatically generated anchor). Second, I have the choice to add or not an anchor; with the snippet above, the HTML anchor cannot be removed. Accordingly, I have not pushed my investigations further, and I have not tested the above code myself either. Use it at your own risk! As for plugins, you know my philosophy; the less, the better…
To be continued…
1 One of the many things on my to-do list! ^
2 An educated guess because the only mention of this feature I could find on the release post was: add HTML anchors to your blocks to help users get around the page.
^
3 In the WordPress 5.9.1 release’s documentation, the fix is listed as “PR38780 – Block Editor: Add settings to enable/disable auto anchor generation.” Settings to enable/disable. But as pointed out by shuttermuse (in the GitHub issue #38780), you have gone to opt-out by default. But where do I go to opt in? A feature I liked has been disabled, and I have looked in all the seemingly obvious places to re-enable it.
And George Mamadashvili, the person in charge of this issue, explained, Currently, there’s no UI to enable the feature back, but we’ll try to ship this in a future version of WordPress.
This was on February 22, 2022. ^