URL Redirect Work-Around for WordPress.com

Summary: Redirect specific blog postings from your old blog to the respective page on your new WordPress.com blog. This covers how and when you can use this URL Redirection work-around for WordPress.com.

Downloads: URLRedirect.html template file (zip)

I recently relocated my blog to WordPress.com. And I must say, I have been very happy with what WordPress.org and WordPress.com have to offer. I believe WordPress is without question the best, most complete free blogging software available. For the blog author, WordPress provides a wide range of management, statistics, themes, and more. For the reader, WordPress can be consumed on a variety of devices with ease like the personal computer, mobile devices like iPhone and iPod Touch, and the newest form factor – iPad. WordPress has delivered everything I have wanted and more – with one exception… URL Redirection.

Anyone creating a blog for the first time or seasoned bloggers who have no need to move existing content (blog postings) from their old blog will not need URL redirection. But for those who are moving content from their old blog to a new blog on WordPress, and have their own domain name, URL Redirection would provide a better, more seamless browsing experience for readers.

We’ve all been there, clicking on a search result link expecting to find an article only to receive the “Not Found, Error 404” page instead. This is frustrating to say the least. After a bit of searching it is clear that WordPress does not support URL Redirection. However, I have created a work-around for WordPress.com bloggers to allow their readers to find (via redirect) an old article URL that has been relocated to their new WordPress.com blog.

Overview of the URL Redirect Work-Around

I admit, this “work-around” is not automatic, which would be best; but it does work. And, it’s an easy (and not very technical) way to redirect a user to the correct page – that WordPress.com will allow. In short, WordPress.com does not allow bloggers to use JavaScript, and I fully understand why. I have no complaints about that since WordPress.com is a shared hosting environment. But a simple bit of JavaScript is all that is needed to address this issue.

Domain Redirection

First, lets cover exactly what domain redirection (not URL redirection) is. Using the WordPress “domain redirection” feature only addresses half the solution to a complete redirection experience for the user. As I mentioned before this is not ideal, but this is what WordPress.com provides using their “domain redirection”. With domain redirection, when a user/reader clicks on a link/URL pointing to your old blog (for example: http://www.myoldblog.com/page-x), the domain redirection tells the user’s browser to use your new domain name instead and “redirects” the user to the new domain (for example: http://www.mynewblog.com/page-x). The reality is that this domain redirection is really defined at your domain DNS (Domain Name Service) host – the network company where information about your domain name is defined and managed. Your DNS host (GoDaddy and Network Solutions are two popular companies) is where you define/configure the IP address for the server where your blog is hosted/located, which in this case the IP address would be whatever WordPress.com says to use for their severs.

What WordPress.com is doing when you purchase their Domain Redirection feature (along with the annual fee) is nothing more than telling their WordPress.com servers to accept any incoming browser request that uses your new/custom domain name and display your blog on WordPress.com. So, Domain Redirection gets the reader to your new blog – but not to the correct page. Instead, what the reader will get is the “Not Found, Error 404” page. Yes, this does redirect the reader to your new blog, but not to the information or page you or the reader would like. This is completely useless to the reader, and frustrating for the blog owner.

To summarize, Domain Redirection requires two steps:
1 – Configure your domain name at your DNS host to point to the WordPress.com blog server(s).
2 – Configure your blog server to accept and display your blog when a user/browser uses your new domain name.

Before I cover how implement this, I first need to talk about what the user will experience using this work-around.

What is the user experience?

When a reader clicks on a link that is pointing to an article on my old blog, the reader is automatically redirected to a “Not Found, Error 404” page on my new WordPress.com blog. Here is a full screen snapshot of what the “Not Found, Error 404” page looks like. You’ll notice my “Redirect now” link off to the right, which I’ll talk about in a moment.

image

On the right column of my blog you’ll notice a section titled “Getting ‘Not Found, Error 404’?” like the image below. If the user clicks the “Redirect now” link they will be redirected to the correct link on my new WordPress.com blog.

image

When the reader encounters the “Not Found, Error 404” page, hopefully the reader sees the “Getting ‘Not Found, Error 404’?” widget on the right side of my blog. So far, indications are good that readers are seeing and using this link. The number of clicks to this “Redirect now” link are increasing daily.

Remember, the easier it is for readers to find what they are looking for on your blog, the more likely they will bookmark, share, or even link to your blog from their blog; which in turn increases your blog’s search engine rating, and increases traffic to your site.

How Does It Work

When the user clicks on the “Redirect now” link, an HTML page is loaded that attempts to identify what URL the reader is looking for, and then it redirects their browser to that page. This Redirect.html file must be stored (hosted) somewhere external to WordPress.com.

I use Dropbox.com to store my HTML file. It’s free and makes it very easy to edit the file locally and save it to the server for testing. This is because Dropbox.com automatically syncs any changes to the Dropbox.com server.

When the Redirect.HTML page is loaded, it executes a small bit of JavaScript in the readers web browser. The JavaScript inspects the URL (address) currently in the reader’s web browser, which is the URL (link) the reader clicked to get to your blog. Chances are the old URL contains enough information (most likely the end portion of the URL) to identify what article the user is looking for. Getting Google, Bing, Yahoo, and every other blog around the world to correct their links to my blog is simply not an option, and it shouldn’t have to be.

I understand and agree that this is not the optimal solution. The optimal solution will have to be implemented as a feature in the WordPress software. For those that host their own WordPress server, they can build (modify) this directly into their “Not Found” page and redirect the reader automatically, without the reader having to click anything. However, for those who use WordPress.com, this will give your readers a second chance to find the article they were originally aiming for.

WallAndBeaverCleaver

Wally: Golly, Beaver. Wouldn’t it be swell if WordPress.com provided bloggers the ability to map URL Redirects?

Beaver: Gosh, Wally. That would make WordPress.com the best place to host a blog in the whole wide world!

Please excuse my sorry attempt at humor. :)

