Reliably Redirecting With HTML

When redesigning my website and re-writing my static site generator Posty, I wanted to refactor the URLs for my blog posts but not leave anyone hanging when they had an old URL bookmarked. Since my website could be hosted somewhere that I don't have control over the webserver config, I had to figure out how to do this with HTML.

My goals were:

  • Surprise users as little as possible
  • Don't tank my site's search engine ranking
  • Reliably handle as many weirdo browsers as possible

After some research, it seemed like a Javascript redirect was the safest since at least GoogleBot passes PageRank to the destination page.

So here's what I came up with:

        <!-- Try JavaScript first -->
        <script type="text/javascript">
            window.location = "{{ url }}";

        <!-- If JavaScript is disabled or not supported, kick it old-school -->
            <meta http-equiv="refresh" content="0; url={{ url }}">
        <!-- If their browser is super-old, just give them a link to click -->
            This page has moved. If your browser hasn't redirected you already,
            <a href="{{ url }}">click here</a>.