CSS and SEO: The Importance of CSS in Search Engine Rankings

Cascading Style Sheets, or CSS, is the name given for a breakthrough web development language that separates a website's style from its content. Style sheets define how the final web page will look, allowing web designers to change the appearance and layout of a web page just by editing a few lines in a CSS document - and never once have to touch all the content they've already created for a website.

Although CSS is developing a strong foothold as a "standard" in web design, there are many designers and consumers who don't understand the importance of what CSS can really do for you. Beyond making global style changes with one quick update, using external .css files allows website content to be read by search engines. Really read, not just skimmed over. And because search engine spiders can really see what a web page is saying, it likes the page more and will do a lot toward raising your search engine rankings.

The short of it is this: on the Internet, content is King. When search engines don't have to search for your content, they're more likely to boost your ranking up. At the same time, the separation saves a lot of web development time.

What Is CSS?

When web pages were born, they were pretty bland, text-based things that sometimes had an image or two hanging around. As time went on and technology progressed, web pages started becoming more colorful. They used different font styles and colors, background images, and graphics. Life was good.

During this time, tags were (and still are, but we'll get to that) written right into the HTML to tell a web browser that a certain word should be bold, or that the page should display a specific background image. Tags like p, a, h1, table, etc. told the browser exactly how the page should look to the viewer.

Then two major browsers - Internet Explorer and Netscape - decided to shake things up, allowing web pages displayed in their browser to look even prettier. All of a sudden, new HTML tags and attributes like the font tag were added. Not only did this cause problems for designers wanting to separate content from presentation coding, but it meant that some web pages looked terrible in one browser and great in another.

The World Wide Web Consortium (W3C) came up with a solution: styles. Now, all major browsers support Cascading Style Sheets that allow a developer to place presentation code in one file, and content in another.

In other words, CSS is a type of code that is nothing but style. It's the fashionista of the Internet, overly concerned with all the correct colors, sizes, and positions of website layouts. And CSS codes continue to grow, expanding a web developer's ability to do amazing things without cluttering up their content.

How a Search Engine Spider Sees

So, if the nice thing about CSS is that it allows us to save time developing web sites, the important thing is that it leaves us with clean code. Yeah, it's seriously important. Why? If you really want to rise to the top of your search engine rankings, your code should be so clean that a search engine spider doesn't even have to mess with it.

When a search engine spider crawls the Internet, it doesn't see the pretty page you've labored hours over. All your amazing graphics mean nothing to a search engine spider. Text on the graphics? Might as well not even exist. A search engine spider sees one thing: code.

Let's take a super-clean CSS-based layout that is live on the Internet and use it as an example. Phatfusion (www.phatfusion.net) is a website that offers up some of the coolest CSS scripts available. When you hit the link, you see a very cleanly styled page that looks quite pretty in its simplicity. There's text, text images, and some rollover effects going on. Awesome.

Now, let's take a look at what a search engine spider sees. To do this, you need to view the source code of the web page. Do that either by hitting the 2nd image attached to this article, or by right-clicking on the site's web page and choosing "View Source".

None of the pretty images show up. The rollover effects aren't visible. What is visible is text and a few pieces of code such as the div and p tags you see. So, basically, a search engine spider could care less that the page looks simplistically pretty - it just cares that there's a lot of text to go through.

The Difference between HTML & CSS

Looking at the example above of what a search engine spider sees might be a little confusing - but the overall thing is readable. You can ignore the little tags and go right into the text that fills the page.

Essentially, that's what a search engine spider does.

Here's where a huge and so very important difference comes in. While it's pretty easy to skip past the little tags in the CSS-based code above, let's take a look at what a "standard" HTML page's code looks like. Let's go with the most simple type of HTML page, even - one that doesn't use a lot of graphics to determine the way the page looks.

Try hitting WinDaisy (www.windaisy.com) and take a look at its layout. Sure, it's old-school - but that's the point. A more "modern" page will be even more difficult to read. The third image attached to this article shows a small portion of what a search engine spider sees on the WinDaisy site - can you pinpoint where this code displays on the web page?

You still see the same tags ... but they're everywhere. They have to be everywhere, because every single font color, size, bold or italic, table, cell, etc. is defined as it occurs. So that clean (if old-school) layout you're looking at in your browser becomes practically unreadable to a search engine spider. There's a lot of code for it to toss out, and since a spider will only spend so much time on a single web page, it might not pick up the main content at all.

Making CSS Layouts More SEO Friendly

Now that we've got a pretty visual idea of why CSS works so much better in the search engines than HTML, let's take a look at a few things web developers can do to make CSS layouts even more SEO friendly.

• Link to an external style sheet. Yes, Dreamweaver will put all your CSS styles into the tags of your HTML for you - that doesn't mean they have to be left there. If you're more comfortable, design with inline CSS (styles determined in the header) and cut them out to paste in a style sheet. All that's left is to link to the style sheet and your layout looks the same on-screen, but its code is cleaner and easier for a spider to get through.
• Use div's, not tables. Tables require more code to sort through, while a single div tag names the spot on the page and then displays its contents.
• Arrange your div's in order of importance. Within your HTML document, you can place your body at the top of the page and your top navigation at the bottom of the page. It makes no difference to the way the page will look on-screen, but it does make a difference to what a spider finds to read first. Some experts have theorized that placing all navigation at the bottom of the page (as far as div's go, anyway) also encourages a spider to read through the whole page instead of wandering off to follow the first link it finds.
• If it's about style, it should be in the style sheet. Many people start off on the right foot, defining their page's layout and basic colors in an external style sheet. Then, as they start editing their page and adding in content, they allow a text style to slip in. After all, it's just one color, right? Pretty soon, though, you'll notice that your code has become all cluttered and unreadable again. Make sure that all of your style elements go into a style sheet. 'Nuff said.