Last week, I implemented three simultaneous significant changes to jeffblaylock.com. First, and most obviously, is the new, fluid, CSS-based design. Gone are the rigid tables and pixel-perfect alignments of page items. The other two changes are less visible but very important. The markup language has changed from .shtml to .php, a more powerful and flexible way to create web pages. The final change is a move to descriptive URLs. This blog entry will describe the steps I took to do the latter, as it’s one of the more daunting aspects of web site redesigns, especially if you’re pleased with the way the big search engines rank your content.
When I started using Movable Type in late 2003, I did very little upfront customization and essentially stuck with its then-default settings. One of these was the way web pages were named. Up until this week, my naming convention has been to number entries serially. So when I posted a photo of a fishhook cactus on April 3, 2004, the filename was “000510.shtml” because it was the 510th entry in the system. That’s hardly as useful a description as “fishhook_cactus” would be.
The good news is, it doesn’t take a lot of effort to switch to descriptive URLs. The bad news is, if you don’t do it right, you’ll have lots of messed up pages scattered across your web site.


Here’s what I wanted to accomplish. I wanted to convert this:

www.jeffblaylock.com/window/000510.shtml

to this:

www.jeffblaylock.com/window/2004/04/fishhook_cactus/index.php

While doing this, I want to make sure that visitors entering the site via search engines would seamlessly find the updated page, and browser robots would get the message that the old content had permanently moved. At the same time, convert all the pages to .php from .shtml and implement a wholly new design.

Backup Your Existing Site

Before you start monkeying around with publishing settings, page URLs, directory structures, .htaccess, and the like, back up your files, database, settings, and templates.

Create the New Pages

The first big step is to create the new pages reflecting the new design and file extension within the new directory structure.

  • Within the Movable Type interface, go to “Settings” and click on the “New Entry Defaults” tab. Set an appropriate basename length. The default is 15 characters; I changed it to 24, though it applies only to new entries. Existing entries remain at 15 (Conveniently, “fishhook cactus” is 15 characters in length.). The “basename” forms the descriptive part of the descriptive URL. Save any change made.
  • Click on the “Publishing” tab. Since I was changing markup languages, I changed the “File extension for archive files” to php from shtml. Then under archive mapping, I chose the following option: yyyy/mm/entry_basename/index.php. Other options are available.
  • Since I was updating my page design, I updated my individual entry archive template to the new design.
  • Rebuild the individual entry archives. For my photoblog, this took a little time. There are over 1,200 entries.

Now there are two complete sets of pages for all entries in the photoblog. At this point, website users are only able to access the old, serially numbered, .shtml files.

Bridge the Files: php to php

Going from .shtml to .php creates an extra headache. Had I just been using .php from the beginning, I could easily add a little code to instantly redirect from one to another, and it would contain the information search engines would need to update their links to my site. Likewise, if I had just changed from .shtml to .php and left the file structure alone (In other words, go from 000510.shtml to 000510.php), then that would’ve just required a one-line addition to my .htaccess file. I ended up doing both.

  • Go back to your blog’s settings page, and restore the “archive mapping” setting to the original, serially numbered method. You might find that the option to do this has vanished from the drop-down box. Don’t panic. Select “Custom” and enter “%e%x” without the quotes. These two codes return the ID number padded to six digits (000510) and the file extension preceded by a period (.php in this case). Why not restore to .shtml? Because this little redirection trick only works with .php. I’ll use another trick to go from .shtml to .php.
  • Go back to your individual entry archive template and copy the text, storing it safely as a text file. You will want it back in a few minutes. Once it is safely saved elsewhere, substitute the following for your template code:

    <?php
    Header ( “HTTP/1.1 301 Moved Permanently:);
    Header ( “Location: http://www.jeffblaylock.com/<$MTEntryDate format="%Y/$m"$><$MTEntryBasename$>/index.php”);
    ?>

    This will redirect visitors to the new page from a serially numbered .php page. The first line tells search engines that the document has moved permanently, allowing them to update how search engines catalog your site. The second line redirects visitors instantly to the new page, using Movable Type’s database to fill in the filename.

  • Rebuild your individual entry archives. You’ll now have a set of pages which do nothing except redirect to the new filenames.
  • Take the stored individual entry archive template and paste it back into the template box. Go back to the “archive mapping” tab in settings and restore it to the new settings. Rebuild your individual entry archives again. This ensures that all subsequent activity works off the new naming structure. Since all future entries will use the new structure, there’s no need to bridge the old naming structure to them.

Bridge the Files: shtml to php

The serially numbered php files redirect to the new files, but only from themselves. By itself, it won’t redirect visitors from the current serially numbered .shtml files (000510.shtml) to the sleek, new, descriptive-URL, .php files (2004/04/fishhook_cactus/index.php). The preceding steps redirect from (000510.php) to the new files. What’s needed is a bridge from 000510.shtml to 000510.php. It’s pretty simple, actually — just one line of code in one little file.

  • Open your .htaccess file in a text editor. It should reside in the root directory of your web site (/html/ in my case). You need to be careful with this file, as messing it up could cause your whole site to crash. Be sure to back it up before you start work on it.
  • Insert the following line of code at any reasonable place in the file:

    RedirectMatch 301 ^(.+)\.shtml$ $1.php

    I’m no genius when it comes to this, so I’ll admit right off that I got this line of code from the experts over at Mod_Rewrite Forums. It worked immediately. Basically, it substitutes .php for any request for a .shtml file. Thus, any request for an old file will be interpreted as a request for the .php file of the same name, which we already created to automatically forward to the new naming convention.

  • Save and upload your revised .htaccess.

Cleaning Up

Now the old files are linked to the new files, and the search engines are informed that files have moved. There is probably a better way to do this without the intermediate php files, but this way works, and that’s good enough for me. Once I was sure it was working, I deleted all the old .shtml files, as they would not be seen again. That’s right, they’re gone.
This process has successfully implemented a new look, a new naming convention, and a new file extension. Requests for the old .shtml file are immediately replaced with a request for a .php file, which in turn boomerangs the user to the new page, complete with its new name and new look.

Potentially related posts: