Redirecting anchor links on web pages

I’ve recently discovered that it’s not possible to do a server-side redirect for anchor links on web pages! The reason is that the anchor part of the URL (the part containing the “#” and anchor name) is not sent back to the server. Not ever!

This is what happened to me recently: I had a long document, presented in one long web page. I decided to split it into two pages. A number of the headings had IDs which act as anchor links, and we know that external documents link to those anchors. I could fix any incoming links in our own documents, but not in the unknown number of documents out there on the world wide web.

This is a prime case for a redirect, or so you’d think.

An example

Let’s say I have a page called “Ice Floes“, and  I have the following HTML in my document:

<h2 id="penguin_joke">Penguins are cool</h2>
<h3 id = "introduction">Introduction</h3>
Did you hear the one about the penguins on an ice floe?
<h3 id="story">The story</h3>
<p>There are two penguins on an ice floe, 
drifting north into warmer waters. 
These penguins are very fond of each other, 
but they don't speak English very well.
Suddenly, with a terrific crack, 
the ice floe splits in half, right between the penguins. 
As they begin drifting apart, one penguin 
sadly waves a flipper and calls out, 
"Chocolate milk!"</p>

It’s quite feasible that there’d be incoming links to this document, like this:

Read all about the 
<a href="http://example.com/icefloes#penguin_joke">cool penguins</a>.

That’s called an “anchor link” because it points to a specific anchor in the page. In this case, the anchor is a heading ID.

Now let’s say I want to move the penguins to a page all of their own, called “Penguins“. I’d like to redirect the relevant links to the new page. So, dear server, please redirect all links of this form:

http://example.com/icefloes#penguin_joke

To something like this:

http://example.com/penguins#joke

Or even redirecting to the top of the new page would do:

http://example.com/penguins

So, what’s the problem?

The server can only redirect the link at page level. It cannot redirect incoming anchor links, because it never sees the anchor part of the URL.

For a link like this:

http://example.com/icefloes#penguin_joke

The browser only sends the server this:

http://example.com/icefloes

That’s right! The browser removes the anchor, stores it, and then puts it back when it needs it. Huh, who’d a thunk it.

Is there a workaround?

In my case, I’m lucky because the original page will still be there. So I’ve left a heading in the page, with a textual explanation and a link for people to click. Manual redirection.

I’ve also added a bunch of dummy, empty <div> sections with IDs, to cater for all the subheadings that used to exist within the section. This will bring all relevant incoming links to the same part of the original page, and people can click through to get to the right place. Ugly, but at least the readers will find their way to the right place.

This is what the updated, minimised section would look like, on the original “Ice Floes” page:

<h2 id="penguins">Penguins</h2>
<div id="penguin_joke"></div>
<div id="introduction"></div>
<div id="story"></div>
<p>Read all about penguins in the 
<a href="http://example.com/penguins">dedicated penguins document</a>.</p>

If I wanted to, I could also add explicit references to each section of the new page, but in my case that was too much text.

Client-side workarounds using JavaScript

If you can add JavaScript to your page, you can write your own redirects on the page. This question on Stack Overflow has some good answers.

Any more?

I hope this post is useful to someone who may run into the same problem as I did. If you have any more tips to share, I’d love to hear them.

A pretty flower from yesterday’s bush walk:

Redirecting anchor links

About Sarah Maddox

Technical writer, author and blogger in Sydney

Posted on 22 September 2013, in technical writing and tagged , , . Bookmark the permalink. 6 Comments.

  1. Thank you Sarah for the article on redirection of incoming links. A great little piece.

    A Purple flower🙂

    Deaf Dave.

  2. Hallo all

    The Geoist sent a suggestion via Twitter: Use location.hash as a good clean mechanism.

    I found this hint from Google about using location.hash: Using location.hash for navigation.

    A little more searching yielded this interesting post from Badass JavaScript, about HTML5 pushState: location.hash is dead. Long live HTML5 pushState!.

    As an aside: Why is this stuff so fascinating?😉

    Cheers
    Sarah

  3. Hi Sarah,

    It’s nice to see you writing about this type of redirection, since we recently described a related issue with AJAX navigation. The thing is that AJAX navigation uses the same anchors mechanism to avoid reloading the entire page, but making sure every page has a unique URL.

    However, this approach may cause issues for web crawlers when they index web pages. If you are interested, feel free to take a look at our blog post to learn more:
    http://clickhelp.co/community/2013/08/28/online-help-and-seo-part-5-ajax-navigation-and-hashbang/

    Have a good one,
    Alexander

  4. If I understand, I think I have the opposite question.

    Currently my site is set up like this, to make it easier for people to find what they are looking for, and so we can link directly to the appropriate content.
    Page 1: Master list of all locations, broken into 3 areas (/where)
    Page 2: Area 1 (/where/area1)
    Page 3: Area 2 (/where/area2)
    Page 4: Area 3 (/where/area3)

    I would like set it up like this, to make it easier for me to make updates, but maintain the ease for the user:
    Page 1: Master list of all locations, broken into 3 areas (/where), but using anchors #area1, #area2, and #area3

    I have the Redirection wordpress plugin (http://wordpress.org/plugins/redirection/) and I’d like to set it up so that the existing urls (/where/area1) will re-direct to (/where#area1). I can share the /where#area1 link going forward, I’m just concerned about anyone that might have saved the current links, and I don’t want them to break when I take the other pages down.

    Do you know if this is possible? Or is this the same issue that you mention above? I can’t figure out the correct settings in Redirection, but if I know it’s possible in general, I can keep trying or could look into other plugins that could handle this issue. I just don’t want to keep trying if it’s something that could never be feasible in any circumstance. Thanks in advance for your help

Leave a Reply

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

%d bloggers like this: