7 Ways to Use CSS for Better SEO

I used to write the worst code in the world.

It was sloppy, bloated and choked search engine crawlers like a boney chicken sandwich.

Then I learned the right way to use CSS. I learned it from Andy Budd, Simon Collison and Cameron Moll in a phenomenal book called CSS Mastery that should be on every front-end developer’s bookshelf.

css-mastery

That’s my copy looking well-worn from years of use.

Here’s the thing: search engines love clean code. When you give it to them your websites tend to rank better.

But if you learned how to build websites with tables and <font> tags chances are your code isn’t clean. Your pages are probably overloaded with extraneous crap that search crawlers don’t need or want.

Using CSS properly gets all of your presentational code out of the way so search crawlers can focus on what they want: your content. It’s also from an SEO standpoint in various other ways.

Here are seven ways you can use CSS to improve your search rankings.

1. Clean up your code

When code gets bloated the signal to noise ratio gets out of control. The result is code that search crawlers can’t make sense of (not to mention developers trying to get maintenance/updates done).

The beauty of CSS summed up: it keeps your styles separate from your content.

From an SEO standpoint this is great – search crawlers get straight to the content with none of the code that sets colors/fonts/sizes getting in the way. And your design can stay glorious. Everyone’s happy.

2. CSS-driven drop-down menus

Drop-down menus are nifty and add a level of usability to your website – especially when your site architecture requires multiple levels of links.

But building them from scratch sucks. So most of us grab scripts from around the web and frankenstein them into our designs to speed up development.

The problem: many of these scripts use JavaScript to construct the link lists.

There’s nothing wrong with JavaScript. It powers much of web as we know it today. But when you hide your link code inside JavaScript search engines don’t see it.

CSS-driven drop-down menus are search-friendly, because they use CSS (with some slight JavaScript) to appear/disappear. When a search crawler hits your page all of the links are visible in the source code. This promotes a “flat” site architecture – or one where most of your pages, even the deep ones, are linked from the home page – helping spread the link juice to them.

Here are some SEO-friendly CSS drop-down scripts to consider using for your next project:

3. Hidden/expandable DIVs

Sometimes a design calls for having a portion of the page “expand” to reveal more text or other content when a user rolls over with their mouse or clicks a link/button.

Sometimes these hidden areas are driven by JavaScript – again, this delivers the desired functionality, but from a search crawler standpoint the content is invisible.

Using CSS you can create a hidden <div> (which is a generic container), set it to be “invisible” and trigger it to appear when a user mouses over or otherwise activates it – and you can do it in a way that keeps all of the code visible to search engines.

There’s a great example of this at RandomSnippets.com (complete with the code that drives the action).

4. Use images for headings without sacrificing the text

Often times your design guidelines require you to use a certain font for your headings and other elements. But only a handful of fonts are “web safe” – meaning they’re standard to most operating systems and browsers so your users will see them.

The normal approach to this problem is to use an image instead of text to achieve the look you’re going for.

The problem: search engines can’t read words in images.

CSS provides a pretty painless solution – use image replacement to hack the text back into your heading.In other words, you get to keep your heading image AND your text (so search engines can read it).

Here are two methods to do this that are simple and quick:

5. Use images for links without sacrificing the text

Sometimes you can’t get that top navigation bar looking just right without using images for the buttons. But anchor text is important.

You could use ALT text to indicate the text in the images – and this will give the search engines a hint. But if you’re using background images with CSS for your links you won’t have this option.

Setting the “title=” attribute in your links will also give some indication – but it pales in comparison to including actual anchor text.

With CSS you can use images for your links while still including anchor text in the code.

One easy way: set your “text-indent” property to -9999px;. This essentially pushes the text off the page, leaving the image viewable. This is the same method as the Phark method listed above.

Note: don’t get funny with this and try stuffing keywords into your links since they won’t be viewable. If you get a manual review from someone on a search engine’s spam team your site will be smacked.

6. Speed up load times

Load times are a concern for search engines. Crawlers will only spend so much time parsing your pages (depending on how important they think the pages are). That means if you have pages that contain a lot of content and features chances are search crawlers won’t bother with the whole thing.

Not to mention the usability issues you create with slow page loads.

