CSS Tricks for Better SEO



Are you optimizing websites? Then you probably know it already. It’s often really difficult to build websites for both users and Google.

There are even two separate disciplines by now to deal with it: user experience or short UX and search engine optimization or SEO.

Google still needs to be assisted in finding a website and assessing its worth.

The needs of users and the search engine are so different Google optimization can break the actual user experience altogether.

Of course there are plenty of CSS solutions to remedy Google’s flaws. I do not like the term tricks. You might wonder as well why I use such a dirty word!

I have to refer to these techniques as CSS tricks as in fact these are often workarounds to suit Google.

Google is Stupid

Google spiders are still pretty stupid when it comes to dealing with websites. They don’t see and understand websites. They just eat them in a way.

They can “read” JavaScript and CSS by now but they still have difficulties in finding out which parts of your site are the most important ones. You need to tell them.

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 focus on Google, which is the by far dominant search engine in most of the western markets.

As Google dominates the search market they also force website owners to show their private parts. You have to make Google spiders crawl your styles and scripts or face a penalty.

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 tricks yourself.

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

Long story short, these tricks are legit! OK, then. Let me present 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 either to scroll for ages or 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?” you might ask? Doesn’t Google discount content hidden or even penalize sites for hiding it? It depends.

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. You can mix both though to place the content on top while the website stays fluid even when resized.

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.

As of 2021 Google will even ignore most page titles and display instead the text found in headline elements on the actual pages.

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.

When you don’t 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

While pure CSS menues are not really a trick to be honest. Some 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.

Of course such website navigation also works best for accessibility so that blind or visually impaired people can use them. When you ensure that even your parents or grandparents can use a site you get more visitors.

Google-friendly Tricks

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. Subscribe for more!

First published: April 25th, 2008. Last updated: September 9th, 2021.

* Creative Commons image by Martin Abeggien.