HomeBusiness Websites: Building a SEO Template Part I

« Crafty Syntax Live Help | Main | Printer Friendly Pages »

October 29, 2004

Building a SEO Template Part I

I see a common theme on Internet now of making use of templates. Whether it is for link directories, SEO optimization or directory generators such as Front Page or SmartPages. idea is to get these pages a good ranking in search engines to help draw traffic into your site.

There a numerous theories of how search engines index your site, how far they crawl down page for content. There are still search engines that support META tag and ones that don't... such as Google.

So idea behind template is to try and get content of your page as close to top of document as you can, so that search engines that don't support META tags can read some of your content. Let's look at a possible template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<title>Something descriptive</title>

</head>
<body>

<div id="header"><h1>Main header content</h1></div>
<div id="main">
<div id="left"><h2>Secondary Main Header content</h2>

</div>
<div id="right">Other Links</div>
</div>

</body>
</html>

This template will be compliant and validate under current XHTML and CSS standards. Although it will display best in newer browsers it will be backwards compatible so it displays pretty good in older browsers too like Netscape 4.x

You notice we have included import and META tags for search engines that support them, and for those who don't, main content tag in is an h1 element right under BODY element.

We use an external stylesheet so Search Engines don't have to wade through data that doesn't mean anything to them.

Right under h2 element will be main content of page. Other links will be lower down on page in markup, but will appear in a right-hand navigational menu.

You will notice at this point there isn't any links to graphics in html. To keep presentation separate from content, these elements are in CSS file.

So CSS properties for body tag (using this example) are

body {
      background: #C0C0C0;
      background-image: url("images/x036.jpg");
      background-repeat: repeat;

}

This just provides main background color and background we wish to tile.

Then in CSS for id header, we have:

#header {
border : black solid 2px;
         width: 746px;
         margin : auto;
height : 100px;
border-collapse : collapse;
background-image: url("images/header.jpg");
       }

By placing this in a div, setting a width for it and setting margin to 0 it will center header information. You will also notice I've set a background image and set a border that will surround content to give it more of a template feel. This has effect of taking place of using TABLES for layout purposes. You will see more about this as we progress through this tutorial.

Next we want to take a look at "div id=main" because this is a container for two other div elements; "div id=left" and "div id=right"

#left will be main content area and #right will be navigational menu. It is constructed this way so first content search engines will index is closer to top of page and under our h1 header. All we really want to do with #main container div is to set up margins and width. This is it:

#main { margin: auto;
width: 750px;
}

Again, margin is set to auto and with width locked to 750px it has effect of mimicking a centered TABLE. This wouldn't be so important if everyone was using same monitor resolution, set to 800x600, but recent reports show that almost half of online population is using 1028x768 or greater, since monitors larger then 17" became popular. So we want to center content so those with a larger display resolution aren't looking at a big empty space to their right.

Now we have our main container set, let's look at div id="left"

#left {
border : black solid 2px;
border-top: 0;
width: 599px;
float : left;
background-color: White;
}

Over-all it has our border set to 2px; but since we already have a border at top from header div... we set top border to 0 so it doesn't look like we have an overly thick border at top. We have also told this "div" that we want it to float left. It will move as far left as #main will allow it.

only other thing to note about this #left is background color has been set to white, so our main content area can have black text on a white background.

Now let's look at #right div:

#right {
border : black solid 2px;
border-top: 0;
border-left: 0;
width: 145px;
height : 300px;
float: right;
background-image: url("images/right-background.gif");
background-repeat: repeat;

}

You will see here that border top and left has been set to 0 so we don't have a border with a double thickness, but what is really important to note here is widths of two divs. One is set to 599px and other is set to 145px, which adds up to 744 pixels and not 750. But we have to include widths of our borders here. We have a 2px border on left, another which separates two columns, and another on right. Now we have filled 750 px width that we set in #main. If these are not exact, then you will find your two columns displaying funny... for example, your links column will hang below main content area, giving page a very unusual look.

I've created a template for this tutorial, and added an article to it. You can view it here:
http://homebusiness-websites.com/tutorial

You can click images at bottom of page to check and see if Xhtml and CSS validates.

Next week will be part II

Posted by Steve MacLellan at October 29, 2004 03:06 PM

October 29, 2004

Building a SEO Template Part I

Comments

Post a comment