You’re redesigning your website. You’ve got a lot of webpages. Since your content is awesome and people like it, there are tons of backlinks. Your new site design is going to be a major overhaul of the information architecture, not just a simple layout and graphic design change. There’s a little voice in the back of your head whispering about SEO. This post is going to give you a checklist for doing this in a sane manner.

This post includes an in-depth review of the relationships between search engine optimization, web design and information architecture. If you just want the quick checklist, skip to the end. The background material is there because all three of the topics (SEO, design and IA) change with technology and society. It’s good to have a grasp of the foundations so you can adapt to future changes.

It’s usually better to tweak the site you have than to scrap it all and start from scratch. But sometimes a major overhaul is necessary. And getting into the details of that is a whole post unto itself. Let’s assume you’ve done the background work and you know that a major website redesign is needed. You’re switching from a static pile of HTML pages to Wordpress, maybe. Or perhaps you’re changing the site architecture to reflect the needs of your customers instead of the internal structure of your organization. Whatever the reason, you’re making a big change to your website and you need to do your best to hold your search rankings.

Changing the design of your website isn’t an issue, changing the information architecture is.

When websites are redesigned usually everyone on the team is very focused on how it looks: the layout, the colors, the design-related images and so on. Changing these things usually doesn’t have a huge impact on search engine optimization. Search engines, being blind, don’t care much about what color your site is. They just read through the HTML and catalog the content.

The aspect of a website redesign that has a large impact on SEO is the site architecture. Site architecture deals with how many pages you have and how those pages are organized. During a website planning phase it’s sometimes drawn as a pseudo flowchart (I’ll hold my harsh comments about that practice for now).

For example, say you have a site with 200 pages organized into seven categories. Your new site is going to rock because it stays totally focused on a specific task. Your major site overhaul will streamline the whole thing into 25 pages with four categories. You’re psyched because the user experience is going to be much simpler and easier to follow.

Unfortunately, the search engines are bummed because they just lost 175 pages of content. Well, they’re not really bummed, search engines are just computers running math. But the point is: when search engines lose content they react–by demoting you in the rankings (if you don’t have content, why should you rank?).

Recap: changing the way your website looks shouldn’t have a big impact on your search rankings but changing the number and organization of pages can have a a big impact on your search rankings.

Onpage SEO and the website redesign

Information architecture is an aspect of onpage search engine optimization. It’s one of the things over which you have direct control. You get to decide how many pages you have on your site.

For your site redesign, another the onpage SEO things to consider is your internal linking structure. This is a fancy way of saying “On your current site, what words do you use to link pages to each other–like in your menu for example.” You’ll want to keep this in mind for your new site’s internal linking structure.

All of the other usual tactics for onpage SEO also apply to your redesign. If your old site had pages with headlines, URLs, paragraph text, image filenames, image alternative text, etc that had your keywords and your new site doesn’t… well that’s asking for trouble.

Offpage SEO and the website redesign

Aspects of SEO that are considered offpage are things like how many other sites link to you or whether people click on your link when they see it in search results. You have very limited to no control over these things. You don’t get to decide who links to your website. You don’t get to decide when people click on your link on the search engine result page.

You can do a few things here to help out. Make sure people people like your page titles and descriptions enough to click on them. How do you know what people like? Testing. Asking. The usual things. No different than normal operating procedure.

Backlinks: the SEO bugbear of the redesigned website

The biggest issue of all in the site redesign, as far as SEO is concerned, is backlinks. People who link to your site are very very unlikely to go through their own sites and update their links to your page.

When you subtract or change the web address of your pages you are potentially losing any traffic and search engine benefit from sources that link to that page. People clicking on links to those changed web addresses or missing pages get the dreaded “404 Not Found” message.

Wouldn’t it be awesome if there was a forwarding service for web traffic? Sort of like when you change your mailing address and you go to the post office and say “Hey when you get mail for my old address in South Burlington, VT please forward it to my new address in Burlington, VT.”

