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).
After you’ve downloaded your CSV file or imported your file into Google sheets, you’ll need to copy the entire column of pages.
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:
- https://css-tricks.com/redirect-web-page/
- https://moz.com/learn/seo/redirection
- https://www.semrush.com/blog/redirects/
Grizzly Media is a Lethbridge web design company that specializes in custom designed sites and we love working with WordPress.