CSSnewbie

4 Ways CSS Can Improve Your SEO

Posted on July 23, 2008. By Rob Glazebrook.

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?