A Quick Demonstration

Here is a quick demonstration on how the URL Redirect works on my WordPress.com blog. Below is a URL from my old blog (www.crsw.com). Since I have configured a “domain redirection” for my “www.crsw.com” domain, it will connect to my new blog (blog.crsw.com) on WordPress.com. Click on the link below to open a new window/tab to demonstrate. (This simulates an old link similar to that found on someone elses blog or in search results from Bing or Google.)

http://www.crsw.com/mark/Lists/Posts/Post.aspx?ID=42

You will get the “Not Found, Error 404” page. The browser was redirected to the “Not Found, Error 404” page because my WordPress.com blog does not have a page at “…/Posts/Post.aspx?ID=42”. You will notice that even though the URL you clicked on started with “www.crsw.com”, your browser URL/address now shows the URL starts with “blog.crsw.com”. So the domain name has been correctly redirected to “blog.crsw.com”, but the rest of the URL is still wrong and points to a non-existing page (Post.aspx). The URL in your demonstration browser should now look like this:

http://blog.crsw.com/mark/Lists/Posts/Post.aspx?ID=42

So, the “domain” redirection is working correctly, but the full URL Redirection does not happen and will not happen automatically since URL Redirection is not supported on WordPress.com. The new location for this article on my new WordPress.com blog is now located at the “I’m mentioned (twice)…” link below. What we need is to somehow tell WordPress.com or the web browser that when a reader tries to browse to my blog and the URL contains a unique value of “ID=42”, then automatically redirect the reader to the URL below.

Since we cannot automatically redirect the user, we must ask the user to click on a link, that will in-turn redirect the user to the following page. So, now if you click the “Redirect now” link on the right side of the “Not Found, Error 404” page you got earlier, you should be redirected to the following page.

How To Implement This On Your Blog

The great thing about this work-around is – it’s pretty easy to implement and requires very little technical knowledge! If you can blog, chances are you can do this. Gathering your old URLs will be 90% of the effort.

Here is an overview of what is required:

  1. Gather a list the URLs you want to map from your old blog along with the new URLs on your WordPress.com blog. Remember, your old blog does not need to exist. More on that below.
  2. Redirect your custom domain to WordPress.com, and configure your custom domain on WordPress.com. There is a nominal annual fee. Read more about it.
  3. Create your custom Redirect.html page. I have a template for you to use in the download section of this article. This HTML file defines your old-to-new URL mappings.
  4. Place a “Text” widget on your blog containing your “Redirect now” link.

1 – Gathering a list of old and new URLs

If your old blog is still up and running, you can easily obtain the old URLs. For those that do not have their old blog running, you can probably obtain the old URLs from Google and Bing. I suggest you check both. You do this by running a search on both Bing and Google that limit the results to only your domain. You perform a search on both search engines for: “site:yourdomain.com”. This will list all the results in the search engine that point to your domain. Many of these will likely be old URLs. Gather all the URLs you want to redirect listing the old URL and the new URL next to each other. When your list is complete, you will have completed about 90% of the work effort.

2 – Redirecting your custom domain to WordPress.com

For this step I ask that you refer to WordPress.com online help for custom domains (Read more about it.), and WordPress.com support.

