Site Redesign and SEO

Taking on a complete site redesign can be scary as hell from an SEO perspective, but if it is well planned, well tested, and well executed then you can reap huge rewards.  SEO is equally as important as usability and aesthetic appeal when redesigning your web site.  There is almost no better opportunity to fix SEO problems with an existing web site than when implementing a redesign. 

So if you have a pair of brass cajones and are confident in you skills then go for it!  If not then read on.  Hopefully by the end of the post you will have a much better idea of how to go about redesigning your web site with SEO in mind and what to expect along the way. 

SEO site review before your web site redesign

 Before beginning any work on your site redesign, I would suggest spending a significant amount of time performing an SEO site review of your existing web site.  Evaluate the current optimization of your site from every angle you can think of.  Make detailed notes about things you like and things you would like to change. 

Some things you should pay particular attention to include: 

• Organization of your site – Does it have the correct interlinking and navigation structures to make your web site easy to crawl and does it promote the proper flow of page rank and relevance around your site (yes… I said it!  “flow of relevance”… something about which most SEOs and webmasters NEVER think and something that is HUGE for Google rankings!) Are you linking to the most important pages from your global top navigation? Are you utilizing footer links properly?  Are you using breadcrumbs?
• URL canonicalization – Do you refer to each page on your site with a single canonical (preferred) URL?  Are you using query string parameters on URLs for tracking purposes again creating canonicalization issues?
• Keyword rich SEO friendly URLs – Do your pages have keyword rich SEO friend URLs? If so are you using the less desirable form where the keywords are simply crammed together like “MyKeywordRichPageName.html” instead of the preferred “my-keyword-rich-page-name.html”? Or are you using totally SEO unfriendly URL with query string parameters?
• Absolute or root relative links – Are all of your links on your site either absolute, fully-qualified URLs or root relative URLs (relative URLs that start with “/”)? Or are you using the often troublesome folder or page relative URLs in your hyperlinks that start with “./” or “../”?
• Lower case – Are all links on your site using lowercase URLs?
• <title> elements -  Does each page on your site target different well thought out keyword phrases in their <title> elements? 
• <h1>, <h2>, and possibly <h3> header elements – Does every page on your site have a single <h1> and preferably multiple <h2>s that all reinforce the targeted keyword phrase(s) from the <title> element?
• Content – Does the content on your page actually match the keyword phrase(s) in the <title> of the page?  Does it do this without sounding spammy?
• <meta name=“description”> elements – Does each page on your site have a good meta description that not only tells the user what the page is about but also starts with a call to action to promote higher click-thru-rates in the SERPs? 

The list goes on… Look at every freakin’ thing that you can think of from an SEO perspective.  

The above “short-list” should give you an idea of some of the on-page and on-site SEO characteristics of your existing site that you should check out in your site review prior to embarking on your redesign project. 

SEO baselines before your site redesign 

A web site redesign can have a drastic impact on your site’s rankings in the search engines and therefore the amount of organic traffic your site gets post redesign.  If done incorrectly, you can lose all existing rankings as a result of your site redesign project and essentially negate all previous SEO efforts.  If done correctly with SEO in mind, within a short period of going live with your redesign you can experience a huge boost in rankings and a surge in free traffic.  The difference in these two scenarios is determined by the amount of planning and testing that goes on prior to going live with the redesign. And you won’t have a clue whether you were successful or not without setting some baseline benchmarks prior to your web site redesign going live.

Below are some data gathering tips to help you prepare for your site redesign from an SEO perspective: 

• Crawl your site with Xenu or some other crawler to get a list of ALL existing URLs on your site, all 301 and 302 redirects currently in place on your site, as well as a list of all external URLs to which your site links.  

Xenu has the ability to export all of the information from its crawl to an Excel spreadsheet.  This information will be useful for many reasons later in the site redesign process.  The list will be used for implementing redirects to new URLs, removing “stacked” redirects (A -> redirects -> B -> redirects -> C), making sure appropriate outbound links to external sites are “nofollow”, and for testing. 

• Analyze your organic traffic by either looking at your analytics package or web server log. Determine exactly which keyword phrases are being used to find your URLs in the organic SERPs at the various engines.  Note also the amount of traffic (unique visitors, page views, page views per session, etc.) the site is getting prior to the redesign and pay special attention to those pages that really pull in the traffic. 

This will be crucial when you want to fine tune the on-page optimization of your URLs.  It will also help you determine when your site’s rankings have recovered from the “shock” of the redesign and whether redesigning the web site was a success or failure from an SEO perspective. 

• Be sure that you have been pulling ranking reports (typically once per week) at the various engines for the primary keyword phrases that you track.  I would set up an additional weekly ranking report that includes the various keywords phrases that you discovered by analyzing your organic traffic in the 2^nd bullet above.  

