The 42nd Estate

Whenever someone asks us to help out with their Search Engine Optimization, our first step is to view the source code. Before we look at link structure, search results, content, navigation or anything else we look at the source code. Why? Well, because the source code of a web-site is literally its foundation.

Let’s break it down with an analogy. Say you’re an expert mechanic and you’re out on a sunny Sunday afternoon strolling around used car lots looking for a car to buy. Now, let’s pretend you have a pair of X-Ray glasses (in our case, viewing the source code is like putting on a pair of X-Ray glasses). You have the ability to look inside an engine and see its condition and you have the knowledge to know figure out if the engine is in top-notch shop or needs serious revamping.

So, what would you do?

Would you:

1. look at the shiny exterior, check out the comfy seats and 30 speaker super-awesome stereo system?
2. pop out the X-Ray glasses and look right into the engine?

I’m sure you’re all sitting there saying “of course we’d go with #2!”. Well, that’s the same reason we should look at the source code of a site first and foremost. The site might look great, the navigation is organized so users can get to any post within 1-2 clicks, the meta titles, keyword density, and permalinks all look up to par and optimized. And then you peek at the code running the site and realize it’s entirely based in flash, or even just pictures (yes, we’ve seen sites entirely made up of pictures, even the text!).

Tools for SEO Analysis of Source Code

And that’s why the first step of any SEO analysis should be involve looking at the source code. We’re big fans of the View Source Chart add-on for Firefox, which organizes any source code into pretty, easy to read, color co-ordinated charts. Here’s a couple screenshots of the add-on in action showing the source code for the The 42nd Estate home-page.

Note how it highlights the title tag:

View Source Chart for Firefox

Note how divs and other html separators are placed in a box for easy recognition:

View Source Chart for Firefox

Another good tool comes from the Foxy SEO Tool add-on. Within the tools section of this add-on, are two handy instruments. One is the W3C validator, which will look through your HTML, CSS, and links and report any errors it finds. While having an error-less web page might not be possible, striving for the least amount of errors will ensure your web pages are rendered properly for search engines and human visitors.

The other tool is the Search Spider Simulator. Personally, I love this tool for taking a quick look at the source code in a human readable format. What it does is it strips out any style from your code and displays a simulation of how a search engine sees your site. It’s an excellent tool for trying to decipher how a search engine might view and navigate your site.

Here’s a screen capture of our home-page as seen in the Search Spider Simulator:

Foxy SEO Search Spider Simulator

Hopefully these tools and tips will save you some time and effort when analyzing your sites from an SEO perspective. In our next post, we’ll list out ten items to look for in the source code for SEO.

Tags: CSS, HTML, marketing, search engines, SEO, source code, traffic

This entry was posted on Monday, August 17th, 2009 at 10:58 pm and is filed under Blogging Tips. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.