How to create help center anchor links that don't break

Wrong or broken anchor links are frustrating for users. There are simple ways to avoid that by setting up your anchor links correctly.

Anchor links are an integral part of online content. They are used to link to specific article sections so users can quickly jump to the content they are interested in. The most obvious way to create anchor links is to select the heading or text you want to link to and convert it into an anchor. Typically, this type of URL will look something like this:

https://www.example.com/article/abc#this-is-an-anchor

However, anchor links formatted in this way are the most sensitive to change and therefore will break as the content changes. In the following sections, we'll show you different ways to create anchor links along with their pros and cons.

Option 1: Add a non-text anchor

When creating anchor links, you can set the anchor to be a line or symbol above or below the text, instead of the text itself. This practice prevents the anchor link from breaking even if the text changes. If you want to update the article, you can copy and paste the link to the updated, relevant section.

Who uses this: HubSpot

HubSpot offers a knowledge base software where you can create anchor lines using the HTML editor. These elements won’t get affected by heading and text changes. See the details here.

HubSpot screenshot

Option 2: Define an anchor ID

If you prefer to use the text as the anchor, it’s best to set an ID so that the anchor link won’t break even if the text changes.

Who uses this: Google Docs

On Google Docs, you can select a text and add a Bookmark. It’s the same thing, simply Google doesn’t use the term anchor. The link that gets generated ends with an anchor ID, for example:

https://docs.google.com/document/abc#bookmark=id.799spd

Even if you change the linked text, the ID remains the same and this guarantees that any links connected to that bookmark will not break.

Screenshot from Google Docs

Who uses this: HelpScout

On HelpScout, you need to manually switch to the HTML editor and add the text ID you’ll use as an anchor. For example, if you want to link to an H3 heading, you need to write it as shown below. See the details here.

<h3 id="welcome">Welcome to our website</h3>

Once you’ve set the ID, you can link to it in the following way:

Screenshot from HelpScout


Related topics
Author