We all know the overt benefits of using CSS by now – being able to centrally locate all of our presentation, the ability to replicate design changes instantly over an entire website, and so on. But not everyone is sold on such details. These days, a lot of people are more interested in SEO (Search Engine Optimization, or making your pages look good in search engines) than anything else. So what happens if you have a client or an employer whose mantra is more along the lines of, “SEO at any cost, CSS be damned”?
Well, I have some good news for you! Using CSS (and its trusty sidekick, XHTML) is actually very beneficial to your SEO standings. Below, I’ve outlined four different ways that using CSS can help you improve your search engine optimization. Some of them happen automatically, while others require you make decisions.
Streamlined XHTML
In the world of SEO, size and location matter. If your page is significantly long, the content towards the bottom of your page won’t rank as “important” as the stuff at the top. And here’s the important part – the “length” of the page is determined not by the amount of content (text, etc), but by the quantity of code. If Google has to read through a few hundred lines of nested tables constituting your top navigation before it ever gets to your content, then you’re running the risk of the search engines considering the real guts of your website insignificant.
Organized Code
Sure, your table-based design might look just fine and dandy on the screen, but when it comes to search engine optimization, it’s what’s underneath that really counts. Search engines don’t scan your page visually… they piece together a “picture” of your site based on the code. And you may discover that your table-based design doesn’t “read” quite the way you expected.
Take the image above, for example. A search engine would read this page just like any other table: from top left to bottom right. It would read everything in the header, everything in the navigation, and everything in the sidebar before it gets to the content. And if your navigation and sidebar are the same on every page, you’re going to take a negative hit in search engines for having a lot of duplicate content up front.
Luckily, when you’re working with CSS, you can organize your code any which way you choose. You can make sure your valuable, keyword-rich content is right up near the top of your XHTML, and push your sidebar into a div down below your content area. Your CSS can put your sidebar anywhere you want or need visually… and it won’t change Google’s reading of your website one iota.
Headings Make a Difference
As mentioned previously, when you’re worried about SEO, you should be worried about your code. It’s what’s underneath that counts when it’s a search engine browsing your page – the visuals matter not a whit. To that end, make sure you’re using good, old-fashioned heading tags (<h1> – <h6>) for all of your documents headings instead of just styling paragraphs or some other element with *shudder* font tags, or even CSS.
You don’t like how the third-level heading looks just above your article? Well, Google thinks it looks delicious, so maybe you should reconsider. Just whip out your mad CSS skills and style that heading to look like… well, like whatever you want! Google doesn’t mind if your headings are 30-points tall and fuchsia (even if your other readers do).
Choose Your Emphasis
Headings aren’t the only things that affect your SEO. Search engines also pay attention to a few other tags when determining what the “important” words on a page are. For example, Google tends to treat words wrapped in <strong> and <em> tags as being more significant that their surrounding text. That’s why you’ll sometimes see pages with randomly bold-faced or italicized word strewn about – they’re trying to boost their SEO by helping Google find the keywords they want to focus on.
But who’s to say that those keywords need to be visible to everyone? We could always use CSS to ensure that search engines like Google and Yahoo understand which words are important, without having to annoy our readers with our strong-em soup. If we just take some XHTML like this:
<p>This sentence contains several <strong>keywords</strong> of <em>significant importance</em>.
Append it with a new “SEO” CSS class:
<p>This sentence contains several <strong class="seo">keywords</strong> of <em class="seo">significant importance</em>.
And then write a simple CSS rule like this:
em.seo, strong.seo {
font-weight: normal;
font-style: normal; }This CSS will prevent your SEO-purposed strong and em tags from being bold-faced or italicized on the screen. However, search engines will still recognize the significance of those tags.
CSS and SEO, living together in perfect harmony. Who says you can’t have your cake and eat it too?
On July 24, 2008
6:04AM
xxx said:
That’s one of the more stupid theories I’ve heard, I’m afraid. Hello? Crawlers are not humans, they don’t get bored to death.
On July 24, 2008
8:49AM
Rob said:
Umm… hello, I guess, vaguely anonymous? Thanks for your considerate and respectful response. While I suppose an insult to someone’s mom would be the best retort here, I’m going to keep it civilized.
I’ll give you that my wording probably wasn’t the best choice (and I might go back and edit it, at that). Most search engines probably ~do~ read to the bottom of a page. However, everything I’ve read on SEO suggests that things closer to the top of a page are often considered more “important” by the engines than those coming at the bottom. Thus, if you’re willing to anthropomorphize the search engines for the sake of a metaphor (though it sounds like you’re not), the crawlers sort of ~do~ get bored by the end of long documents, in that they consider the stuff that came before more significant.
Now, I do realize that I’m simplifying the process here a bit. I’m perfectly okay with that. This is CSSnewbie.com, after all, not SEOpontification.com.
On July 25, 2008
8:06AM
Ahmet said:
Have to agree with Rob, the content in top position seems to be seen as more relevant as below content. About page length I have no idea…
On July 29, 2008
7:34AM
shmack said:
“xxx” is an idiot – don’t bother. i hope he’s not a web developer, that wold be very embarassing for the whole industry.
On August 06, 2008
1:42AM
Abhisek said:
Very nicely written indeed. I used another techniques to hide text by text-indent:-somebignumber; that way it looks good and seo is also ok with it…
On August 07, 2008
3:04AM
wh999 said:
Abhisek – that’s naughty mate and you’ll get caught out sooner or later. Of all the ways to hide text with CSS that one is the easiest for Google to spot (and they do crawl css files these days). a negative indent is like holding up a big flashing sign saying “I’m hiding text over here”
Rob – I agree with some of what you say but other bits are pretty dodgey. Adding normal styles to em and strong tags… well it sounds a bit much like your presenting one thinmg to the SE and another to the visitor. I asume you’re aware that this is against the Google Guidlines? Apart from that, do you really think its going to get you up the serp’s, with so much else to consider? And I have some pretty long pages with duplicate navigation etc but I make sure titles and headings are unique – all pages are indexed. CSS helps you keep pages lighter on the code so the spiders can crawl the content more easily and the pages load faster – there may be some milage in that from an SEO perspective. Also nested tables can result in things like screen readers getting confused and garbling the content but jiggling the positions of the text around too much using CSS will only have the same effect
On October 16, 2008
12:16PM
Orange County Search Engine Optimization said:
Content located towards the top seems to be more important than other content within the page. However, content at the very bottom and middle also seem more important. That is why it is important to sprinkle your key phrases and keyword evenly around the page, including the anchor text of links, links within the content, H1-H6 tags, ect. Bolding keywords does SEEM to have an affect, though not that much. The most EFFECTIVE on-page optimization technique is the TITLE TAG. By far more important than anything else, besides content as a whole. Analyze the competitors title tags, and mimic that, then work mostly on link building. I have tested this theory and it works. visit my blog at http://xpirtdesign.com/seo-tips if you would like to read some of my other articles.
On December 24, 2008
12:32PM
Search Engine Ranking said:
Excellent information on the seo benefits of css Rob, You can also get some load time benefits by placing you images in CSS the load time of your webpage will be more friendly to the crawlers. And agreed with the content placed at the beginning over about the fold, being more important for relevancy score by the major search engines parsers.
On January 05, 2009
7:10PM
Chris - Free PS3 said:
I’m just starting to re-write my non-CSS site so that it now uses style sheets. The site will look the same but will hopefully be more search engine friendly and this article has been a fantastic help. I’ve picked up some great tips. Many thanks.
On January 08, 2009
7:07PM
MickG said:
nice information on the benefits of css in seo
On March 05, 2009
8:57AM
Michael Robbins said:
Do the names of the CSS Class count to SEO?
On May 13, 2009
5:34AM
Facundo said:
I disagree on most of this article.
The content’s position don’t affect SEO, as search engines are able to identify blocks such as headers, navigation, sidebars and the actual content and give each one the corresponding weight.
Also, if you emphasize something to search engines but make it look like regular text to users, it can be marked as a deceptive technique and lead to a penalization.
Anyway, semantic XHTML + CSS can greatly improve your rankings, as it leads to better crawling, faster website response, and better Accessibility and Usability, which gives you higher conversions and increases your linking chances.
On July 20, 2009
2:51AM
SEO Orange County said:
Awesome post, i’ll digg it and link to it.
On September 02, 2009
1:53AM
Andrew Jhonson said:
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. I have compiled few factors ‘why Google loves CSS’ that you can check at http://www.bestpsdtohtml.com/get-to-know-why-css-is-good-for-google/