There is. It’s called the “301 Permanent Redirect.” And even better, you don’t have to go to the post office to set it up. You just edit a file called .htaccess that resides on the root level of the server that has the old webpages on it (if you’re changing servers or domain names as part of your website redesign, see below). It starts with a period so if you may need to adjust your file browser to let you to view invisible files in order to see it.

A line of 301 redirects looks like this:

redirect 301 /southburlington/webpage http://yourdomain.com/burlington/webpage

Note the structure of this:

redirect 301 OldWebPage NewWebAddress

Voilá. Now all the links going to one page of your site, send traffic to a different page.

You’ll need to do this for everything on your site. Which can be a real pain. Luckily, .htaccess does GREP. So you can say things like “anything that used to be in the generic web design section should now go to the burlington web design page.”

redirect 301 /generic-web-design/* http://yourdomain/burlington-web-design.html

If your head just melted feel free to do this sort of thing the long way, just enter in every old page of your site architecture and manually hook it up to the new page in your website architecture.

Figuring out what pages you currently have on your site can be tricky. You can count them on the server if it’s a static pile of HTML. Or you could use a sitemap.xml tool to make a list. Or you could do an advanced Google search to see what pages are in Google’s index. There’s a lot of ways. No matter what you do you’ll probably miss a few.

For the few that you miss, check your web analytics for the 404 error and try to guess what page they were looking for. This should help you plug a few leaks. Also, Google Webmaster Tools can help you out. Use their “Crawl errors” tool in the “Diagnostics” section to plug up any more holes in your 301 Redirect list.

Changing servers or domain names and SEO impact

If you’re changing from one domain to another (finally giving up that old dot-biz domain and moving to a shiny new dot-com domain, for example) you may want to do a variation on .htaccess method described above. You could just do a GREP that maps everything on the old domain name to the new one and keep both machines running. But why have two domains provisioned if you don’t need to.

Use your domain tools at the DNS to forward all traffic from your old domain to the new domain. Then do all the same things mentioned above in the part on backlinks. What you want to avoid is having the exact same content at www.mygreatdomain.com and at www.mygreatdomain.org. You just want the content to show up in the new domain, and if you type in the old one get automatically redirected to the new domain.

The list for handling your site redesign with care for your SEO

Enough of all that blather. Here’s the list.

• Make a list of all the existing pages on your website.
• If you’re changing domain names, use your DNS or server admin tools to forward the domain.
• Set 301 redirects matching the most relevant new pages with the old pages of your site.
• Make sure your headlines, new images and new content accurately reflect the goals of your organization (just like you should already be doing).
• Same thing with meta-descriptions and page titles–things that get pushed out to other sites and web locations like the Google SERP or Facebook Walls.
• A little bit after launching, identify any 404 traffic that can be redirected to a relevant page.

Some closing thoughts on SEO and redesigning your website

Google and other search engines make their money by sprinkling advertisements around your content, whether it’s your page titles and descriptions on the search engine results page or ads that run in sidebars across the web. That’s their business and how they survive.

When you make changes to your content, it changes their ability to make money. Maybe you’re giving them fewer pages to sprinkle ads on. Maybe you’re giving them more. Maybe you’re taking away content that they just loved because it generated ad clicks for them. Maybe you’re adding new stuff.

When you make a change to your site, you can bet that there will be some evaluations of how that change effects the ability of search engines to make money. This is why there’s a dip or fluctuation after any changes to your content.

Remember that it isn’t personal or anything, it’s just one machine trying to figure out how to make the most money for it’s owners. The machine makes money by serving up results that are accurate enough to attract visitors who then click on ads. Keeping this in mind can be helpful as you try to anticipate and weather changes to your SERP through your redesign process.

There’s a lot of chatter about Facebook’s new “Like” button. There are some important strategic considerations about implementing it and you should really think it over first–I’ll write a post on that later. For now, if you just want to jump headlong into it, here’s how.

There are two parts to the whole “like” button thing. One is adding some data from Facebooks simultaneously released Open Graph format to your header. The other part is getting the button to work. Oh yeah, and a disclaimer here–this is all pretty new and likely beta beta beta. But it’s working on this site anyway.

Implementing Facebook’s Open Graph on your website

You’ll want to put a little data into the head tag of your site. The data you’ll be adding increases the semantic value of your content. Just like RDFa and microformats and other bits of code that tell computers what the content is about, Facebook’s Open Graph protocol is a way of saying what kind of content is on the page.

There are a lot of options here, but these are the ones you need to get going:

<meta property="og:title" content="The title of your social object"/>
<meta property="og:type" content="The kind of content you're adding"/>
<meta property="og:url" content="The permalink of your content"/>
<meta property="og:site_name" content="The name of your site"/>
<meta property="og:description" content="A short description of your content"/>

<meta property="fb:admins" content="Your FB User ID"/>

So you can get that all into your head template. I recommend using Wordpress PHP stuff to get the permalink, description, title and so on into this. Let me know if you need help with that.

A resource that you’ll want is the complete list of the different types that Facebook is supporting right now. If you’re not sure, you can skip over that one. But if you do have a supported type, then go ahead and put it in–you’re adding semantic value to your page.

Getting the Facebook “Like” button into your site with the fbLikeButton Plugin

Now that you’ve got the semanticky stuff dealt with, time to get the button in. You could hack it into your template, but there’s a plugin that appears to be working pretty well right now. It’s called fbLikeButton.

Once you install this plugin you’ll have a few options, found in the Settings area of the Wordpress admin area.

You’ll have checkboxes to determine placement (above and below content, on pages or not, on the home page or not). You can also configure the sizes, layout and typography. It defaults to 25px high, but if you want the profile pics to display, you’ll need to open it up a little. For reference, as of this writing I have the height of the Facebook Like button set to 80px high.

Lastly, you can give a custom CSS class name to the container for your Facebook Like button. This should help you with positioning and styling.

You’ve got the Facebook “Like” button, now what?

If you have your FB user id or application ID in the headers (as mentioned above) you should be able to track usage just like one of your “normal” Facebook pages. This should give you access to some rich demographic data about the consumers of your web content.

I’m also hopeful that other applications will be built that take advantage of the semantic data that will be added to everyone’s page heads. I think there’s some real hope there. Of course, we’ll have to wait and see how that goes.

As noted previously, Google is using site load time to help rank sites. I put together a quick list of further resources to help get everyone rolling on optimizing site speed for SEO.

Making a website load fast requires the help of everyone on your web team. The person making the content can have a huge impact through the kinds of content and preparation he or she puts into getting things online. Your site designer can be a critical link in making the entire site template either fast or slow–sometimes in just a few lines of code here or there. And then your heavy-tech geeks can really speed it up.

Here are a few external resources to help each of these areas make the site faster.

Content-focused ways to speed up your website

The stuff you put on each page is going to have an impact on your site load time. Here are some resources that can help out content creators.

Ten Ways to Make Your Web Site Load Faster [Hostway]

Pick the right kind of image format for the right kind of image [An oldie but goodie]

Design-focused ways to speed up your website

Are you in charge of web design for your organization? Here are some things you can do to help keep your site load time low.

Speed Up Your Web Site Load Time – Design Tips for Faster Pages [Webweaver.nu]

Make Your Images Load Faster [FutureNow, Inc]

Tech-focused ways to speed up your site

Not afraid of things like “no-cache” and gzip compression and so on? Here is a collection of resources and articles about speeding up your site.

Best Practices for Speeding up Your Web Site [Yahoo Developer site]

How to make your web pages load faster [O'Reilly Answers]

It’s official. Google is including site speed as an aspect of how it determines who gets to the coveted “#1 on Google” spot. This has been coming for some time and really shouldn’t be a huge surprise to any of my readers.

Here are some things you can do right away to help make your site load faster.

1. Optimize graphics Any images you have on your site will slow the page load time. Make sure the images you do have are worth having. Then make sure the image files themselves are optimized. There’s a balance between images have too low a quality vs images that take too long to download. Discover that balance. Use a tool like Fireworks to optimize all of the images on your website.
2. Go easy on on-the-fly queries and sorting etc. If your site template has a lot of dynamic information being loaded and pulled into each page every time the page renders, now is a good time to determine how much of that you need. Every bit of “server side” scripting (like PHP) means your server needs to think before sending the page to the browser–slowing down your page load time. If you don’t really need live Twitter streams on every page, for example, consider removing them.
3. Anything totally static? Cache it. Any page where you don’t need to update anything can be cached. This makes a static page that doesn’t require your server to build it up on the fly (think of this item as taking the previous suggestion as far as you can go). Any blog pages that don’t take comments etc are great candidates for this treatment. Also makes a good reason to consider moving your blog index off the home page of your website.

Good luck! And remember that these changes will probably be appreciated by your audience as well.

I had a blast at the HomeQuest/FATCo/PHATCO event in Portland. I’ve got about three or four followup posts to write, based on questions. But to start off I wanted to address this one about web design (I’m teaching my weekly web design class tonight so it’s top of mind for me).

A more in depth response after the jump.

Someone in the audience had an honest question: “If you don’t have room visually for H1 tags on your website, can you use a value for a text-indent is that going to hurt you [in search engine rankings]?”

My answer was maybe a little brief, but it’s true: You do have room for h1 tags on your website. There’s no such thing as “no room for good code” on your site. As a refresher, here’s what the h1 tag is about, from the W3C:

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.

So from the first part, you can see that headings are important for conveying what a web document is about. Then in the second part, you see that the h1 is the most important section topic heading available to us as web designers.

Then there’s that little thing about how visual browsers render them larger. This is probably what the question was about. But you don’t have to give up the h1 tag in order to get it to display smaller. You can use Cascading Style Sheets (aka CSS) to control the way an h1 tag looks. So you could use CSS to make all of your h1 tags display smaller, thereby giving you the visual room that you need for your design.

If you only wanted a specific h1 tag to appear different (on your home page, for example) you could single out that specific h1 tag in your code by assigning it an id attribute. So you might write this in your HTML:

<h1 id="make-small">

And then in your style sheet, have a rule for h1#make-small to make it display… small. Learning to use style sheets in this way is critical to making your website useful for non-visual browsers (like those for the blind or search engine spiders or RSS feed tools etc etc) while preserving the visual look you want.

I hope that helps!

Thanks to Darin from Productivity Junkies for doing the video used in this post (and his 2 cents on each of the questions in the full Q+A video are worth reading).

Here’s a tactic for organizations scrambling to make sense of social media and figure out the ROI or the relevant policies required to sustain social marketing efforts. This post was inspired by cyskoff’s comment on Jeremiah Owyang’s Matrix: Breakdown of Advocacy Marketing.

You can either go deep with it or fairly shallow depending on the resources you want to invest. Obviously, you can’t calculate a return-on-investment when
the investment is 0 because you’d be dividing by 0.

Why would you try to merge your social media presence with your real world presence?

A lot of business is either done face-to-face or significantly solidified face-to-face. This is why live events still occur. Live events, as you already know, offer very high-bandwidth experiences: full data overload in real time. You can use your social media presence to enhance your experience at existing live events or perhaps even create live events around your social media presence.

The kinds of objectives you might go after with a merging online/offline tactic include:

• Create deeper relationships with social media participants that are highly engaged (participate the point of showing up in person at live events).
• Create deeper relationships with audiences who self-identify with a very specific topic.
• Listen and improve understanding of a specific target audience.
• Identify potential individuals for the creation of a successful Advocacy Program.

Weaknesses of merging online/offline tactics include needing to monitor social media channels for potential live-event opportunities and also the costs of having someone at the event.

Strengths include the ability to create deep relationships with customers and potential advocates.

With a fairly moderate investment (someone is required to be there physically, but it might not require the sophistication of an advocacy program) you get the opportunity for the high return meeting with an audience and gathering product/industry feedback, getting new customers, etc.

Merging your Offline and Online Presence

There are a few things you’ll need to do before giving this one a go, so I suppose this is an intermediate tactic. Here’s what they are:

• Already have an online social media presence (be it Twitter or Facebook or whatever)
• Use your online social media to listen to your audience (via groups, lists, hashtags and whatever means available to you)
• Identify real-world events that take place in which your audience is interested (this could range from conferences down to Tweetups)

If you have those pieces in place then you’re ready to start making use of online/offline merging.

Understand the cultural landscape and tools

Your audience might be found at Tweetups. Or maybe they’re only found at conferences. Or maybe there’s a social media breakfast in your town that might attract your audience. Or maybe it’s gatherings that have nothing to do with social media, but your audience uses social media to discuss the gatherings. If you’ve already found your audience in social media, you should be able to determine what these events are. Here are some things to watch for:

• Hashtags are often used around conferences and other get togethers
• Tweetups are fairly informal get-togethers of locals who use Twitter, usually for the express purpose of networking
• EventBrite or other event-creation tools are obvious indicators of something happening
• Social Media Breakfast is something that happens in many cities
• Specialized meetups that aren’t social-media specific such as Web Analytics Wednesday but might be promoted via social media.

Step away from the computer and be in the real world

Once you’ve identified an event to attend, things will be fairly obvious. It’s like any other networking event. All of the basics apply:

• If you your oversell at one of these things you won’t impress anyone.
• Have your business card to exchange with people.
• Be prepared to discuss what you do in “elevator pitch” format–ideally tweaked in a way that is most relevant to the group at the live event.
• Do a little followup via social media: post to your stream thank yous and anything else you found especially interesting.
• If you’re going to Tweet the event: don’t. Someone else will do that. Take advantage of the fact that you’re in a room with live people who are interesting and engaging and could be your customers.

There are events being promoted via social media in most cities and you can use the tips above to find them and have a productive time at them. If you want to step up your game a little bit, consider hosting an event.

Stepping up: Hosting a social media event

Once you’ve been participating in a social media community for awhile, consider hosting an event. The biggest hurdle for most Tweetups is figuring out where to have one. Find a restaurant room or other casual space that’s already engaged in social media and go from there. Hosting an event will help you spread your reach and help you meet even more people at the event. Not bad for the cost of a little time and making sure there are name badges and markers.

You might also like Mashable’s how to connect with other entrepreneurs

When I walked to work this morning there was snow on the ground. This means that people will soon be flocking to Vermont to get in some skiing. Those people flocking here may be Foursquare players. Here’s a quick intro tour to Foursquare for Burlington AKA Foursquare for #BTV.

1. Remember that Burlington, VT is still a Foursquare Outland.

All the usual stuff about Foursquare for outlanders applies. Sure we’d love it if we were an official city. But as of this writing the Foursquare team is just 4 people. Let’s not get our knickers in a bunch if our little burgh isn’t the next one they add.

2. Foursquare players exist in Burlington

There are a handful of active Foursquare players in #BTV. People like Eric O. (good luck if you want to get Mayorship of someplace on Church Street), Lou M. (who found a vexing bug and the workaround), Rich N. (who gets the mayorships, but is keeping his lips sealed when it comes to giving out tips). And of course, me.

Currently no businesses that I know of are rewarding Foursquare Mayorships. Maybe we should ask them to.

3. You can play too.

Most #BTV Foursquare players choose NYC as their playground. We’re all scoring that Far Far Away badge pretty quickly. But if you’re looking for Foursquare venues in Vermont check the NYC edition to see what we’ve been setting up already.

Here are some things to help make your Vermont Foursquare experience even more square.

• Using the iPhone app just walk around. Chances are good you’ll find some venues nearby and even a few tips.
• When Burlington names conflict with NYC names for something, add “BTV” to the end of the name. It’s our hashtag, named after our airport code.
• If you’re using an interface that doesn’t let you switch the name of the state from NY, just go ahead and enter “Burlington, NY” and one of us will clean it up later. Thanks for adding the venue!
• Cell coverage in Vermont is spotty. I won’t tell if you back-play a few checkins now and then.
• Run into a Vermont or #BTV specific problem? Here’s a place where you can report it.

Well I hope all that helps, have fun in Burlington and Vermont!

Making things online often means using text and typography. Fiddling with font sizes online can be a real pain. This is because all the computer platforms are a little different in how they treat text and pixels. Also, since I’m a fan of making websites that people can use in ways that best suit them, I like to make it so that the type can be made larger or smaller. This is just a little blog post that explains how to do this.

First, set your initial font-size in the cascading style sheet (CSS). The rule should look like this:

body {
font-size: 62.5%;
}

What this does is it takes whatever the browsers default setting for text is (usually 16 pixels) and multiplies it by 62.5% giving us 10pixels. Keep in mind, that 10px is pretty tiny. But from here on out you can use something called an “em” to declare the size of your text.

An “em” is an “old school” unit of typographic measurement which is basically the width of the character “m” in a given typeface. Today you might use em-dashes (–) when you want something more substantial than an en-dash or hyphen or minus sign (-). Anyway, the main point is that the “em” is a relative unit of measure. As the base-size gets bigger then type sizes which are declared via em units get proportionally bigger. Very handy.

• using em units for text allows for text resizing by the browser (important for some demographics).
• using percentages on the body helps deal with IE issues (especially the “too big” thing).

Once you’re used to doing typography this way you will learn to like it as it gives you greater flexibility (resizing all of your typography is possible by just changing the base percentage) and consistent display (small text on IE isn’t micro on Safari etc).

It’s one of those things that maybe isn’t necessary, but is very nice for your visitors (especially the ones that increase or decrease type size on their machines–anyone over 40 for certain).

Once you’ve got this technique locked in, it won’t add any extra time to your development process.

Here’s the best article on this topic, for in depth review (mildly dated but this is the core article and source for this type of thinking) on A List Apart.

Burlington Vermont community television CCTV recently did a live webcast with Matt Dunne, Google Community Affairs. In that webcast Matt covered a lot of the basics of the Google Grants program and how adwords can be used. Even if you are a for-profit business, this video might serve as a great introduction to what Google Adwords is and how you might use it. Enjoy.

[Quicktime required to view the video, get the free Quicktime playerhere]

Please note that Thoughtfaucet is donating time to non-profits to help them establish, improve and maintain their Google Adwords campaigns. Use the contact form on this site to get started.

Getting through cultural issues in developing software or other marketing materials that others in your organization (or client organization) is often more challenging than writing, optimizing and testing code or even designing the interface. Here are some things I’ve learned about creating styleguides for use in intranet projects (AKA the thing that tells everyone how they should be dumping their brain into the system):

1. Make it as short as possible. Remember that people have jobs to do and it’s better that they put the info in the intranet incorrectly than not at all.
2. Use visual examples of positive and negative use. Make sure that these visual examples clearly show why the “on-guideline” version makes their life easier. If it doesn’t make their life easier, perhaps the guideline isn’t required.
3. Try to incorporate the guidelines into the application/site itself. If you want specific header-tags used for headlines, have a separate text-entry box that formats the headline to your tag spec. If you want people to only use italics or bold for specific types of knowledge, include a short instruction right next to the text block. Anywhere that you can include instruction and advice right in the interface is worth far far more than the actual document in terms of getting the organization to adopt your standards.
4. Include links to specific guideline sections right in the interface (an extended version of item 3). Have “read more” links in your in-interface advice that go to short pop-ups (ala a help system).
5. Each entry of your guideline might consist of one brief sentence describing the rule, one brief sentence describing why the rule exists, and positive/negative examples. Avoid paragraph length text.
6. Now take that same document from item 5 above and reverse it so that you start with a problem-based statement and then a solution (your rule).
7. If you’re comfortable with the risk, consider a wiki-type intranet system. There’s always some busy-body who will enjoy going through and making the content conform to the guidelines.
8. Before/During/After roll-out, survey the users to see if they understand the guidelines and whether the guidelines are valuable or not.
9. Determine how you/your boss/your stakeholders/etc will measure the success of your guidelines before roll out. Keep this in mind as you design and deploy.
10. Continue measuring and improving your intranet with the guidelines involved.