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.
Good article, but come on. It’s not as simple as “SEO or spam”. Heck, the search engines can’t even agree and what is considered “spam”.
Sometimes it is nice just to be reminded of the basics. I make list when auditing a site and go over that check list. These are good tips for CSS. I haven’t found a good css menu that works without javascript. It is the cross browser compatibility issues.
Great tips, Tad. I haven’t seen all of them before, so very happy to have learned something new.
This reminds me of a question that is related to this subject. Is using negative margins to move h1’s off the visible page so you have an image header instead considered hidden text? Would that anger the mighty Google gods?
Great tips. Many of them were new to me. Just wanted to say thanks.
I’m going to show this to my friends in the [online] newspaper business, for the pagination tip specifically. Great post Tad!
Great tips..
but i can’t stand the first tip”CSS Pagination”, is it hidden text?
if it is , it can do better for SEO?
heh, fun to find my son here. It’s good that a friend of mine noticed this and let me know about it. :)
I truly don’t understand your view on absolute positioning. How can you position something absolute for Google without your visitors seeing it. This means positioning it outside the viewing window. Not advisable.
Also the image replacement technique is not hidden text when done properly.
@Bruyns, that’s not what he’s saying — he means using absolute positioning to put a big rambling intriduction visually at the bottom of your page (so that the user doesn’t get bothered by it) but reader-wise first thing in the markup. Common trick.
@Tadeusz, what I don’t understand is your paragraph on pagination. What is the effect of pagination on SEO? Good or bad? For my part I find pagination to be a usability infuriation, and a relic to physical source reading psychology.
Bruyns: Sorry, but that’s a stupid question. You don’t have to ask stupid questions to get a link here. Example: position: absolute; top: 0; left: 0; starts at the left top corner of the browser window. Now put the the div code on the bottom of your page and it still be dipslayed on top.
Barney: Basically it depends. It can be both good and bad. In any case CSS pagination can help fix that. Google prefers long pages full of content but sometimes long pages won’t be crawled to the end. So a well linked (with many backlinks) one page resource will rank higher while a paragraph at the bottom of page with no external links won’t show up in the index at all probably. Also there are some other concerns, foremost usability. So you can split up a page and have it on one page at the same time.
Hi Tad!
I have read a couple of your articles/posts and I really like the way you present the stuff :-)
You are now officially bookmarked :-)
Best regards, Trond
[…] Nogle gange må websider godt se pæne ud. Derfor har vi css. Det har ham her seo 2.0-fyren skrevet noget om. Her er artiklen om god css-brug. […]
Love the CSS tips – such a clear explanation – thank you! I am loving your other posts too. Best blog I’ve found in a while.
I too hate IE6 – may this flaccid useless tool wither quickly out of existence and forever be abandoned by Internet users worldwide.
Cheers,
Lorna Li
Nice tips Tad, and even more nice to see that i can read them for free. Keep up the good work buddy, im definatly bookmarking this site as it seems theres a fair bit i can learn from you.
Cheers.
[…] visited and linked, or submitted to social media. Without proper URLs, most of your other great web design, usability and SEO measures get wasted. This is not about your domain name; you need to understand slugs too; Tad […]
Great post for seo tips and trend to promotion your sites and blogs.
The problem with normal pagination is usually getting the meta descriptions different on each page to avoid duplicate content problems (try writing something in PHP for wordpress to give youself a metadescription on each page and then work out how to make it different on each page of the loop …) although as you largely don’t bother with meta descriptions, maybe you don’t see it as an issue!
hi friend i first of all thank you for posting this article.you know iam learning css now and i thought i had finished about 80% of it.But reffering your article i came to know that i want to update more and more.your article shows new tips and tricks about css.Moreover i learned many functionalities.i had bookmarked this page and going to refer side by side whenever i learn css.
I wonder how much these tricks have changed over the past year. Thanks for the great post. I’d like to see an update :-)
Thanks guys for the good tips.
I use external css style sheet. is’t
posible or bad for the seo tradition?
This is indeed a great article. CSS always plays a vital role in web design and it always gives you opportunity to make your website Google friendly.
Good tips. Either way, designers should be creating web sites with as much CSS as possible in order to increase page speed, as this is something that Google will be taking into account in the coming months.
Great tips, Tad. It will definitely help.
Maintaining CSS in seo is a hectic job in itself and you guys are really doing a great job by providing such a useful information.
Pleer had it spot on with the speed element playing a part in Google’s algorithm, they’ve just made it official. Of course that gives designers and SEO’s even more reason to use CSS.
I think one of the key points in this list of ‘tricks’ is absolute positioning, difficult to master, but can make a huge difference to a sites ability to rank well.
Great info sounds very familiar – I guess if your at the top of your game – this needs to be taken with the most seriousness.
Good share
I agree with one of the comments about using CSS as much as possible. I have forced myself to use CSS as pervasively as possible (e.g. forced myself to stop using HTML tables). Problems arise with cross-browser compatibility – that is a major problem for my website creation task. It is hard enough to focus on writing good content – but I have to also keep SEO in mind – and all the programming aspects including CSS (plus browser incompatibilities – test, test, test).
On another point, I use text in favor of images that show text. Images get fuzzy when the browser view is zoomed (unless you use larger images scaled down i.e. higher resolution in anticipation of zoom-in but that makes the image file sizes larger). CSS3 when it gets ratified and implemented in the major browsers will be a major step forward with things such as 3D rendered graphical objects.
[…] Top 7 CSS Tricks for Better SEO […]
Its help on Google crawling and ranking your site with these CSS tricks that combine SEO and usability.
Okay so I read the whole blog post…and I must say being new at SEO and just trying to learn enough to optimize my real estate site…completely over my head lol!
just trying some coding CSS at the moment. At least trying to make sense of it, but i’ll give this a go!!! does anyone if you can have heading and link codes together?? does that affect your SEO???
Nice tips.It will really help for beginners like me.
Thanks. Really helpful tips. Will make a CSS menu in next project.