Peak SEO - SEO Principles and CSS

Ok, I know what you’re thinking. How can somebody using a

CMS that still relies on tables and old school html possibly know the benefits of using

Well that’s a good question, and in the not too distant future I’m hoping the Mambo team takes notice of current trends and converts the core into a compliant whole.

As a matter of fact, Mambo 4.6 is due to make large strides in this area, so if you’re putting off the use of a CMS because of this factor, then stay tuned to opensourcematters.

But I digress, on with the real meat of this article – the use of CSS, and how it can benefit your optimization efforts.

If you’ve been using tables as the main tool in your website design, you’ll notice how quickly the markup in your pages can accumulate into a rather unwieldy mess. In fact, if you have a page that includes a few paragraphs of content, a menu, perhaps some affiliate code, latest forum topics etc, the size of your pages will quickly swell, and even though it all works, you inevitably run into a problem – the content too code ratio.

The phrase content to code refers to the overall mix of content and code on your web pages. Ideally, you want your content to substantially overwhelm your code in terms of overall weight.

There is a funky little content to code tool over at stargeek

Search engine spiders find it difficult to navigate your web pages when you have excessive amounts of code, and sometimes as a result your content can appear somewhat sparse to a spider, or struggle for relevance on the keywords and phrases you’ve decided upon for the page.

find it difficult to navigate your web pages when you have excessive amounts of code, and sometimes as a result your content can appear somewhat sparse to a spider, or struggle for relevance on the keywords and phrases you’ve decided upon for the page.

Instead of seeing that outstanding and relevant article you spent hours crafting, the spider encounters miles and miles of markup. You need to drop the old school design practices and shrink your markup down to the bare minimum.

Consider the following code:

<strong><font color=”#222222” size=”20px”>Article Title</font></strong>

and now consider this:

<h1>Article Title</h1>

In a single line of code, you’ve cut the length down substantially. Off course at the top of your webpage you’ll need to import the css to achieve the same result.

URL("site.css");
-->

</style>

and within that css, having something like:

h1 {

font-family: arial;

size: 20px;

color: #222222;

font-weight: bold;

}

Note: If you have anything approaching a reasonably decent chunk of css within your web pages, and that css gets repeated time and time again throughout your site, you should definitely bundle it into a single file, and simply import that file at the top of each page.

So I hear you say, it works out to be even longer! Yes and No, the spider encounters the <h1> tag first, and recognizes it’s a heading tag, so obviously the content within, is of pretty strong importance, especially considering it’s a <h1> tag and not say a <h6> tag for instance. It’s definitely more important than some bolded text, like the first chunk of code indicates. Immediately, that content is given substantial weight.

The added benefit of course, is that you can define the properties of the <h1> tag once in your css file, and have the content of your <h1> tags appear identical throughout your site. This creates a more user friendly site, and dramatically cuts down on code clutter.

An even better idea is to use one of the keywords you’ve earmarked for this page in the heading tag, this not only gives that content greater weight, but gives your keyword more prominence in the overall content, giving you even more brownie points.

Lets take another example:

<tr>

<td>

<strong>Table Of Contents</strong>

</font>

</td>

<td>

My content is here

</font>

</td>

</tr>

</table>

and the new school method:

<h2>Table Of Contents</h2>

<div id=”mycontent”>My content is here</div>

and in the css file, have this (roughly):

h2 {

font-family: arial;

font size: 24px;

color: #222222;

}

#mycontent {

font-family: arial;

font-size: 20px;

color: #333333;

}

You can see the massive difference CSS can make, less code, lower page size, faster loading times, more spider friendly, more secure (cause the css is hidden a file). The benefits are multiple.