SEO Training Course Sample Lesson

First, the links at the left do not work. They are the actual link names, which will provide you with an idea of what the course is about. The links do not go to the actual course pages for obvious reasons.

What we want to achieve with our code is to have it as small as possible, clean, and easy for the search engines to get through. The less code they have to wade through to get to our content, the better.

This is called Code to Content Ratio and it means the number of bytes in the file that rae code, compared to the number of bytes in the file that are content.

Here is a little bit of code on a page. This is for a newsletter sign up form. I have left the form out, but here is what they coded for three lines of content:

<font color="#FF0100" face="arial,helvetica,sans-serif" size="2" style="font-family: arial,helvetica,sans-serif;font-size: 10pt;color: #FF0100;font-weight: bold;">Newsletter Sign Up:</font><br/>

<img height="10" src="http://client.logoworks.com/ConstantContact/WESTNIGHT/images/spc.gif" width="1"/><br/>
<font color="#000000" face="arial,helvetica,sans-serif" size="1" style="font-family: arial,helvetica,sans-serif;font-size: 8pt;color: #000000;line-height: 11pt;text-decoration: none;">Would you like to subscribe to this newsletter?</font><br/>

<img height="5" src="http://client.logoworks.com/ConstantContact/WESTNIGHT/images/spc.gif" width="1"/><br/>
<font color="#413CA0" face="arial,helvetica,sans-serif" size="1" style="font-family: arial,helvetica,sans-serif;font-size: 8pt;color: #413CA0;line-height: 11pt;text-decoration: none;">E-MAIL Address</font><br/>

Instead:

<div class="arial10ptredbold">Newsletter Sign Up:</div>

<img src="images/image.gif" width="1" height="10"><br/>

<div class="arial8ptblack">Would you like to subscribe to this newsletter?</div>

<img src="images/spc.gif" width="1" height="5"><br/>

<div class="arial8ptblue">Please Enter Your eMail Address</div>

My code is 305 characters, theirs 854 characters.
Notice the redundancy in the code as well, how many times are you going to call for arial etc?

Now here is some doozy code with 1,213 characters:

<TD style="BORDER-RIGHT: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: windowtext 1pt solid; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0in; BORDER-LEFT: medium none; WIDTH: 330pt; PADDING-TOP: 0in; BORDER-BOTTOM: windowtext 1pt solid" vAlign=top width=440>

<P class=MsoNormal style="TEXT-ALIGN: center" align=center><B><FONT face=Arial size=3><SPAN style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY: Arial">Costume Jewelry, Earrings & Accessories: <O:P></O:P></SPAN></FONT></B></P>

<P class=MsoNormal style="TEXT-ALIGN: center" align=center><B><FONT face=Arial size=3><SPAN style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY: Arial">Fall 2006<O:P></O:P></SPAN></FONT></B></P>

<P class=MsoNormal style="TEXT-ALIGN: center" align=center><B><FONT face=Arial size=3><SPAN style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY: Arial"><O:P></O:P></SPAN></FONT></B></P>

<P class=MsoNormal><FONT face=Arial size=2><SPAN style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">The fall of 2006 blah blah blah ...

My optimized code at 181 characters:

<td width="440" valign="top">

<div class="arial12ptbold">Costume Jewelry, Earrings & Accessories:<br>

Fall 2006</div>

<div class="arial10pt">The fall of 2006 blah blah blah ...</div>

It is truly bizarre how code can be when using a WYSIWYG or interface type of program. Check this one out!

<table border=0 width=994 height=1086 cellpadding=0 cellspacing=0>
<tr align=left valign=top>
<td nowrap width=11 height=18>
</td><td nowrap width=8>
</td><td nowrap width=12>
</td><td nowrap width=1>
</td><td nowrap width=13>
</td><td nowrap width=31>
</td><td nowrap width=3>
</td><td nowrap width=10>
</td><td nowrap width=4>
</td><td nowrap width=47>
</td><td nowrap width=53>
</td><td nowrap width=1>
</td><td nowrap width=14>
</td><td nowrap width=14>
</td><td nowrap width=28>
</td><td nowrap width=9>
</td><td nowrap width=19>
</td><td nowrap width=52>
</td><td nowrap width=37>
</td><td nowrap width=3>
</td><td nowrap width=7>
</td><td nowrap width=12>
</td><td nowrap width=3>
</td><td nowrap width=5>
</td><td nowrap width=6>
</td><td nowrap width=86>
</td><td nowrap width=6>
</td><td nowrap width=58>
</td><td nowrap width=27>
</td><td nowrap width=79>
</td><td nowrap width=48>
</td><td nowrap width=30>
</td><td nowrap width=22>
</td><td nowrap width=82>
</td><td nowrap width=25>
</td><td nowrap width=111>
</td><td nowrap width=17>
</td>
</tr>
</table>

I would of simply done this:

<br>

SEOMen SEO Course

Code Examples