Search Engine Optimization and CSS

I am all about Cascading Style Sheets, or CSS. As an SEO consultant, I find they are perfect for optimization purposes. There are truly no limitations of CSS that should keep an SEO from utilizing style sheets for presentational elements instead of putting it all into HTML.

I love CSS, because I hate font tags in my html, and I truly despise tables. I’m a very organized person, and everything has to be in its place; so when my code is all untidy, it makes me uneasy. It makes me feel the same as when I have a lot of junk mail piled up all over the office, or when it’s time to clean out the garage.

There are actually many reasons while I like external style sheets so much. Part of effective SEO contains the following elements that can be addressed by utilizing external style sheets: maintaining a good content to code ratio, using lots of relevant content, and filling the page with as much text and links as you can without spamming the search engine spiders.

Before I enumerate the ways CSS is beneficial in search engine optimization, understanding a little bit about what a search engine spider sees when scanning a page is important. Search engines read pages like you and I do, from top to bottom. It also assumes that the content near the top of the page is more important than the content at the bottom of the page. The text at the top of a page receives more weight than the text at the bottom.

I’m not going to cover the basics of XHTML (Extensible HyperText Markup Language) or CSS, because that’s not what this article is about. I’m going to assume that you have at least a rudimentary knowledge of CSS and XHTML. If not, there are hundreds of helpful CSS tutorials on the internet. One particularly good set of tutorials on CSS is Cascading Style Sheets in Dev Articles.

Another website to start learning about CSS is the place where it all came about: The World Wide Web Consortium, or the W3C. Learn about XHMTL also at W3C’s website. Their tutorials will help you understand and recognize the difference between HTML and XHTML. For all intents and purposes, you don’t need to know much about CSS for this article to make some sense to you, although it will be extremely helpful.

So why use CSS? Here are several ways that will help you understand how CSS is an appropriate SEO tool.

1. Pages Load Faster

Web pages designed with CSS are much smaller in size than pages designed solely in HTML. Smaller pages load faster because there is less overall text to be rendered in a browser, and also less code for a search engine spider to trudge through.

Let’s take for example two web pages that were designed differently, but look identical to the human eye. One was designed completely in HTML, the other in CSS and XHTML. The pages have the same content, the same images, and the same elements. The HTML page is 39 kilobytes, while the web page designed with an external style sheet is only 8 kilobytes. By eliminating font, table, and other tags in the HTML, we saved 31 kilobytes in the page that utilizes CSS. Page load times for the HTML page are close to one minute with a 56.6K modem; whereas, the page with the style sheet loads in just a few seconds.

Overly heavy pages are not as effective in search marketing as light pages. Less HTML will improve how well the search engine can parse the page, and return it in the SERPs (search engine results pages) when a visitor makes a search engine query.

Search engine spiders are very simple animals, so to speak, and generally fairly standards-dependent. They need standards-compliant code in order to access all areas of a website. Since font tags are deprecated, it makes sense not to include them in your HTML, which will make for a smaller file.

2. Accommodates Accessibility

CSS is very friendly to accessibility readers. Not everyone views web pages in browsers like Internet Explorer or Mozilla’s Firefox. People who are visually impaired or have other disabilities use accessibility readers. Accessibility readers are tools that read code for the viewer and translates HTML into audio, extra large text, or other formats that just strips out all the html tags.

Content in pure HTML is not organized in such a way, referred to as the ‘code flow’, that if all the tags were removed, (as they would be if HTML is translated into audio or text), there would be no logic to the content, especially if the HTML was designed poorly or with a lot of tables, and the visitor could make little sense of the content.

“It is important to remember that accessibility tools can only partially check accessibility through automation. All accessibility tools scan the source code of a web page using interpretations of either the United States Rehabilitation Act Section 508 standards and/or the World Wide Web Consortium’s Web Content Accessibility Guidelines 1.0 (WCAG). Of the sixteen standards in Section 508, only seven standards can be partially evaluated automatically; similarly, of the combined 65 checkpoints in WCAG 1.0 Priority 1 through Priority 3, only nineteen can be partially evaluated automatically.” ***

Just as when writing an article in Word, I don’t always accept some grammar and spelling checks by the program, because these sometimes require human judgment to determine if corrections should be made.

