Get Higher Google Ranking using CSS
Posted on Aug 25, 2008 by Paul White
When I suggest using CSS
I am not just talking about using it for a little styling of fonts her and there. I am talking about building websites
that almost all design and layout is derived from an external CSS
Why does this increase Search Engine Ranking?
Because Google and other search engines determine what your page is about by many different factors. One of them is by what keywords it finds on your pages. Another is where in your code does it find these keywords? Are they at the top of the page or at the bottom. Are they within H1 tags are just plain text? Are they hyperlinked to other pages and or sites? The other is keyword density. Lets say you are making a site about solar panels. If you have a page that in the source code is 8000 characters, with the word "solar panels" found 3 times. This is pretty low keyword density. But if you have a page that has source code of 1000 characters and the word "solar panels" is found 3 times, this is much higher keyword density. This little fact can make you rank higher that other sites, and is the reason that some very simple sites can rank high, even though they seem like they are low budget sites.
How do I build sites using CSS in this way?
First if you are used to building websites
based on table layouts, you will need to rethink the way you build websites
. Each time you make a table you have your <table width="100%" cellspacing="0" cellpadding="0"> <tr><td align="left" valign="top" width="200"> tags with various attributes. This can take up alot of relestate within your source code. The foundation of using CSS
is to build your sites around the <DIV> tag. Like so
<div class="myCssStyleClass"> or <div id="menu"> Then within your external style sheet you declare styles for one of these classes or IDs.
Using Position:Absolute to get important stuff at the top of the page
Position Abolute is a way to get your objects to sit statically on the page relative to the top left corner of the page. The benefits are you can take code such as your navigation menus and stuff that is less relavent and keep it at the bottom of your source code. While the more important stuff can be kept at the top of the page. The only downfall is if you plan on using Position:Absolute you have to use it for all main objects. Else you will run into objects overlaping in layers which can look kind of messy.
Increased Device compatibility
Whenevery you take a website down to bare bones keeping all your styles on an external CSS
sheet, you make it very user friendly for mobile web browsers.. Instead of displaying it with graphics including the CSS
it will show only the text parts.
I am currenlty working on a website that will use all these techniques I have discussed. Once I have it finished I will report my findings. As of now everything above is just from what I have read online . I have yet to try this with my own websites
. Hopefully everything works out.