The 42nd Estate

A few days weeks ago [we’re back!] we talked about why viewing the source code should be the first step in analyzing a site for SEO and a few tools to help make the task a bit easier. So now that we’ve got our source code fired up, what should we look for?

Five Source Code Inspection Points for SEO

Is the site text-based or is it all images?

Search engines can’t see pictures and struggle crawling Flash. If the site is predominantly coded so it’s un-crawlable (javascript too, though the search engines are getting much better), it might require a complete re-working of the site’s code before moving onto to other optimization parts. If all of your posts are predominantly images or Flash, then there’s not much content for Google and other search engines to see.

Images take the form of:

<img src="url of your image" alt="A great picture!" height="100" width="100" />

There are a few key points here.

1. Give the image file a descriptive filename, for example big-red-building.jpg, not img9192.jpg.
2. Use dashes in the filename to separate out words. While you can use underscores too, we’ve found dashes to work best.
3. Give the image an alt tag, which will show in case the image fails to load and helps describe the image.
4. Declaring the height and width of the image decreases load time which is a win for everyone

While it’s a great idea to have images on your site, having a site that is all images is asking for search fail, as Google and the other engines will have little, if any, text to crawl, analyze, and index. It may seem obvious to many of our readers, but over the years I’ve stumbled across quite a few sites that look great, but then you try to highlight some text and can’t and realize the whole site is one big image (or a bunch of images).

Many times, these image based sites are done as images because the designer wanted to use a specific font that is not installed by many users’ computers. Though I’ll rant against Flash below, sIFR Flash is a great way to get unique fonts on your site without relying on pure images. sIFR Flash will also put html code behind the Flash fonts giving the search engines something to crawl. Having said that sIFR Flash comes with its own disadvantages (mainly adding to page load time and having the regular html font appear for a few seconds before being replaced by the Flash font file).

Is It Flashy…too Flashy?

As noted above, search engines really struggle crawling Flash. They’re getting better, but for the time being it’s not a good idea to create 100% based Flash sites. Add in that not all users have Flash installed (iPhones for one) and that it’s not exactly fast (there’s nothing that’ll make a user bounce from your site quicker than a Flash loading screen) and you end up with a recommendation to stay away from Flash.

You can spot Flash by a few methods. The one way that covers it all is to look for .swf files. Flash can be embedded (like a YouTube video) or it can run the whole site.

Here’s a few embedded Flash code samples from the Flash Embedding Cage Match:

The embed method



The object method



Note, I couldn’t figure out how to show Flash code without the browser interpreting it so the above two samples are images, here’s a text file with the codes in plain text.

There are times when Flash is OK, mainly for videos and ads and other secondary content. In other words, Flash within an HTML site is OK, while a site that is completely Flash based is asking for trouble. Still, if you can use another method, do so.

Descriptive Title tag up top?

The meta title tag is one of the most important features for SEO. If the site is missing a title tag, start there. Next, make sure the title tag is unique and contains keywords which also appear in the site’s content. Ideally, your title tag and H1 tags should be similar, if not exact. The title tag should appear as high up in the source code as possible. It’s a way for Google and users to determine what your page is about, so it doesn’t make sense for this tag to be stuck down at the bottom of your code.

These take the form of:

 <title>Your title here.</title>

Title tags appear at the top of the browser window, above the address field. They also may appear in Google’s search results, so make them enticing and descriptive of the content to get users to click through and find the right content.

Is the Meta Description Descriptive?

Check to see if there’s a meta description tag. While not as important as the meta title, the description is still often used by search engines as a snippet that appears in the results. Having a tag that is descriptive of the content on that page is an important signal to search engines and a useful intro to readers.

These take the form of:

<meta name="description" content="Your description here. Keep it under 160 characters." />

You should format your meta description to have the most important content at the front. For one, many believe Google values the content the earlier and higher up it appears. But the more important reason is that search engines may utilize your meta description as the snippet that appears in its search results. Making sure the focus of your page is noted quickly in the description informs viewers quickly about your page content and leads to more clicks and higher satisfaction.

An example, for this article we’re using the below text as the meta description:

Check your source code for these five SEO related pieces of code. Make sure these pieces are optimized for maximum usability and search effectiveness.

Is there an H1 tag?

Each web page should have one H1 tag that succinctly describes the content on that page. It’s a signal to search engines and your readers of what the content will be. Most wordpress themes will place the post or page title in an H1 tag. Ideally, your post titles on your homepage should not be wrapped in an H1 tag, but on the individual post pages they should be wrapped in an H1 tag. Tags flow in a hierarchy, so your most important content (the title) appears in an H1 tag, and sub-headings flow to the H2 to H6 tags.

These take the form of:

<h1>Your title (the main heading) here</h1>

For example, on this article the title tag is “Five SEO Source Code Checks”, while the H1 tag is “Five Things to Look for in Source Code for SEO”and the H2 tag is “Five Source Code Inspection Points for SEO”. The five titles in this list are all wrapped in an H3 and there’s two H4 sub-headings in the Is it Flashy point.

Originally, we planned to run this article as a list of ten, but as we’ve already crossed the 1,000 word threshold, we’re going to split it up into two parts to make sure it’s easily digestible. If you have any questions on part 1, ask away in the comments and we’ll do our best to answer!

Tags: flash, HTML, list, search engines, SEO, source code, usability

This entry was posted on Wednesday, October 7th, 2009 at 12:12 am 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.