You will use these reports as baselines for pre-redesign and post-redesign ranking comparisons.  Again, they will help you determine when your site’s rankings have recovered from the “shock” of the redesign and whether the redesign was an SEO success. 

• If you have pay-per-click data then it too can be a source of useful information about what keyword phrases people are searching for and which phrases convert.

I cannot stress enough the importance of the preliminary work mentioned above if your site is of any significant size, has a significant number of backlinks, and/or gets any significant amount of organic traffic.  You will be paid back many times over in SEO benefits for having done so. 

SEO Decisions prior to redesign 

Now that you’re armed with all of this information about your site, WTH do you do with it?  Well, it’s time to spend some time absorbing it all, looking at it from various angles, reflecting on the current state of your site, and ultimately making some decisions about exactly what you want to “bite off” as part of your web site redesign.  

If there is anything you want to change about your site, I would recommend that you do it all at once as part of the redesign.  That way you only take the temporary hit to traffic and rankings just once.  Yes.  You heard me!  You ARE going to take a hit while the search engines absorb all of your changes. So if you have a seasonal site, you should schedule your site redesign to go live during the off-season so that you see minimal impact to traffic.  Don’t worry… The hit should be temporary – a few days, weeks, or even a month or two depending on the size of the site, how frequently your site is crawled, how many inbound links you have, how often the sites that link to you are crawled, and the extent of the changes that were part of your site redesign.  But the SEO gains WILL be well worth the pain and stress of the redesign in the end. 

You NEED to  document your decisions as you go as if this were a project for a client.  Document SEO goals as well as usability goals for the redesign, any issues that should arise and their resolution, and the various decisions you make along the way.  It’s almost inevitable that at some point you’ll look back and think, “And why did I decide to do that?” 

I urge you to utilize wire frames and mockups for each “type” of page (essentially each page template) even if they are drawn by hand.  Seeing your proposed site on paper complete with navigation and mocked up <h1>, <h2>s, content, etc. can be invaluable in working out details that affect usability and SEO prior to writing a line of code instead of depending on some developer or yourself to make the correct decision on the fly when you encounter them without thoroughly thinking through all of the options and consequences. 

I tend to start with the “big decisions” and then work my way down to the details.  Some of the major decision you should consider are as follows: 

• Site organization and interlinking of pages – Decide whether you’d like to change the organization of the pages on your redesigned site and/or the navigation between your pages.  

If your site is a traditional web site (not a blog) I’d highly recommend that you read up on theme pyramids.  Using theme pyramids is not a new idea, but it is a great way to organize sites.  Theme pyramids are a great way to control not only the flow of Page Rank (PR) around your site, but also the flow of relevance.  And we all know Google LOVES relevancy!  

Avoid using massive navigation menus with dropdowns and/or fly-out menus.  Instead have a top navigation with maybe 8-10 links to the most important sections of the new site.  Use an inverted ‘L’ menu system (i.e. a top navigation in combination with a context sensitive left navigation which changes as you click on top navigation menu options) as an alternative to dropdown or fly-out menu systems.  This is especially helpful for web site designs based on theme pyramids.  

Use breadcrumbs if possible.  They add to the usability of your site, and they are also helpful in reinforcing theme pyramids because they only link to parent, grandparent, great grandparent, etc. pages in the pyramid (i.e. they link “up” the pyramid). 

The whole idea behind theme pyramids is that you build pyramids of pages or silos on your site about particular topics.  Any page within a pyramid mainly links up to pages that are about the same subject, only more general and targeting more short-tail/head terms… or down to pages about the same subject, only more specific and targeting more long-tail phrases. This approach is very powerful since it promotes the interlinking of relevant pages and the “flow of relevancy” around the site.

Changing the organization of your pages and your interlinking strategy as part of your web site redesign can help a lot with your site’s search engine optimization. 

• URL structure – Decide whether you want to change your URL structure as part of the redesign.  

Sometimes you are forced to change URLs on your site as part of a redesign.  This is often true if you’re converting from an old server-side technology like PHP, ASP, or .net which required pages to have file extensions like .php, .asp, or .aspx, respectively, to a CMS that uses extensionless URLs.  

Perhaps  your old pages didn’t use word separators in page names (like ThisIsMyPage.html) or used the non-SEO friendly underscore (‘_’) character (like this_is_my_page.html), and you want to bite the bullet and convert your URLs so that you use the more SEO friendly hyphen (‘-‘) as the word separator. While I wouldn’t necessarily suggest changing your URLs to use hypens if this is the ONLY reason you’re changing your URLs.  But if your URLs are changing anyway then I would suggest converting to hyphens as a word separator if you’re not already using them.

If you change URLs of pages on your site, merge pages on your site, or delete pages on your site then you DEFINITELY want to implement 301 redirects as part of the redesign to send requests for the old URL to the new URL whose content most closely matches that of the old URL. I cannot stress how important this is from an SEO perspective.  It transfers credit for inbound links to the old URLs (and associated link text) over to the new URLs. 

