Use Anchor Links to Make Your Readers (and Search Engines) Happy

As a website owner, it’s up you to ensure that visitors can easily navigate through your content. You already know you can do this by linking to various pages on your site, but did you know that you can also direct visitors to a specific part of the same page using anchor links?

Also referred to as “jump links,” these navigational tools enable readers to “jump” to specific sections on a page. They provide a better experience for your visitors and may even improve your search engine optimization (SEO).

Faster navigation with anchor links

Whether you use them in a table of contents or throughout a lengthy tutorial, anchor links enable your visitors to get straight to what they’re looking for without having to scroll and scan the page.

Example anchor links in table of contents

Techniques like this help create a better, more intuitive experience for your visitors. And, as Search Engine Land points out, what’s good for user experience is typically good for SEO.

While you can use them to jump to any HTML element on a page, they’re most commonly used to link to headings. HTML heading tags help readers (and search engines) understand the structure of the content. When you use relevant keywords in your HTML headings and point to them with anchor links, you’re doing visitors and search engines a favor.

Creating anchor links with WordPress.com

There are two ways to add links on WordPress.com, neither of which involve directly editing the code.

Adding a text link in the visual editor

While those methods are effective for creating most hyperlinks, you’ll also need to use the WordPress.com HTML editor to link to a particular location on a page.

Let’s take a look at how to do that.

Step 1: Create the anchor destination

The anchor destination is the location on the page where you want a reader to jump to after clicking a link. This is done by adding an ID directly to the HTML element of the destination. In this example, we’ll add the ID to an H2 heading.

Adding an ID to an HTML element

  • Click the HTML tab from within your WordPress.com editor
  • Place your cursor within the opening H2 heading tag
  • Add a space, then type id=”name” and replace the word within the quotes with your preferred ID name. In this example, it looks like this: < h2 id=”dogs” >

As a rule of thumb, give your IDs a meaningful name and don’t include spaces.

Step 2: Create the anchor link

Once you’ve added the ID, the final step is to link it up. You can create this link using the same method you’d normally use to create a regular link.

  • Within the visual editor, highlight the text that should link to the anchor you created in the previous step.
  • Click the link icon in the toolbar and add your ID preceded by a “#” symbol in the URL field. For the example above, it would look like this: #dogs.
  • Click the Add Link button to set the anchor link. Then click Publish (or Update) to finalize the changes.

Adding an anchor link in WordPress.com

Anchors away

Have you written long articles in the past that could benefit from anchor links? With WordPress.com, you can retroactively edit a previously published post and add them. Your SEO ranking will thank you.

Thousands of small businesses and online stores call WordPress.com home.

Whether you’re looking to promote your business or share your story, we have a plan that’s right for you.

Create your own website