If human judgment is required during scans of HTML with accessibility tools, then having to reorganize the content of the page, so that the code flow is in a logical order, will take quite a bit of time. Using CSS with HTML properly would ensure that stripping out HTML tags would be unnecessary, and eliminate the need to reorganize the content for readability.

3. Easier to Read Content for Spiders

Search engine spiders are also affected when content is difficult to read. When a spider finds a page that is well organized and not filled with a lot of extra HTML code, it can ascertain quickly and accurately what that page is about. This can certainly improve your search engine ranking.

Contrary to popular belief, search engine spiders don’t completely ignore HTML code. Rather, it weighs certain elements of content on a web page by how they are represented in the HTML.

The best way to start optimizing a web site is to make sure that all the code is readable. If there is too much unnecessary text in your HTML, it is difficult for spiders to decide that a page is relevant to a particular search query. Improving your structural organization will not only make it easier to read for visitors, but ensure that search engine spiders understand what is being displayed.

Let’s use this example. Instead of placing this in your HTML code:

<strong><font face=”Arial” color=”#FF0000″ size=”24px”>Search Engine Optimization and CSS</font></strong>

Use this in XHTML:

<h1>Search Engine Optimization and CSS</h1>

And this in your CSS:

h1 {

font-family: Arial;

size: 24px;

color: #FF0000;

font-weight: bold;

}

Using XHTML to declare your main heading as h1 will ensure that a search engine spider knows that the contained text is a title or sub-heading of the page, while styling it with CSS yields the desired design effect. Using header tags accordingly, SEO’s can use this ideally to style the sub-headings on a website and clue in search engine spiders of their importance, especially when those sub-headings contain keywords. Header tags <h1> through <h6> tags seem to be given more weight than regular text. This is why even though our first example will look exactly the same as the second example visually to the human eye; to a search engine spider, the first example looks like regular text to it; whereas, the text contained in the <h1> and </h1> tags alerts the spider to the importance of the text as a sub-heading.

Most popular search engines, such as Google, MSN, and Yahoo, look for any intention to display one set of keyword-rich, yet hard-to-read, text to search engines, and another, more people-friendly version of the content to humans. When search engines detect this type of behavior, called cloaking, it is perceived as search engine spam, and they can penalize or even ban your site. While the belief is that search engines disregard an external style sheet, it is still important not to use CSS to spam the search engines. Content goes in HTML, whereas presentation elements should go in the CSS file, and that’s all.

4. Tables Cause Problems

When a search engine spider scans a webpage with tables, it sees a lot of <tr> and <td> tags, as well as cell sizes, row widths, border colors and other information that is purely irrelevant to your spiderable content. Most spiders strip out these tags or simply ignore them, but it takes longer to get to the actual content, forcing the search engine spider to sort through the code.

It takes longer for a browser to parse a document filled with tables, also. Browsers operate in an “inside out” fashion. When HTML is rendered in a web browser, it has to find the inner-most table and work outwards. If there are many nested tables, parsing the page, then rendering it to the visitor could take a long time.

Nested tables are especially heinous to accessibility readers, and it is in these cases where content does not follow the code flow of the document, and could make absolutely no sense when being read by accessibility tools.

From a search engine standpoint, having to wade through all the code that comprises tables before it gets to the real content, reduces the page’s ability of being matched with search engine queries, or even indexed. This adversely affects the site’s probability of ranking well during the course of a search engine query.

5. Code Positioning

With CSS, your important content can easily be placed at the top of the HTML code, right under the <body> tag, if the CSS is done correctly. In a web page that uses tables, content is shown in the order the tables are shown, and always below a bunch of meaningless tags to a search engine spider. If you have many cells, rows or columns, your important content may end up way down in the bottom of the HTML code, while unimportant items, like navigation menus and banners could end up at the top of the page.

With CSS, you can format your divisions in such a way that it doesn’t matter where in the XHTML code the divisions are listed. The content will still display in the same way. Therefore, you can move the items such as navigation, banners, and even images, to the bottom of your code without losing your visual styling.

An <h1> tag placed directly after the <body> tag will be weighted heavily by many search engines, especially if it contains one or two of your keywords. So like we showed in the example above, instead of the just altering your font tags to show large text so that it looks like a headline, the second example would be far more search engine friendly.

You can also place images in your CSS as division backgrounds to free up page size, as well as eliminate the need for image tags in your HTML.

6. Simplifies Updates

