FAIL (the browser should render some flash content, not this).

SEO Course Sample Lesson on Code

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/images/sapc.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/images/sapc.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">
Accounting Software & Services: <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">
Winter 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 winter of 2006 blah blah blah ...

My optimized code at 181 characters:

<td width="440" valign="top">
<div class="arial12ptbold">
Accounting Software & Services:<br>
Winter 2006</div>
<div class="arial10pt">
The winter 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 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>