Oct 21 2015 0

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 AnalyticsGoogle 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

  1. Remove the unwanted part (post/yyyy-mm-dd-) from document URL
  2. 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.

1

$(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.

1

<!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>


Previous post
Blogging on the road With the recent move to Blot.im as my blogging platform it has rekindled my enjoyment for publishing something from time to time. I was going on a
Next post
Image alt and title attributes Most of the time I keep the information for the alt and title attributes of an image the same. For this reason I never specify the title information
This blog is powered by Blot