Implementing SEO fixes with your redesign 

Once you know how the redesigned site is going to be organized, build out your new site based on the SEO and usability goals you have set and decisions you’ve made.  Make notes of all of the things that you change as you go.  You will use this list later to develop a testing checklist. 

Take the time to perform on-page SEO for every page on the redesigned web site.  On a page-by-page basis I would do the following optimizations: 

• Determine the targeted keyword phrase for the page.  The web analytics information that you gathered earlier is invaluable for this.  If a page on your site is already getting organic traffic from certain keyword phrases then that means it is likely already ranking well for those keywords.  This should give you strong clues as to what keyword phrase(s) the redesigned page should target.
• Set the <title> to the targeted keyword phrase(s). Take some time selecting the keyword phrase(s) to target and composing your <title> element.  It is VERY important.  Ideally each page should target a single keyword phrase, but a page can target 2 or 3 keyword phrases if they are VERY similar.  This is the most important on-page SEO element, so get it right.  

Limit the <title> to 65 characters.  If your page is targeting multiple keyword phrases then list the primary phrase first, the secondary phrase second and the tertiary phrase third, if applicable.  

Do NOT include site names, category names in your <title>.  IMO from an SEO perspective this is one of the biggest mistakes webmasters make with on-page SEO. This only serves to dilute the keyword density of the targeted keywords and/or phrases within the <title> element that you REALLY want the page to rank for. 

• Make sure that every redesigned page has an <h1> element at or near the top of each page template.  Use the <h1> to reinforce one or more targeted keyword phrases from the <title>.  The <h1> element is 2^nd only to <title> in importance as an on-page SEO ranking factor.
   
• If you were smart enough to design your new site so that pages are rendered using reusable templates and reusable widgets/components then I would make your widgets/components render their “header” as an <h2>.  This will give you several <h2>s on the page that can also be used to reinforce the targeted keyword phrases from the <title>.
   
• Take the time to optimize the <meta name=“description”> element of each redesigned page. Limit its length to 145-150 characters at most. Begin each description with a call to action to entice the user to click-thru to your URL. 

Try to use EVERY keyword from the targeted keyword phrase(s) from the <title> of the page in your <meta name=“description”> element.  If you’ve optimized your page correctly, MOST of the time people will find your URL in the SERPs by searching for your targeted keyword phrases. 

If the ALL of the keywords from a user’s search phrase exist in your <meta name=“description”> element then Google will show YOUR description as the snippet in the SERPs.  Otherwise, Google will “construct” a snippet by piecing together sentence fragments from your page that contain all of the keywords from the user’s search phrase.  Showing a well thought out description can do wonders for your click-thru-rate.  

• While you’re optimizing your redesigned page, set the <meta name=“keywords”> element for completeness.  Yes… the freakin’ element is ignored by all major search engines, but there are still some non-sophisticated search engines (if you want to call them that) out there that still use them.  Limit it to 5-10 keyword phrases separated by commas.  I prefer to only use keywords and/or keyword phrases that appear on my page.
   
• Where possible move ALL CSS and JavaScript out of your pages and into external files as part of your redesign.  There are SEO reasons for this as well as maintenance reasons.    

Rather than having every page download the same CSS and JavaScript functions because they are part of the page, if you have them as external files they will get downloaded once and cached by your browser.  This will reduce the load time for your pages.  Great for usability.It also reduces the code:content ratio making your page more content and less code. Great for SEO. 

As an added benefit if you decide to redesign the styling of your entire site or modify a JavaScript function, you won’t have to edit every single page on your site for the CSS and you won’t have multiple copies of the function floating around.  It allows you to make changes in one place – the external CSS or JavaScript file – and have the changes apply everywhere they are used across the site. 

Perform any on-site SEO work that is part of the redesign.  This might include the following: 

• If you decided to change your URLs then set each page’s new name to a keyword rich page name that reinforces the targeted keyword phrase from the <title>.  Avoid really long page names unless it is a leafy node in your site tree.  Otherwise, your URLs will start looking spammy.  Again, use the hyphen as a word separator.   

Remember if you move a page to a new URL, merge multiple pages into one, or completely delete a page then you need to implement 301 redirects to redirect requests for the old URL to the new URL whose content most closely resembles that of the old URLs.  Redirecting the web page with a 301 redirect will transfer credit for inbound links to the old URL (and the associated link text) to the new URL.  This will also transfer the Google Page Rank from the old URL to the new URL. 

• Optimize the link text used to interlink your pages.  Again, when linking to Page A you generally want to use a keyword phrase from the <title> of Page A (or a slight variation of a phrase from the <title> of Page A) as the link text.  I’m not just talking about contextual links in paragraphs of text on your page.  I’m talking about navigation links in your top navigation, left navigation,  breadcrumbs, and footer, if applicable. 