3 – Create your custom Redirect.html file

The Redirect.html page is very basic HTML page. Most of the content in this page is the JavaScript that performs the redirection. The only thing that must be modified is the LoadRedirects function, and a section at the very end of the file. Be sure you don’t change anything else. The LoadRedirects function is where you define your URL Redirect mappings. Each redirect mapping is defined by a AddRedirect statement.

The AddRedirect statement has two parameters. The first parameter defines the URL (unique segment or portion) found in the old URL. This does not need to be the full address of the URL. It only needs to be something unique to that old URL. In my case, the end of my old URLs contained a unique “ID=” value. The example below shows an AddRedirect where the old unique URL value is: “ID=42”. The second parameter defines the full URL to the post/page on your new WordPress.com blog. This must be a complete URL to new posting on WordPress. This is where the reader will be redirected to. Here are two sample AddRedirect statements.

this.AddRedirect("ID=42", “https://blog.crsw.com/2008/05/01/im-mentioned-twice-in-an-msdn-magazine-article-sweet/”);
this.AddRedirect("ID=4", “https://blog.crsw.com/2006/08/23/sharepoint-tcpip-ports-used/”);

One more important point. When sequencing your old URL segments/identifiers, be sure to place the more specific old URLs first. Using the example above, the “ID=42“ is defined before the statement containing “ID=4”. If “ID=4” is placed before “ID=42”, then the new URL defined with “ID=4” will always be used when the reader clicks a link with “ID=4”, or “ID=42”, or “ID=400”, or “ID=4123”, or any old URL containing “ID=4…”.

The very end of the Redirect.html file also needs to be modified to contain your domain name, and optionally a custom Not Found page URL of your choice.

// ************************************
 // MODIFY THIS STATEMENT to contain the your domain. This defines a
 // custom URL to return when a URL Redirect mapping is not defined.
 // This URL does not need to exists since the standard WordPress
 // "Not Found, Error 404" page will be displayed if it does not exist.
 // ************************************
 var mgr = new RedirectManager("http://YourDomain.com/RedirectNotFound", false);

4 – Place a “Redirect now” link on your blog

Place a Text widget near the top of your blog so that your “Redirect now” link is easily seen. You can copy this code below into your Text widget to create something similar to mine. Be sure you replace the href value with the full URL to your Redirect.html file. If you are using Dropbox.com you need “copy the public link” and paste that URL (link) to the href value.

I recently moved my blog to this site. So, if you get a <span style="color:#ff0000;">"Not Found, Error 404" message, chances are the post you are looking for is still here on my new blog.

* Click here to <span style=”color:#ff0000;”>http://dl.dropbox.com/u/NUMBERS/Redirect.html>Redirect now.

For Those Interested In More Detail…

For those of you interested in a more detailed explanation I have take the time to elaborate, and opine, on a bit more detail.

URL Redirection vs. Domain Redirection

Do not confuse “URL redirection” with “domain redirection”. WordPress does support “domain” redirection. If you have your own domain name (i.e. mydomain.com) or sub-domain name (i.e. myblog.mydomain.com), WordPress.com will allow you to configure your blog have its own domain, for a nominal annual fee. To be honest, most of this configuration is really done through your domain registrar to point your domain name to WordPress.com. But WordPress.com must also be configured so that it knows what WordPress.com blog to display to the reader when a custom domain name is used. This is still necessary, so Domain Redirection will still be used, but this does not entirely solve the problem of getting your reader to the correct article on your new WordPress.com blog. Instead they get hit a dead-end: “Not Found – Error 404”.

Unique URLs (Not Found – Error 404)

So, domain redirection does at least get the reader to the new web site on WordPress.com. This is all well and good, but… as most of you already know, each posting on your old blog has a unique URL (web address); which will almost certainly be different than the new URL for that same posting on your new WordPress.com blog.

So, WordPress has really done little to help redirect the reader. It will merely get them to your new blog and present them with the mostly annoying and useless “Not Found – Error 404” page. This is not a very nice user experience. We’ve all encountered this before. What do we end up doing? We skip this site and go to the next link in our search results. This is because none of us wants to waste time searching for something we aren’t even sure exists. This is a missed opportunity the blogger/author (and the blogging software) should address.

JavaScript Not Allowed

WordPress.com does not allow for any JavaScript, which is completely understandable for security (and support) reasons. There is no argument from me on this point.

Keep in mind, although WordPress.com does not allow JavaScript for bloggers, WordPress most certainly uses JavaScript to provide much of the rich administrative features in WordPress.

Advertisements