|
SEO Benefits Of CSS
|
By Steve Chittenden
[Hits: 8479]
|
|
This article is most useful if you are somewhat familiar withHTML and CSS. I explain the concepts well enough that you do nothave to be an expert, but I want to provide material that willintroduce you to more advanced design in ways you canunderstand.
Like many other web designers, I began laying out web pagesusing graphical tools and discovered the wonders of tables forlayout without anyone telling me to use them. Since browsersupport for CSS is better than it used to be, and tables causeproblems, CSS offers you a benefit you may not have thoughtabout before, the benefit of better SEO.
I want to say right away that quality content should be yourhighest priority, not SEO tricks. The advice given here willhelp you get better search engine results because the key toreal SEO begins with good page structure and organizing yourcontent. By understanding how search engines "see"your pages, you can build better page structure.
Search engines use what is called "top down" logic inlooking at web pages. They look at your code, not the visualdisplay that users see. Human eyes are drawn to the page contentright away, even when there are other things on the page. Searchengine robots do not see things the same way, but, they arelogical and predictable once you understand them.
You have most likely seen search engine results that do not makesense because some obscure content gets displayed instead of theactual content of the page. I will illustrate top down logic soyou can understand how to make CSS work for you.
In the mind of a search engine, the gist of your web page isdetermined first by what content is at the top of the page. Ifyou start with certain words, they appear often throughout thepage, and then again at the bottom so it is essentially yourclosing point, that, in the automated brains of a search engineis what your page is about.
Your well trained eyeballs will probably look for a title, thenread the content; so to you, this is the top down logic of thepage. Read your HTML code from the top down. You may besurprised how far you have to scroll before you get to the realcontent, and, how much other "content" a search enginewill see first. If you use tables for layout, the top down logicof your code looks like it has the legs cut off and the placesettings are on the floor.
Using CSS, you can organize your code so the search engines seeyour real content first regardless of where it appears on thepage.
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 thisdiv 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 matterwhere this is on the page, you want it here at the top of yourcode.</p>
</div> <!--This would be the end content div-->
<div id="nav"> <!--This div represents anavigation example-->
<p>This could have image buttons, text, or both. If usingimages, make sure to include alt text which should containkeywords. With tables for layout, this would most likely beabove the content, now it is below where it should be. The divid above will help you control this.</p>
</div>
<div id="banner">
<p>As the name can imply, this can be at the top of thepage, but notice how it is way down in your code because it hasno strong SEO elements. It might be your logo or additionalnavigation. Even though it shows at the top of the page to theuser, it is not the first thing you want the search engine toread 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 illustrateanother SEO principle. Use keywords in it so it is like yourclosing point. By appearing at the bottom of the code, it makesstronger SEO.</p>
</div>
</body>
</html>
Next, I will show a simple example of how to make the file.cssto control the layout. You can use this code in a text editor tosee the effects. For simplicity, I will focus on only the layoutcode, we will not be declaring fonts, sizes, links, etc.
In the HTML example, we have 4 sections (divs). You can divideup by pixels or percentages (or even both). We will be usingpixels 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 differentorder than the HTML. This order follows the flow of the way I amdoing the page layout. It also follows the flow you would haveif you set up a table structure in HTML. The nav section buttsup against the top left corner of the page (top and left areboth 0px). The # sign defines the "id" of the divfollowed by the name. I set the width to 200px which is likemaking a table cell that width. I have used the 500px heightjust as an example so the summary below will start where the navends. You want to be sure everything will fit with the sizes youspecify. You can also set padding, but unlike a table cell inHTML, you can set each side separately. In the example above,the first 20px is the top, then it declares each side inclockwise 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 fromthe top. The other settings match for alignment. I did not set aheight because it will stretch just like a table cell when youinsert 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 startat 200px from left where the nav ends. Declaring a height isoptional, but it will help for making sense out of where thecontent below will start. I used 150px just as an example. Thereason for 0px padding on the right side is because theremainder of the screen is empty in this layout, no need to padthat side. I limit the width so it will display well down to800x600 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 lastin your code too. The search engines would read everything elsebefore 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 itfirst.*/
/*End CSS*/
These are simple examples, but if you can think in terms of topdown logic, you can build search engine friendly pages. Theywill also load faster as complex table structures take longer toload than CSS layout, which is another benefit to CSS.
|
|
|
|
|
|
