4 Ways CSS Can Improve Your SEO

Published July 23, 2008 by CSS Newbies.

\"All A Bored\" by bruceley. Used under a Creative Commons license.

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.

An Organized Kitchen

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

Headings in various typefaces

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

Emphasized red peppers

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?

81 Responses

  1. Casie (reply)

    Admiring the time and effort you put into your
    site and detailed information you present. It’s nice to come across a blog every once in a while that isn’t the same unwanted
    rehashed information. Excellent read! I’ve bookmarked your site
    and I’m adding your RSS feeds to my Google account.

    My website :: Casie

  2. dartboardslim (reply)

    I’m extremely pleased to uncover this website.

    I want to to thank you for your time due to this fantastic read!!
    I definitely savored every bit of it and I have you saved to fav to see new things
    on your web site.

  3. Sign Up (reply)

    Do you have a spam issue on this website; I also am a blogger, and I
    was wanting to know your situation; many of us have created some nice procedures and we are looking to trade solutions with other folks,
    please shoot me an e-mail if interested.

  4. 2014coachoutletstore.com (reply)

    Doh! I was domain shopping at namecheap.com and went to type in the domain name: and guess who already purchased it? You did! lol j/k. I was about to shop for this domain name but noticed it was taken so I figured I’d come check it out. Nice blog!

  5. ไฟโตเอสซี (reply)

    Hello There. I discovered your weblog the use of msn. That
    is a really well written article. I will make sure to bookmark it and return to learn extra of your helpful info.
    Thanks for the post. I’ll definitely comeback.

  6. web designer manchester (reply)

    First of all I would like to say fantastic blog! I had a quick question that I’d
    like to ask if you do not mind. I was curious to find out
    how you center yourself and clear your head prior to writing.
    I have had a hard time clearing my thoughts in getting my
    thoughts out. I do enjoy writing however it just seems like the first 10 to 15 minutes are wasted simply just trying to figure out how to begin. Any
    recommendations or hints? Many thanks!

  7. เนอร์สซิ่งโฮม (reply)

    Thanks for a marvelous posting! I definitely enjoyed reading it, you might be a great author.

    I will be sure to bookmark your blog and definitely will come back
    at some point. I want to encourage one to continue
    your great writing, have a nice day!

  8. BeavisA (reply)

    I don’t see many comments here, it means you have low visitors. I know how to make your website go viral. If you want to know just search in google for:
    Kimting’s Method To Go Viral

    1. Mark Excell (reply)

      CSS has no positive effect on SEO, however it can have an negative effect. Apart from inbound links, Google first looks at the source html and weights content at the top of the source, it then renders the page and considers if the website is trying to bends serps by use of CSS.. Generally don’t use CSS to artificially bend the read order of the site as if this is detected it can cause major issues.

  9. Essie (reply)

    You want to go to your physician to seek out out if
    your weight drawback is because of a medical condition so you may deal with
    your specific downside.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>