Articles

Search Engine Optimization (SEO) Using Cascading Stylesheets (CSS)

By Jim McFadyen, Web Developer

The following is a simple set of guidelines that will ensure that the search engine optimization of your Web site does not suffer in order to make it look great.

Semantic Markup

This is very import. Without trying to spark up the debate of CSS vs. Tables, the use of CSS for the presentation layer of a Web site drastically improves the search engine's ability to comb through the site. <h1>, <h2>, <h3> and <p> not only help make the document more readable to humans, but to search engines also. I think the default appearance of <h1> is much too large and unappealing for most really great looking Web sites. This is where CSS comes into play. Using CSS, it is simple to override the tags presentation to match that of the design.

Header Tag Replacement

When creative teams refuse to incorporate System Fonts in their designs for headings, instead of resorting to images, a replacement technique should be implemented. There is a few techniques to choose from. sIFR is one of the best techniques to use. This technique allows the use of <h1>, <h3> or even <p> to have its copy replaced by a Flash rendering using the desired font. This ensures the best keywords in the HTML tags are properly getting read by search engines without impact to the design. Not only does this optimize the site for search engines, but it can also reduce the development time by eliminating the need for image production. Implementing one of these replacement techniques is simple and encourages the use of semantic markup of keyword rich copy while preserving the desired presentation.

Use this with caution. You do not want to add text that is not found in the image.

Another benefit to this implementation is that it will simply add a text link when viewed on PDAs, cell phones, old browsers or non CSS capable browsers. Not to mention how this can make a Web site more Accessible.

Buttons

First off, let me say that buttons have two states, normal and depressed. There is NO mouse over state for a button. When you place your index finger over the space bar, what happens?

There is no doubt that the system button, grey and bulky, is a very unattractive button. I completely understand why designers hate it and always design something to replace it. The problem with images in place of a button, is that they are no longer buttons as there is no depressed state. This is where CSS and some Javascript come into play. Note the CSS is similar to the Text Links example above.

The Javascript, which I will not get into here, simply assigns a psuedo-class "submit-down" to the button when it is pressed.

Use this with caution. You do not want to add text that is not found in the image.

Another benefit to this implementation is that it will simply add a normal system button with the proper text when viewed on PDAs, cell phones, old browsers or non CSS capable browsers.

Three Column Layout - No Problem

If the design of a Web site is three columns, a lot of the time the most important content is in the middle column. The middle content is what we want the search engines to find and index first. Using the CSS element float in the appropriate manner can easily accomplish this.

If the desired result is to have the middle column semantically written in the .html page first, followed by the left column and lastly the right column, the HTML and CSS structure of the document would look like the following.

It is simple to keep the middle column content written before the right column. The div.column-maker simply sets up the structure to allow the left and middle columns to float to the left and the right column to float to the right. The trickier part is getting the middle column written in the document before the left column. The trick is to float the middle column to the right within the div.column-maker. This allows us the ability to write the middle column content to the page first, provided we float the left column to the left within the div.column-maker.

Flash Detection and CSS

When using Flash you do not want to miss out on the search engines ability to index the content or copy. One method to ensure that the search engines locate the content is to include an HTML alternative. In addition to SEO, the slim few who do not have the plug-in are also not alienated, and it accommodates PDAs and cell phones too. Using CSS, one can declare the Flash content within a <div> and simply hide the content if the user has the Flash plug-in, otherwise display the HTML version. Since search engine robots do not run Javascript they will simply be able to index the content within the otherwise hidden <div>.

This should not be an issue of spamming as you are just offering a direct HTML equivalent of what is in the Flash, but be careful you do not add content that does not appear in the flash piece.

Conclusion

Using these techniques is a very good start to help organically optimize your Web site and keep the creative team happy. This is not a list of mandatory practices or even close to the complete list of techniques used to optimize a Web site. This is just a list of some of the ways that CSS can help Search Engine Optimization while maintaining the integrity of the design.