On-Page Anchor Text for Navigation


Ever wanted to jump from one section to another on the same webpage?

Using HTML anchor text to accomplish this neat same-page navigation trick really helps your readers get about your site.

↓Jump to bonus tip!↓

To accomplish this, you need to create two snippets of HTML:

  1. a target: ◎
  2. an anchor: ⚓
anchor and navigation
anchor text helps on-page navigation

The target, where you want to send your reader to, is often a header further down the page.  Meanwhile, the anchor usually fits in alongside your content at the top of the page.

Think of it as a navigation tool.

As a live, working example, the above “↓Jump to bonus tip↓” is one such anchor.

Go on, press it.  I won’t tell, promise.

The role’s reversed for “back to top” anchor text

The obvious exception to the anchor top/target down rule is the popular use of “back to top“. When using this ‘jump’ feature, you’d create the target at the top of the page.

Your target need not be in a header; however, in WordPress*, you do find that it remains stable a lot longer if you wrap your HTML in with some other content.

But, as long as the reader is brought “back to [the] top” of the item they’re reading, the anchor’s done its job.

That accompanying anchor – the “back to top” text that sends your reader to the top of the page – will appear as a normal hyperlink on your page.  However, in the dashboard, the words will be wrapped in your HTML code, as per the following examples.

*Tip!In WordPress, once you’ve successfully created the HTML code for the page and got the targets and anchors working, save a copy of the HTML to a notepad document.

WordPress notoriously “forgets” HTML when switching between ‘Visual’ (Rich Text) and ‘HTML’ (plain text) editing screens.

Here are two examples of same-page navigation:

1. – Jumping to a header further down the page:

  • <a href=”#Summary“>Jump to article summary</a>
    • <p>[…] Blurb</p>
  • <h4><a id=”Summary“>Article Summary</a></h4>
    • <p>[…] Summary Blurb</p>

The green syntax is your anchor/target HTML code. I’ve used a ‘h4‘ header to secure the target in example 1.  This is purely because a Summary is usually the last heading on a page.

The blue words are your identifiers for the anchor and its corresponding target.  You can name these any way you wish, as long as the names (minus the hashtag) match.

If you’re writing a lengthy article, it’s good practise to reference your matching target/anchor with the place in the document where the ‘jump’ will take your reader once they’ve clicked the anchor, or hyperlink.

The hashtag (#) that proceeds your anchor link id in the HTML code (in example 1: “Summary“) informs the server to find the corresponding target of the same name.

The content between > and < is the only text your reader sees on page, even when the HTML code is inserted into a header.  They will see the anchor as a hyperlink to click in the first instance, but will see no outward signs of the target once the page has jumped.

By naming the >anchor display text< similarly to the target header, it serves to identify that your reader has arrived at the right place after your webpage has jumped.

Therefore, in the example at the top of this page, the “↓Jump To Bonus Tip↓” text is the Anchor, whilst the header below, “Bonus Tip“, is the target.

2. – Back to top

  • <a id=”BTT“></a>
    • <p>[…] Blurb</p>
  • <p><a href=”#BTT“>Back To Top</a></p>

The same principal applies with “back to top“.  Only, the anchor to click is below the text, the target at the beginning of the page or text, wherever you decide ‘top’ is.

Bonus Tip:

You can have many anchors pointing to the same target on one page as is necessary.  For instance:

  • <p><a href=”#BTT”>Back To Top</a></p>

can appear after each section.  If you’re writing a review, for example, someone may only be interested in certain aspects.

If you create an index at the top of the page, a bullet-list of section headings each with their own anchor text will suffice, the reader can jump to that section without having to scroll through irrelevant content.

They can then click “back to top” after completing that section and choose the next topic of interest from the bullet-list.  If your article is academic with many sections, it may be beneficial to create a table of contents rather than a simple list.

One thing that you must remember is that the accompanying target, <a id=”BTT”></a> in example 2, must be unique.

If you insert that target into the table of contents/bullet-list header, you’ll ensure that the user only ever gets taken back to the one place in the document.

Try the live function of example 2, now:
↑Back To Top↑

Here, “↑Back To Top↑” is the anchor; the target, <a id=”BTT“></a>, is built into the H2 header and looks like this as a HTML line of code:

  • <h2><a id=”BTT“>Ever wanted to jump from one section to another on the same webpage?</a></h2>

Summary

Using HTML anchor text to “jump” on page is awesome for UX, navigation & SEO. ←Tweet This!

It can be a real boon for your readers if they’re perusing your FAQ Page, a novella or white paper where the sections between headers are expansive.

There are SEO benefits, too.  Remember, Google is looking to deliver the best user experience.

Even if the search giant’s not currently incorporating on-page anchor text in its algorithms, you can bet it will if it acknowledges the improvement to the UX.

Yes, it takes time to insert them, especially if a story’s going to run indefinitely. However, the more attempts you’re implementing to assist the user, the more you’ll be rewarded in SERPs.

Admittedly, on-page navigation anchors won’t get you to #1, page 1 in their own right.

But it’s still good practise to get into; as Stephan Hovnanian pointed out on Google+:

Furthermore, as featured articles become more prevalent in search results, the more people you’ll naturally entice back to your site.

Why?  Because anchors make your website extremely user-friendly.  This will be noticeable to Google via return visitors, clicks on screen and where it matters to you: on your bottom line!

Image courtesy of njaj / FreeDigitalPhotos.net

Advertisements

What do YOU think? Pray, tell...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s