Another thing to keep in mind: Google Webmaster Tools shows you how much time Googlebot spends downloading pages at your website. Think about it: why would Google store this information if page load time was not a concern for their crawler? Do you think Google wants to send their users to pages that take 5-6 seconds to load?

Using CSS properly can chop page load times significantly. It frees your site of <font> tags, <table> tags and many of the other extraneous code that drags down your site performance.

7. Control code order

With most CSS-driven designs you can actually change the order of elements in your source code without effecting the design. This is because the presentation (the position, size, layout, color, etc) of elements is entirely separate from the code.

Why is this useful for SEO?

There’s a little issue with the way Google crawls links on to your internal pages. They only count the first anchor text they find.

That means if you link to your Services page with the text “Services” in your main navigation, but then link with anchor text “Widget Repair Services” somewhere in the body of your home page only the first anchor text will count.

So tweaking your footer links and body links won’t help if the same pages are linked to in your header.

CSS gives you a unique opportunity: to visually place an element independent of its position in the source code.

For example: if your left navigation column occurs first in the source code, followed by your body, or right, column, you can’t use internal links in the body to optimize those lower-level pages (because they’re already linked to in the navigation). With CSS you can swap the columns in the source code without effecting the visual design. So when Googlebot comes along it’ll first scan the links in your body copy, count the anchor text there and ignore the anchor text it sees later when it scans down to your navigation.

These are just a few of the ways working with CSS can improve SEO. If anyone knows of some other CSS tricks that help with SEO please feel free to drop them into the comments.

Comments

  1. Mike,

    Great collection here. I was once like you, not so long ago, and created crappy code. CSS really opened my eyes to some amazing things you can do and you touched on some of them!

    • Mike Tekula says:

      Thanks Casey. CSS is awesome stuff, incredibly useful (and not too complicated either). It’s a basic building block for any developer. Oddly enough, though, some seem to be unaware of the right and wrong ways to use it.

  2. CSS has been around for so long, and all SEOs on the planet are recommending it all the time. Unfortunately there will always be people building crappy websites which is sad because it’s not a rocket science, but things like CSS has been neglected from laziness and ignorance.

  3. I know that you certainly made me a believer a few years back. I was completely floored at how streamlined code can be when CSS is used properly.

    Just a note, above the first tip you have nine instead of seven. Great article though, and definitely should be preached more.

  4. Mike Tekula says:

    So was I – after building websites the wrong way for a few months. I rebuilt one client’s website for free when I realized how much better a job I could have done the first time. The separation of content from presentation is a beautiful thing.

    Whoops, good catch – thanks.

  5. “Sometimes a design calls for having a portion of the page “expand” to reveal more text or other content when a user rolls over with their mouse or clicks a link/button.

    Sometimes these hidden areas are driven by JavaScript – again, this delivers the desired functionality, but from a search crawler standpoint the content is invisible.”

    Wasn’t SEOmoz’s recommended page penalized [accidentally] for this type of coding?

    Also, there’s another CSS way to make pretty SEO headings without giving up the image, that makes life a lot easier: http://seoroi.com/ideas/sexy-seo-heading/

  6. Mike Tekula says:

    @Gab Sorry your comment ended up snagged as SPAM via Akismet.

    I remember that SEOmoz was penalized for something on that page, but I had thought it was because one of the websites they were linking to was considered a bad seed. Did they blog about it?

    I think it’s reviewed on a case-by-case basis, but the tab feature at the top right of Blogstorm.co.uk, for example, I doubt would trigger a penalty.

    That’s an interesting technique you highlighted – thanks for sharing.

  7. I am not a programmer but I have an excellent programmer with 15+ years experience when I need custom programming for my clients. When I do a project by myself, I manage to get along using the Thesis theme for WordPress that has a fairly easy to use custom.css style sheet. Are you familiar with it? Is it clean?

    • Mike Tekula says:

      I’m actually in the latter stages of two custom Thesis blog designs – very familiar and happy with Thesis.

      Thesis is as clean as it comes – it’s not so much a matter of your custom.css being clean, but the HTML output from the Thesis/WordPress combo is very clean and SEO-friendly. Probably one of the best platforms out there from a SEO standpoint.

  8. Mike Tekula says:

    ps This site actually runs on Thesis.

Speak Your Mind

*