WhiteSites Blog

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 file. 

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.

4046 Visitors

Categories associated with Get Higher Google Ranking using CSS


amol | Feb 1, 2009 7:43 AM
hi i just read you article and have one doubt will this work if u use the css as embedded in a theme file used in .net
Scott | Oct 30, 2011 4:13 AM
Google ranks table-based sites just as well as CSS-based sites.

It's the content that counts, and they do not care how the layout is achieved.

See their video and bust the myth...

Email Needed to confirm comment, but not made public.
When you Post your Comment, you'll be sent a confirmation link. Once you click this link your thoughts will be made public.. Posts that are considered spam will be deleted, Please keep your thoughts and links relavent to this Article