SEO - Keep Your Web Page Code Clean and Concise

What a WYSIWYG is and How it Works

Using more code on your page than necessary means two things: 1) Robots won't be able to index as much content on your site and 2) The content on the page is diluted by the code around it, and thus is interpreted as less relevant to the keywords you are targeting. The goal of this section is to give you the tools you need to pare your code down to the bare minimum, letting the search engine robots do their work faster, and get your site ranked higher.

Understanding how WYSIWYGs work

Simply coding a web page takes time and experience, something that new web developers don't likely have a lot of. Using advanced techniques to write squeaky-clean code takes even longer. One common method used to get web sites up and running as fast as possible is the use of a WYSIWYG.

WYSIWYG is an acronym for What You See Is What You Get. It is used to describe a number of tools that allow web developers to design web pages without having to code them by hand.

Some of the most common WYSIWIGS are Microsoft's FrontPage, Macromedia's Dreamweaver and Adobe's GoLive!. The benefit of a WYSIWIG is that a developer needs to know little - if any - code in order to design a web page, and thus development can go much more quickly. The program will show how the page will look in common browsers, and the developer can manipulate that page interactively using graphical tools.

So What Does a WYSIWYG Do?

When changes are made to a page, the WYSIWIG takes a guess at how the developer would want to write the code. For instance, it is easy to use the graphical tools to increase font size or change color of a block of text in a WYSIWIG using a menu, but if you were hand-coding the changes to the code you would have several options available to you to achieve the same effect. Do I use a style, class or span? Do I add the style directly to the tag, or do I add it in a CSS file? Do I use a hexadecimal color scheme, or do I use a browser-safe name?

If you don't understand all of that last paragraph, don't worry. It's just an illustration of WYSIWIGs making coding choices for you. That's why people use WYSIWIGS, because it takes a while to understand the technical terms related to the actual code.

Because WYSIWIGS choose how to apply the changes you make to the code, they often make bad choices when it comes to search engine optimization. Macromedia's Dreamweaver is currently one of the best programs at generating clean code, but it still makes a lot of coding choices that are not search engine optimized.

If you decide to use a WYSIWIG, use this guide to comb over the code they produce and clean it up. Keep in mind, though, that WYSIWIGs may overwrite your changes if you use them for editing a page later.

Using CSS, or Cascading Style Sheets

Use CSS (Cascading Style Sheets)

Cascading Style Sheets (CSS) are a coding specification that describes the application of presentational elements in HTML code. In layman's terms, it's basically a guide that you use to tell a browser how to display your page. For instance, adding the following style will make your text bold:

font-weight:bold;

Another one determines the background color of an element:

background-color:white;

You can add CSS to your HTML tags to give them a certain look, as in the following:

<p style="font-size:18px;”></p>

The above code will make all the text inside the <p> tags 18 pixels tall. When you add multiple styles to a tag, the code can start to get pretty long:

<p style="font-size:18px; font-weight:bold; margin-top:10px; margin-bottom:14px; background-color:#006699; font-family:Verdana, Arial, Helvetica, sans-serif"></p>

When you add color, change font size and family in a WYSIWIG, it will typically add the styles to an HTML tag, as shown above. But adding these styles to HTML tags inline creates a lot of unnecessary code on a page, diluting the importance of the real content to search engines.

A better way of doing CSS

A disadvantage of adding styles to HTML tags inline is that you can't re-use the styles on multiple tags, meaning every time you want to add a style to a tag, you have to re-write it. There is another method, however, which you can use to name a style, and use that style for multiple tags. Using this method, all the style information can be added to a block of code on the top of the page, and referenced in and HTML tag using the “class” attribute. Here's a practical example:

As you can see, all of the style information that was previously in the <p> tag is now in the <style> tag. So far it looks like about the same amount of code, but once you have declared a class in the <style> tag you can use it anywhere in your code. For instance:

<p class=“main-paragraph”> This is the paragraph. </p>
<p class=“main-paragraph”> Another paragraph. </p>
<p class=“main-paragraph”> A third paragraph. </p>

If you added the style code to each one of these paragraphs individually, it would make the code much bigger than necessary. Adding it to the <style> tag lets you re-use code, making the code much smaller. A fringe benefit to your web site visitors is that smaller code will download more quickly, making the page display in a browser faster.

Tip: Macromedia's Dreamweaver will add styles to the <style> tag automatically, which is a saves time.

There's one more thing that we can do to make the code even tighter, and that's putting the style information in a separate file altogether.

Using External CSS Files

Using External files for CSS

