SEO BLOG

Google baby by skoop.

As most of us know it is often really difficult to build websites for both the user and Google.

Google still needs to be assisted in finding and assessing a website’s worth to such an extent that it can break the user experience altogether.

Of course there are plenty of CSS solutions for Google’s weaknesses. Although I do not like the term tricks I have to refer to them as CSS tricks as in fact these are workarounds to suit Google. Google spiders are still unable to recognize most advanced web technologies like Flash or AJAX.

Google spiders are like little children, you really have to assist them to find stuff and understand it.

There are other search engines of course but they struggle even more so to keep it simple I will concentrate on Google, which is the by far dominant search engine in most of the western markets.

On a side note: “Trick” sounds like “black hat SEO” or cheating search engines. Well, take a look at them yourself and tell me whether I’m cheating or whether Google is making web development a pain in the back.

OK, then. Let me present to the top 7 CSS tricks for better SEO in no particular order:


CSS Pagination
Google has a serious problem with ranking long articles which are divided into several parts. Also long one page articles will outrank short ones usually. Apart from that the usability is key in making your visitors read the whole article so you don’t want users neither to scroll for ages nor to click a link and send a request each time they want to get to the next page of your article.
The solution is CSS pagination. Isn’t it hidden text though? Hidden text is one of the oldest “tricks” to cheat search engines, webmasters still employ it and my potential clients sometimes wonder why they don’t rank while using hidden text. So hands off hidden text! Well, if Digg, your number one anti-SEO site, uses it can it be “black hat SEO”?
Anyways this way you can divide the content into easily digestible parts while still having it on one page. Take heed to another limitation of Google: The crawler might not crawl a very large page in its entirety.

Absolute Positioning
The higher your content is on a given page the more it counts for Google. Google does not see a page like a human being, it crawls the code. Thus the higher your content is in the code the better. So if you have a complex site with lots of menus, scripts and other gimmicks you should consider absolute positioning otherwise Google might even stop crawling your page before it reaches the main content. You can place the actual content high up in the code, at the top, while the users will see it in the middle of the page below the menus.

Styling h1, h2, h* Headlines
In HTML the h1 headline appears huge by default, the h2 is still much larger than the rest of the page copy etc. Many web designers thus used divs and spans for headlines for years to style them the way needed. Now Google won’t know what the headline is unless you tell Google by using h* tags. It’s like in 1999: You really need to use h1, h2 etc.
Of course you don’t have to make huge h1 headlines like in pre CSS times. Just style the h1 the size you want, also you can get rid off the line-height etc. which h1 headline force upon you by using the display: inline; attribute.

sIfr/Image Replacement for Headlines
Many people will argue that styling headlines with CSS is not enough for web designers. They are in fact right. I think it’s by now grotesque that we’re in 2008 and we still are limited to less than a dozen basic standard “web safe” fonts for web design. We were meant to have flying cars by 2000 and now we do not even have real typography on the web. Many people have tackled this problem with image replacement techniques for headlines, which in short will hide the original headline and insert an image in it’s place. Some of them are fairlydavnaced , others are very simple. No isn’t it hidden text again? Yes, it is! Also some of these methods will hamper your SEO efforts moredfirectly as the crawlers won’t recognize the headline anymore.
There is one popular image replace technique called sIfr which is by now officially approved by Google. It uses Flash to display the headline in any font you wish but in code the h* tags are still recognizable.

Using Lists (ul/ol)
Most SEO experts agree by now that so called keyword density is not a major positive ranking factor. It means that mentioning your keywords 20 times instead of 5 will not make you rank better in Google. You may get penalized for so called keyword stuffing though. Now what to do in case where you really need to use the same words over and over? Use an unordered or ordered list. Google allows repetition in lists without penalizing you.
With CSS you can style lists in any way you desire so that if you do not want a list to be clearly visible list style it accordingly. Some people do even a whole site design without tables and layers (divs) or even spans.

Nofollow Attribute
Contrary to what some people believe the nofollow attribute like in a href=”page.html” rel=”nofollow” does not prevent a page from being crawled by Google. As nofollow does not help against Spam whatsoever, as it was its original purpose at which it failed completely, what then is nofollow good for from the webmaster perspective?

Matt Cutts of Google recommends the so called pagerank sculpting. It means assigning PageRank to the important pages while not wasting it on a contact page for instance.

Yes, Google assumes that the page with the most internal links is the most important one so if you link from all your pages to the contact page it will be the most important page for Google. So you really have to tell Google: Do not mistake this page for the most important one by using the nofollow attribute (not tag!) on the links leading to the contact page.

Pure CSS Menus
While pure CSS menues are not really a trick most people still assume that you need JavaScript or other enhancements to make dynamic menus. Well it’s not true, many advanced CSS only menus offer slick interactivity while being the best choice for Google and other search engine spiders.


Now can you use this methods for cheating Google? Well, I guess you can, but these techniques are so low level that Google won’t count it anyway. For all those who mistake SEO with spam: Spam works on a whole different level nowadays so using stuff like hidden text is ridiculous by now. These CSS tricks can help you with legitimate SEO efforts. I do not like the term white hat SEO as it acknowledges that there is another kind of SEO (I don’t agree with that premise, I rather divide: Either it’s SEO or it’s spam). Nonetheless: It’s all white hat SEO if you ask me.

Now you might argue this is not SEO 2.0, these are SEO basics known for years but it’s not really the case, the web developer community is rather keen on web standards to the point of dogma where for instance absolute positioning is frowned upon. So most people won’t use it. Also if you want to learn more about advanced SEO 2.0 methods you might want to read more in this blog. It’s full of SEO 2.0.