This article is most useful if you are somewhat
familiar with HTML and CSS. I explain the concepts well enough
that you do not have to be an expert, but I want to provide
material that will introduce you to more advanced design in ways
you can understand.
Like many other web designers, I began laying out web pages
using graphical tools and discovered the wonders of tables for
layout without anyone telling me to use them. Since browser
support for CSS Is better than it used to be, and tables cause
problems, CSS offers you a benefit you may not have thought
about before, the benefit of better SEO.
I want to say
right away that quality content should be your highest priority,
not SEO tricks. The advice given here will help you get better
search engine results because the key to real SEO begins with
good page structure and organizing your content . By
understanding how search engines "see" your pages, you
can build better page structure.
Search engines use what
is called "top down" logic in looking at web pages.
They look at your code, not the visual display that users see.
Human eyes are drawn to the page content right away, even when
there are other things on the page. Search engine robots do not
see things the same way, but, they are logical and predictable
once you understand them.
You have most likely seen
search engine results that do not make sense because some
obscure content gets displayed instead of the actual content of
the page. I will illustrate top down logic so you can understand
how to make CSS work for you.
In the mind of a search
engine, the gist of your web page is determined first by what
content is at the top of the page. If you start with certain
words, they appear often throughout the page, and then again at
the bottom so it is essentially your closing point, that, in the
automated brains of a search engine is what your page is
about.
Your well trained eyeballs will probably look for
a title, then read the content; so to you, this is the top down
logic of the page. Read your HTML code from the top down. You
may be surprised how far you have to scroll before you get to
the real content, and, how much other "content" a
search engine will see first. If you use tables for layout, the
top down logic of your code looks like it has the legs cut off
and the place settings are on the floor.
Using CSS, you
can organize your code so the search engines see your real
content first regardless of where it appears on the page.
Let's use a simple HTML example:
<html>
<head>
Insert all your head info, including a CSS
link like below
<link rel="stylesheet"
type="text/css" href="file.css" />
</head>
<body>
<div
id="content"> <!--I will explain this div
later-->
<h1>Heading With Your Important
Keywords</h1>
<h2>Subheading With Important
Keywords</h2>
<p>Your important content will
be here, with keywords. Notice how this is right at the top of
your code. No matter where this is on the page, you want it here
at the top of your code.</p>
</div>
<!--This would be the end content div-->
<div
id="nav"> <!--This div represents a navigation
example-->
<p>This could have image buttons,
text, or both. If using images, make sure to include alt text
which should contain keywords. With tables for layout, this
would most likely be above the content, now it is below where it
should be. The div id above will help you control
this.</p>
</div>
<div
id="banner">
<p>As the name can imply,
this can be at the top of the page, but notice how it is way
down in your code because it has no strong SEO elements. It
might be your logo or additional navigation. Even though it
shows at the top of the page to the user, it is not the first
thing you want the search engine to read or display in search
results.</p>
</div>
<div
id="summary">
<!--This div can be
anything, used here as example-->
<p>This example
of another div is used to illustrate another SEO principle. Use
keywords in it so it is like your closing point. By appearing at
the bottom of the code, it makes stronger SEO.</p>
</div>
</body>
</html>
Next, I will show a simple example of how to make the
file.css to control the layout. You can use this code in a text
editor to see the effects. For simplicity, I will focus on only
the layout code, we will not be declaring fonts, sizes, links,
etc.
In the HTML example, we have 4 sections (divs). You
can divide up by pixels or percentages (or even both). We will
be using pixels for simple illustration of the principle
here.
/*Begin CSS*/
/*Just for the
record, this is a comment in CSS*/
#nav {position:
absolute;
top: 0px;
left: 0px;
width: 200px;
height: 500px;
padding: 20px 10px 10px 20px;
}
/*To explain the code above, I listed the divs in a
different order than the HTML. This order follows the flow of
the way I am doing the page layout. It also follows the flow you
would have if you set up a table structure in HTML. The nav
section butts up against the top left corner of the page (top
and left are both 0px). The # sign defines the "id" of
the div followed by the name. I set the width to 200px which is
like making a table cell that width. I have used the 500px
height just as an example so the summary below will start where
the nav ends. You want to be sure everything will fit with the
sizes you specify. You can also set padding, but unlike a table
cell in HTML, you can set each side separately. In the example
above, the first 20px is the top, then it declares each side in
clockwise order so the left side is also 20px.*/
#summary {position: absolute;
top: 500px;
left: 0px;
width: 200px;
padding: 20px 10px 10px 20px;
}
/*The summary above starts where the nav ends, at
500px from the top. The other settings match for alignment. I
did not set a height because it will stretch just like a table
cell when you insert your content.*/
#banner
{position: absolute;
top: 0px;
/> left: 200px;
width: 550px;
height: 150px;
padding: 20px 0px 10px 20px;
}
/*The banner will be at the top of the page, but will
start at 200px from left where the nav ends. Declaring a height
is optional, but it will help for making sense out of where the
content below will start. I used 150px just as an example. The
reason for 0px padding on the right side is because the
remainder of the screen is empty in this layout, no need to pad
that side. I limit the width so it will display well down to
800x600 res (the total width here is 750px).*/
#content {position: absolute;
top: 150px;
left: 200px;
width: 550px;
padding: 10px 0px 10px 20px;
}
/*Now the content starts right where the banner leaves
off, 200px to the left and 150px from the top. Notice this is
last. If you used tables to create the same layout, this would
be last in your code too. The search engines would read
everything else before getting to the meat of your page. In the
HTML used here, it is at the top of your code so the search
engines see it first.*/
/*End CSS*/
These are simple examples, but if you can think in terms of
top down logic, you can build search engine friendly pages. They
will also load faster as complex table structures take longer to
load than CSS layout, which is another benefit to CSS.
About the author:
Steve Chittenden seeks to help business owners and organizations
market themselves effectively and succeed. His company, Creative
Business Services, provides carefully planned web design, graphic design,
writing, and marketing services aimed at achieving this
goal. Please visit www.cbscreative.com for
more information.