While you can reduce the amount of overall code on a web page significantly by moving the style information to the <style> tag, a search engine robot still has to wade through the style information before it gets to your real content, slowing the robot down and diluting the important words on your page. The solution is to move the style information to a separate file altogether, one that the search engine robots will not have to index.

Separate the Web Page into Two Files, the CSS and the HTML Code

You can move the style information to a separate file in 6 steps:

• Create a file with a .css extension. The example I use here is styes.css
• Cut everything inside of your <style> tag
• Paste the code into the .css file.
• Remove the <style> tag from the original file.
• Save both files
• Add the following tag in the original document, inside the <head> tags (replace the name of the file with your own):

  <link href="styles.css" rel="stylesheet" type="text/css"></link>

The two files will then look like this:

Original file:

<html>
<head>
<title>The Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<p class=“main-paragraph”> This is the paragraph. </p>
</body>
</html>

styles.css:

.main-paragraph {
font-size:18px;
font-weight:bold;
margin-top:10px;
margin-bottom:14px;
background-color:#006699;
font-family:Verdana, Arial, Helvetica, sans-serif";
}

Now the search engine robot won't see any of the style information, making the size of your file much smaller and much more powerful when it comes to being indexed.

This also benefits visitors to your site because a web browser will only ask for the .css file one time. This means that if you use the styles in multiple web pages, the user only has to download it once, resulting in even faster downloads.

Use External Javascript Files

Using External Files for JavaScript

JavaScript can also bloat code on a web page, and since it shows up at the top of your page, search engine robots have to drudge through it to get to the real stuff. The good news is that you can move most of your JavaScript into external JavaScript pages, much like you can do with CSS files. As with CSS, the user only has to download the file once, making it a download saver.

Take the following JavaScript function, for instance:

<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function checkform ( form ) {
if (form.card_expirationYear.value == "") {
alert( "Please enter the expiration date for your credit card." );
form.card_expirationYear.focus();
document['cc_year_img'].src = "images/alert-star.png";
return false ;
} else {
document['cc_year_img'].src = "images/spacer.gif";
}
}
</script>
</head>
</html>

You can move this JavaScript to an external JavaScript file by cutting everything between the <script> tags and pasting it into a file with a .js extension, for instance store_functions.js. Then you would just an the following code to include the file in your page:

<script type="text/JavaScript" src="store_functions.js" ></script>

The resulting code would look like this:

<html>
<head>
<script type="text/JavaScript" src="store_functions.js" ></script>
</head>
</html>

As you can see, the code is much smaller and search engine friendly.

Use Layer or DIVs in Your Web Page, not Tables

Using <div> instead of <table> for layouts

As web site designs have become more and more complex, using tables have become a popular way to structure the layout of pages. Tables consist of a set of rows and columns that form a grid of “cells”. A table with one row and two cells looks like this in HTML:

<table>
<tr>
<td> Contents of cell 1 </td>
<td> Contents of cell 2 </td>
</tr>
</table>

To create a simple web page with a header, body and footer, the following table might be used:

<table>
<tr>
<td> This is the header </td>
</tr>
<tr>
<td> This is the body </td>
</tr>
<tr>
<td> This is the footer </td>
</tr>
</table>

The DIV to the rescue!

This splits the page into three separate parts, allowing the page developer to work with each area individually.
For a layout like this, the <div> tag can also be used. The <div> tag creates a “layer”, which forms a block that surrounds everything inside it. To create the same header, body, footer layout with <div> tags, you would use the following code:

<div> This is the header </div>
<div> This is the body </div>
<div> This is the footer </div>

As you can see, the code is significantly smaller than the same layout using tables. Modern web page layouts are typically not this simple and use “nested” tables, meaning there are tables within tables. Using <div> tags as an alternative can boil the code down quite a bit in complex designs.

As an added bonus, nested tables take a significant amount of time for browsers to process, so using <div> tags can further increase the download speed and display time of your pages.

There are some things you can do with tables that you can't do with <div> tags, such as structuring tables of information. But for most layout needs, <div> tags will do the job faster and will reduce the amount of code you use.

Lesson Summary

In this lesson we discussed how to slim down your code using a variety tools at your disposal. We covered how using WYSIWYGs can help beginners develop web pages, but may also hinder search engine optimization. We also discussed how moving CSS and JavaScript code to external files can reduce the amount of code search engine robots have to wade through, while at the same time reducing the overall size of files on your web site for faster user downloads. Finally, we pointed out how using <div> tags instead of tables can help cut down code and make for faster browser display times.