How to Create a Custom 404 Page on Squarespace
Monday, November 9, 2009 at 6:47PMI just recently switched my blog from a self-hosted Graffiti installation to a completely managed solution on Squarespace. This is fantastic because it takes the job of patching and coding almost completely away. The downside is that some of the things I took for granted are unavailable. Like a custom 404 page. Why is this an issue? Well, if you are moving from one engine to another, they probably have different URLs for the same article. The last thing I want is for one of the rare visitors to my blog is some unhelpful error saying that the page could not be found. If you want an example of this happening, go to Squarespace’s own blog and look at this post from September 2008. Now click on the video link. Unless they have fixed it recently, you will see this:
The built in solution for this is called URL Shortcuts. The idea is that you plug in the old url and the new url into the configuration area, and anytime someone enters the old url, they are sent to the new one instead. Great…if you have 5 pages. But if you have been blogging for a while, then the job of entering those URLs is going to suck. Squarespace probably realizes this which is why you see that screenshot above. So what is the solution?
If you write to support, they will say that URL Shortcuts is the solution. But there is a better way. I found a post on their developer forum about customizing the Page Not Found form. The solution seemed pretty simple. Create a custom 404 page on your site, the paste this in the Extra Header Code section (I am pretty sure this means you need an Advanced level package from them):
<script type="text/javascript">
//Redirect from error page to your new custom error page
var redirectURL = "http://ENTER YOUR NEW ERROR PAGE URL HERE";
if(document.title == Squarespace.Constants.WEBSITE_TITLE + " - Page Not Found"){
location = redirectURL;
};
</script>
The only thing to change in that code is the page url. Actually, mine only worked when I put /custom404 rather than http://technovangelist.com/custom404.
On my Custom404 page, I put in some apologetic text explaining the situation, directing visitors to the search box. But I wanted to take it a bit further. I wanted to auto suggest a link for where they really intended to go. It might not work, but I figured it was good to try. On the Graffiti site, page urls were formatted as <site>/<category>/<page>. So I had some that were /technology/blah, and others that were /travel/blah. On the new site, all posts were under blog, so /blog/blah. What I needed was a way to convert all /travel/ and /technology/ to /blog/. I think this would be a good time to tell you that I don’t know anything about javascript other than how to spell Google.com.
A little searching on the net combined with some newbie code wrangling and I ended up with something like this:
prevurl = document.referrer;
document.write("<font size=-1><b>You came here from "+prevurl+"</b></font>");
So that told me where I came from. When I figured out how to manipulate text I got the rest:
if(prevurl.indexOf("technology")!=-1) {
newurl= prevurl.replace("technology","blog");
newurl = newurl.substr(0, newurl.length-1);
newurl = newurl +".html";
document.write("<font size=-1><b><br>I think you wanted <a href="+ newurl +">"+ newurl +"</a></b></font>"); }
That combined with my apology was a pretty good first step. Then tonight I realized there was a problem. I looked at my Woopra stats and saw that /custom404 was one of my more popular pages. I couldn’t quickly see which page caused the problem. Woopra shows the page title, which was now “Technovangelist – Custom404”. So I had to change that title. In order to change the title, I needed to pass the bad URL somehow. A query parameter seemed like a good choice. So I changed the line that initialized redirectURL to this.
var redirectURL = "/custom404?ref="+location.href;
That got me the all the info I needed. Perhaps too much information. Now to tweak the title. I headed back to the Extra Header Code in Website Settings. After that first If clause in the script, I added another:
else if (document.title == "Technovangelist - Custom404"){
document.title = "Technovangelist - 404 - "+location.href;
This is good, but the url in Woopra is now really long. So another edit got me this:
else if (document.title == "Technovangelist - Custom404"){
document.title = "Technovangelist - 404 - "+location.href.substring(67); };
Why is 67 in there? Well, I am sure there is a cooler way, but there are 67 letters in the URL before the unique part of the url. I want to see Technovangelist – 404 - /technology/badsite, not the way too long Technovangelist – 404 – http://technovangelist.com/Custom404?http://technovangelist.com/technology/badsite.
I then added a search box to the custom404 page just in case my guess didn’t work, but I think it’s a good first step. Want to try it? Go to http://technovangelist.com/technology/time-to-move-away-from-graffiti/ and see the custom 404 page that comes up. Now click the link that I suggested. In Woopra I will see something like this:
I am very happy with this solution. Would have been easier I think to be able to override a 404 page, but this will do. Any thoughts on how I can improve this approach??? Let me know in the comments.