This actually may mean more to the webmaster, but it has value for the SEO professional as well. If content is easier to access, chances are it will be updated more frequently. Updated content adds freshness to the pages of the website, and freshness is important to search engines.

Along the same lines, when colors or fonts need to be changed, they only need to be altered once in the CSS code, versus revised in every HTML page. And while this holds little real SEO value directly, it is worth mentioning, because indirectly, it allows more time for the webmaster to add or update the important things to his site, such as content and headlines.

7. HTML Code Should Be Tidy

I mentioned this early on in the article, because it is a pet peeve of mine. I keep a page from one of my early websites around for laughs. The code is so awful, I still can’t make heads or tails of all the font, borders, table, and form tags, and it is 62 kilobytes in size. More than just a personal preference, clear cut HTML makes for easier development for the next web designer, or to make changes to content. Being able to find your way around someone else’s code is important to new inductees having to look at a page for the first time. Being able to find their way around makes it easier for proofreading, editing, updating content, and fixing site issues that may prevent spidering or ranking well.

A site designed properly with CSS and XHTML can avoid incorporating any design element in the actual HTML. Let’s look out our two example pages again. The HTML page is 608 lines long; whereas, the page designed with CSS is only 130 lines long. It is much easier to find your way around in the page that contains 130 lines than it is in the one with over 600 lines.

8. Better Use of Browser Cache and Server Resources

You can use CSS to design your page elements, like background images, multiple fonts and colors, or even many divisions with their own individual style. Once the external style sheet loads the first time, it is stored in the browser’s cache. Then, when the subsequent pages are called, the browser does not have to render the linked style sheet over and over, so the pages load faster.

In an HTML page with a table layout, the browser must retrieve, analyze, and render each page one by one, meaning the browser is laboring just as much at displaying the 10 th or 20 th page in your website as it was when displaying the first page. Even if an HTML page is not using complicated tables, the browser still has to analyze the code before rendering the page, so retrieving all those deprecated font tags could have an effect on both how quickly the page loads, and server performance.

Search engine spiders like to crawl multiple pages of a site at a time, following all the links in a site, (unless instructed against them in the robots.txt file), but if a spider has to work harder to analyze the code to find the real content, this could also increase server load. This affects memory, CPU usage, and page file capabilities of a web server. Slowing the spider down due to poor server performance could affect how many pages get indexed at that time, not to mention the possibility of the spider just giving up and leaving the site.

9. Content Ratios

Along with file size, content ratios and density are important things to consider. Content to code ratio is the amount of actual text that exists on a given web page in relation to the amount of code required to display the content in a browser.

A great SEO tool is StarGeek.com’s code to text calculator. This tool allows you to check what percent of your page is made of plain text, as opposed to HTML, CSS or JavaScript. Search engines want to see the highest possible ratio of content to code.

When a search engine spider looks at the web page, it pulls all of the information given on a page, and stores the information in its database. So when the spider comes to a page, it attempts to reads everything, including the actual HTML, JavaScript, or any other code included on the page. The simpler the code is to read and understand, the more efficiently the spider labels the page. The more content a spider has to view, and the less code it has to read, the effects on the indexing of the page by the major search engines has a better end result.

10. Avoiding JavaScript Rollovers and Mouseovers

We all like rollover effects in our web pages. They make links more attractive and dynamic. Using CSS to incorporate rollovers is easy and effective, without having to use a single character of JavaScript. Besides the concept of smaller file size in these cases, using CSS for rollover effects keeps your content and links readable by search engine spiders. JavaScript is not readable. Using CSS will allow you to use keywords effectively in your anchor text of your links, with better search engine ranking results, without having to worry that your keyword anchors are not even being read.

The Bottom Line

There is absolutely no reason why anyone could not use CSS in their web design. It’s easy to understand, and much better for optimization than just straight HTML. The benefits of CSS in search marketing are many, and all of them also make the job of the web developer, the content management person, and the SEO consultant much easier. Understanding these benefits can improve your search engine ranking, and attract search engine spiders to your site. Uncover the jewel of content that had been previously covered up with HTML tags or JavaScript without sacrificing your styling, fonts, images, or even dynamic rollovers.

So why use CSS? Here’s an even better question: Why NOT use CSS?

Footnotes:
***This is a quote from WebAIM’s website.

Google+ Comments

Google+ Comments