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:
<html>
<head>
<!-- Try JavaScript first -->
<script type="text/javascript">
window.location = "{{ url }}";
</script>
<!-- If JavaScript is disabled or not supported, kick it old-school -->
<noscript>
<meta http-equiv="refresh" content="0; url={{ url }}">
</noscript>
</head>
<body>
<!-- If their browser is super-old, just give them a link to click -->
<p>
This page has moved. If your browser hasn't redirected you already,
<a href="{{ url }}">click here</a>.
</p>
</body>
</html>