|
|
|
Home::CSS
SEO Benefits Of CSS
Author : Steve Chittenden
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.
Spam emails More free articles Related articles
|
More related feeds |
SEO Benefits of CSS
What many clients do not realise though is that CSS can also be advantageous in terms of SEO. Some of the reasons why CSS can benefit your SEO efforts include:. * Less code - Less code means greater readability of the content, ...SEO Benefits of CSS Part 2
Use of standard HTML tags - By using CSS web designers are forced to used standard HTML tags that have SEO benefits like the heading tags instead of relying on font tags for styling content. Font tags work just as well for ... SEO Benefits of CSS - 1
SEO Benefits of CSS - 1 July 15th, 2008 Lots of web design clients nowadays prefer web designers to use Cascading Style Sheets (CSS) mostly because a website designed using CSS is really easy to maintain. CSS allows content and design ... SEO Benefits Of CSS
Which is taken prior by SE; using external CSS or tags given inside the page.? 1 Vote(s) SEO Benefits of CSS Part 3
Going back to the benefit of CSS that web designers and webmasters seem to love the most, which is the very ease of maintenance, if you think about it you’ll realise that this is actually also beneficial for your SEO campaign because… ... Review: Buy & Sell World of Warcraft Accounts
The use of gratuitous text has SEO benefits, though. There's lots of keyword-rich paragraphs here. I can't knock them for that. Unfortunately, it looks like someone with Microsoft FrontPage marked this page up and believed that every ... Online Marketing Manager SEO PPC / Yodle Inc. / Manhattan, NY
Experience hand coding HTML and CSS is a plus. ? Proficiency with Microsoft Office (Excel, Word, PowerPoint, etc.) ? Experience with online display advertising, banner advertising, Affiliate Marketing, Web site Analytics and ... SEO The Cheap Way
SEO Benefits Of CSS 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 ... Casual Articles: SEO Benefits Of CSS at www.casualarticles.com
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. These are simple examples but if you can think in terms of top down logic you can build search ... SEO Through Blogs & Feeds
-Build content based on keyword list for SEO benefits. -Plan to keep the mojo going. Email Amanda for lecture slides. Next up is Lee Odden from the Top Rank Blog. Will show us a few case studies. Started a blog in 2003 - Top Rank Blog. ...
|
|
|
|
