How To Redirect Old Pages In A Redesign – Tutorial

Posted on August 22, 2015

The problem

First, let’s start with the problem. You’re redesigning a client’s website and you’re about to launch. This means the old website goes offline and the new website takes its place. What happens if the current website is doing really well in search engine rankings? Is there a chance those rankings could take a hit?

Google, and other search engines for that matter, know what online content is authoritative and reliable, and part of its criteria is how long this content has been around.

So if fancybusinesswebsite.com has a page with tons of backlinks at fancybusinesswebsite.com/get-rich-quick.php and over the course of your redesign you re-create this page at fancybusinesswebsite.com/get-rich-quick/ all the links to the original URL will hit a 404. Not good. We want to preserve that reputation that the client has worked hard to earn for that particular page.

The solution

Knowing is half the battle. A lot of web designers don’t realize the effects that a changed URL structure can have on a website’s SEO and usability.

Luckily, this is a step near the end of a project that can be done in half an hour or less (depending on the size of the website of course). The particular case study I will walk you through took about half an hour.

I’ll clarify that this isn’t the only solution for this problem, but it works well for a simple project. If you are working on replacing an old site with URLs that look like this: http://www.fancybusinesswebsite.com/page.php?id=234, then you’ll need to use a different redirect solution that handles query strings. It can still be done in the .htaccess file but I won’t cover that here.

Digging in

The client in this case is a homebuilder here in Lethbridge, Canada. We designed a great new site, with much cleaner URLs and a more user friendly navigation. But rather than just swapping the new site and the old site, we needed to get into the .htaccess file.

You’ll need to know how to get into the .htaccess file in order to do this the same way as I did in this case. There are a few different ways depending on your host, but the .htaccess file will usually be located in the root folder of your website.

Once you’ve got that open with the text editor of your choice (I use Sublime Text 2), you’re ready to move to the next step.

Get a spreadsheet of pages

Fortunately my client had Google Analytics already setup and running so this made my life easy. I would always recommend getting analytics access as early as possible, before or at the start of a project to help identify current user behaviour and design the new site based off of that. But even if you didn’t get access to it at the start, it’s quite likely that your client has it installed already, so you’ll just need to get read permissions.

While this method won’t work in every case, I opted to get a list of all of the pages that were viewed over the last month, in order from most visits to fewest. Since it’s a website with under 100 pages, this works well. For websites with a lot of pages, you will likely need to fine tune this approach quite a bit.

I opted to get pages based on views from Google Analytics, as if there are pages on the website that haven’t gotten any views in the past month, we likely don’t care to redirect those.

Below you’ll see a screenshot for the Google Analytics page located at Behaviour > Site Content > All Pages.

Below this table, make sure to show as many rows as you can (in this case there are 69 pages). After increasing the number of rows, export this table as a CSV file (or Google Sheets, if you don’t have Excel installed on your computer).

Back to the htaccess file

After you’ve copied those cells, open up that .htaccess file. Paste the columns at the top. And we’re almost done!

So now that your file looks something like the screenshot below, we’ll need to create some 301 redirect rules so that any links pointing to the old URLs and any visitors that land on those pages end up at the right place.

Now you’ll just need to do some redundant copying and pasting to get the above looking like the screenshot below. Each should be in the format “Redirect 301 [old-relative-url] [new-absolute-url]”.

Note: The new URLs need to be the full absolute URL while the old ones don’t need the domain name at all. You’ll also want to make sure that the rewrite engine is on and that this code is placed before the WordPress code (if you’re using WordPress of course).

TEST TEST TEST

Now that you’ve updated your .htaccess file with a (nearly) complete list of your website’s pages, you’ll want to test the new configuration by visiting the old URLs and make sure the pages get redirected properly. If everything is working correctly, then Google will get the message from the 301 redirects that those pages have “Moved Permanently”.

Helpful Links

If you’d like to do some further reading or if your situation varies from this one, try some of the following resources:

Portfolio

About Grizzly Media

Grizzly Media is a Lethbridge web design company. We specialize in custom-designed projects with an eye for detail and exceptional customer service.

But we don't stop at web design. We've been in business since 2013 and we drive hundreds of great leads to our clients' phones and inboxes every year. Our mission is to help you achieve the goals you have for your business or organization in the best way possible. If the next step is to use your website to build a mailing list, expand your social media presence, or run an ad campaign to bring in new customers, we'd love to help you out. Get in touch for a free consultation today!

What Others Are Saying About Us

I needed a quick turn-around on digitalizing a logo, and my whole experience with Grizzly Media was very professional. The response to my query was quick, I got exactly what I needed, and the product was excellent. I definitely received high value for money spent, and will look forward to working with Brendan again.

Brendan was great, always looking to maximise the content to reach as many clients as possible. The Grizzly team dove into my business and was able to deliver a professional, concise, and timely website design.
Great Job!!

Building our website was a huge, very important task for our new non-profit organization, and more than a little overwhelming. Brendan of Grizzly Media honestly made it a very enjoyable experience. We were able to present our ideas to him in a very rough format, and he took those ideas and turned them into a professional, user-friendly website. He took the time to get to know and understand our organization and what we do, and in turn made our website much more appealing to our target demographic. It came in ahead of schedule, and better than we could have imagined. In the year and a half since, we have received excellent technical support, with Brendan going above and beyond.

I would wholeheartedly recommend Brendan and Grizzly Media to anyone looking for a website designer.