CSS Tricks for Better SEO
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 to remedy 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 often workarounds to suit Google.
Google is stupid
Google bots are like animals, you really have to assist them to find things.
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.
CSS tricks vs SEO tricks
On a side note: “trick” sounds like “black hat SEO” or cheating search engines. Well, take a look at the trciks yourself and tell me whether I’m cheating or whether Google is making web development a pain in the back. CSS tricks are not the same as old school SEO tricks.
OK, then. Let me present to the CSS tricks for better SEO in no particular order:
1. 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
user experience is key in making your visitors read the whole article.
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, low level webmasters still employ it
and my potential clients sometimes wonder why they don’t rank while using hidden text. So try to limit the usage of hidden text! Hide text only to enhance user experience and improving readability. This way you can divide the content into easily digestible parts while still having it on one page.
2. 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.
For a complex site with lots of menus, scripts and other gimmicks you should consider absolute positioning.
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. Make sure to stay readable on mobile devices though. Responsive design rather uses relative positioning.
3. 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.
4. 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.
What to do when 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.
5. CSS Sprites
Now that site speed is an official ranking factor at Google even the webmasters who didn’t care about fast loading pages until now have to. One simple technique to use reduce page load and the number of requests is the usage of so called CSS sprites.
CSS sprites are basically several small images merged into one big image.
Instead of loading each image by itself you can load just the CSS sprite and display only part of it depending on the user interaction. You use a background-image for that purpose and move the displayed area on click or mouse over then. In order to accomplish that you simply change the background-position in the CSS.
6. Pure CSS Menus
Many advanced CSS only menus offer slick interactivity while being the best choice for Google and other search engine spiders.
Now can you use these techniques 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.
Beyond the basics and dogmas
Now you might argue “this is not SEO 2.0 – these are SEO basics known for years”. It’s not really the case though. The web developer community is rather keen on web standards to the point of dogma where for instance absolute positioning is frowned upon. Most people developers won’t use it.
In case you want to learn more about advanced SEO 2.0 methodology you might want to read more in this blog. It’s full of SEO 2.0.
First published: April 25, 2008. Updated: October 11th, 2010: PageRank Sculpting removed, CSS sprites added, some minor changes. Updated: March 17th, 2014: siFr image replacement removed, several changes for the sake of readability. Updated: June 18th, 2015: broken links and obsolete advice removed. Last updated: July 24th, 2015: image changed.
* Creative Commons image by Martin Abeggien.