Today’s topic is about CSS (Cascading Style Sheets) and why it’s a better option for developing a website with good search engine optimization.

Spiders are sent out by search engines to crawl websites and index them in the search engine’s databases. These spiders use what is called “top down” logic, which means they index websites and crawl the content from the top of the source code to the bottom. Considering this, developing websites using techniques like tables and frames hinder your search engine optimization, because they add bulky unnecessary code that makes it harder for a search engine to read.

Using external CSS separates content from presentation which in turn will put the content higher in the source code. This also makes for less code altogether, making it easier for spiders to index apparent important information displayed through tags such as headers and titles.

Separating content from presentation also provides more time for making changes to presentation and/or content without searching through an endless sea of code, leaving more time to update the website with new and fresh content and/or presentation. Making updates, another thing search engines love!

Search engine spiders, as much as we’d like to believe of robotic things, are not stupid. Spiders can see the tricks you try to pull, so adding extra content with keywords and using CSS to hide them won’t help your ranking (putting white text on a white background for example).

Another thing that weighs down website code is JavaScript. Developers sometimes use JavaScript to make flashy navigation and menus; however, remembering the “top down” theory, this doesn’t help the spiders find your content. Good navigation and menus can be made just as easily using CSS and they don’t weigh down the code like JavaScript does, so it’s definitely an option to think about when developing your website.

So, in conclusion,

• DO separate content from presentation using CSS
  
• DON’T try to cheat the search engines by hiding content with CSS
  
• DO use titles and header tags
  
• DON’T use too much JavaScript where you can use other methods such as CSS
  
• DO keep the “top down” theory in mind
  
• DON’T write messy, hard to read code
  
• DO update websites often

As mentioned in my previous post about Flash and SEO goals, the use of Flash needs to be evaluated on a case by case basis for each website project. When making this evaluation, keep in mind a new idea that I just found for Flash that help your website look better, helping it pop a little more than others, but without sacrificing SEO. It’s called sIFR, or Scalable Inman Flash Replacement, and it makes your fonts pretty.

Basically, sIFR uses a combination of JavaScript, CSS, and Flash to find and replace all the text that you specify to be whatever font you like. This means not being restricted to fonts like Times New Roman and Helvetica while still remaining accessible, search engine friendly, and semantic.

In addition to accessibility, sIFR can also be selected, copied, and pasted by users and the load time is virtually nothing – the average user has no idea anything different than usual is going on behind the scenes. Plus, sIFR is compatible with Mac, Windows, and Linux with JavaScript turned on and Flash 6 or greater installed. It also works on all major browsers (IE, FireFox, Safari) as well as even some minor ones (Omniweb, Konqueror).

What’s great about sIFR is that, as I mentioned earlier, it remains semantic. Research proves that websites made with semantic and clean code rank higher in the search engines than those that use deprecated code and that are hard to scan. Even Matt May of the W3C endorses sIFR as an accessible method to create rich typography on the web.

Please keep in mind that sIFR is meant to help the design process and to help pages pop out more. This doesn’t mean creating all your content using sIFR. You don’t want to get overzealous and ruin a web page by using too many type faces. Exercise restraint – think carefully about the design and how you can use sIFR to compliment the page. Headlines, pull quotes, or other small passages of text are good examples. Accent web pages with sIFR, don’t bombard them.