Fixing dead links
With the migration from Scriptogr.am to Blot.im the URLs for my posts changed a little.
One due too the difference between to two services (/post/) and the other because of myself (didn’t want to include date reference in the permalink any more).
| Blogging service | URL format |
|---|---|
| Scriptogr.am | http://sharedmemorydump.net/post/yyyy-mm-dd-permalink |
| Blot.im | http://sharedmemorydump.net/permalink |
When I had a look at the information provided by Google Analytics there are still a lot of visits to my blog using the old (and now incorrect) URLs.
Google Analytics
Everyone visiting a old URL will be automatically redirected to the error view. Although it being correct it is now exactly what I would like to be happening. For the visitors using the old URLs I would like them to be redirected to the corresponding page using the new format.
This method should cover roughly 80-90% of all the visits via the old URLs (some post have not been migrated and some have been renamed because of typos).
jQuery redirection
To reload using the new URL format the following steps are required
- Remove the unwanted part (
post/yyyy-mm-dd-) from document URL - Reload using the new URL only when the new URL differs from the original one
Based on these steps I have written the following piece of jQuery code. A regular expression is used to perform the search/replace of the unwanted part in the documents URL.
$(function(){
var url = $(location).attr('href').replace(/post\/[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])-/,'');
if ( $(location).attr('href') !== url ) {
$(location).attr('href',url);
}
});Updated version of error.html
Following it the updated version of the template file error.html including the new piece of jQuery code.
<!DOCTYPE html>
<html>
{{> head}}
<body>
{{> header}}
<div class="container">
<div class="main">
<h1>{{error.title}}</h1>
<p>Sorry, it seems like we have misplaced the chip, uhm article, you were looking for.
<img src="/public/404.png" alt="Misplaced chips" title="Misplaced chips"/>
</p>
<p>Please have a look at <a href="/archives" title="Archives">the archive</a> for other articles.</p>
{{> footer}}
</div>
</div>
<script type="text/javascript">
$(function(){
var url = $(location).attr('href').replace(/post\/[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])-/,'');
if ( $(location).attr('href') !== url ) {
$(location).attr('href',url);
}
});
</script>
</body>
</html>