If you have multiple links to Page A on a given page (for example, in the header, breadcrumb, and footer) then vary the link text.  I typically make the header use Page A’s primary targeted keyword phrase (or slight variation), make the footer link use Page A’s secondary targeted keyword phrase (or another slight variation of the primary keyword phrase), and make the breadcrumb use Page A’s tertiary targeted keyword phrase (or another slight variation of the primary keyword phrase).  Varying the link text used to link to the same page expands the number of keyword phrases your page will rank well and looks more natural. 

• Implement redirects to enforce your URL canonicalization policy.

There are likely 100 other things you will want to consider fixing from an SEO perspective on your particular site, but these are some of the big ticket items. 

Testing your web site redesign 

This is probably the most crucial step in the site redesign process.  You need to test, test, and retest EVERYTHING that you can think of that changed during the redesign process. Hopefully, you took my advice and kept a running list of all of the changes you made to the site so that you can use it as a testing checklist for your newly redesigned site. 

If you don’t have a development environment where you can properly test, you may want to consider purchasing and hosting another domain with its own dedicated IP for the sole purpose of testing the process of upgrading to the newly redesigned site.  Having a different dedicated IP for your test domain will allow you to use a host file entry on your local PC to point your domain name to your testing domain’s IP.  This will let you test without problems caused by absolute URLs used in links on your site. 

If you decide to purchase a domain for testing then before placing a single page at the domain, create a robots.txt file in the root of your testing domain’s web to prevent it from being indexed.  The robots.txt should appear as follows: 

User-agents: *
Disallow: / 

You can then install a copy of the existing site at the new testing domain and practice the process of installing the redesigned web site over it once you think you have the redesign completed.  If you run into problems upgrading the existing site to the redesigned web site, you can alter your upgrade process, wipe the site clean, reinstall a copy of the existing site, and practice the upgrade again.   Repeat and rinse until you have the process figured out.  Document the final upgrade process. 

Once you’ve figured out all of the steps involved in upgrading the site to the redesigned version, you can test everything that you have on your testing checklist.  Having an extra domain for testing will also allow you to test your 301 redirects BEFORE the site redesign goes live. 

Going live with your web site redesign 

As I mentioned before, if your site gets seasonal traffic then you should try to schedule your site redesign to go live during the off-season.   If you have lots of users on your site on any given day, you should consider upgrading to your redesigned site during a time of day and day of week that has the least number of users on your site. 

During the time it takes to actually switch the site over to the newly redesigned site, you may want to throw up a splash page that returns a 503 Service Unavailable HTTP status for ALL page requests.  

You’ll definitely want to minimize the amount of time the site is unavailable.  Follow your upgrade plan that you previously documented during the testing process.  Once all code has been pushed for the redesigned site, remove the 503 splash page (if applicable).  Then test everything on your testing checklist.  If everything tests out then comes the dreaded “watch and wait”! 

Tracking SEO progress of your redesign 

Hopefully you have already have a Google Webmaster Tools (WMT) account and have verified your site with Google.  Keep a close eye on your newly redesigned site in Google’s WMT over the coming days and weeks.  Pay special attention to crawl errors like 404 Not Found errors.  These could be signs of bad links on the redesigned site or redirects that are not working properly or that were overlooked. 

Using the SITE: operator at Google (and also looking at known URLs and backlinks within Google’s WMT) you should see the new URLs start to show up and old redirected URLs start to disappear from the index (if you changed URLs and implemented 301 redirects).  You’ll actually see the new URLs start to get credit for the inbound links to the old URLs. 

If you did implement 301 redirects from old URLs to new URLs as part of the redesign process then your site’s rankings and traffic WILL suffer at LEAST for the time it takes for Google and the other engines to re-crawl all of the sites that link to the old URLs, discover each inbound link’s 301, and transfer credit for that link to the new URL.  This process can take days, weeks, or even a month or two depending on the number of inbound links you have and how often those sites are crawled.  So don’t be alarmed.  It is TOTALLY normal.  It is a necessary evil to get to the other side where the SEO benefits of the redesign lie. 

You will want to continue to pull weekly ranking reports over the coming weeks.  If you changed URLs and implemented 301 redirects, you will notice (at Google anyway) the old URLs starting to disappear and being replaced by the new URLs in the rankings… probably crappy at first but increasing as more and more of the old URLs’ inbound links are re-crawled and the 301 redirects discovered. 

Keep a close eye on your web analytics as well.  Hopefully as the search engines “absorb” all of the changes from your web site redesign project, your traffic will start to return.  

Good luck with your site redesign! As I said at the start, taking on a big redesign project can be scary as hell, but the SEO benefits that you reap can be phenomenal.