2 replies to this topic

[Craig B]

Hello,

I noticed some questions in the High Rankings forum regarding Search Engine Optimization (SEO) using Cascading Style Sheets (CSS). Jim McFadyen, a developer here at Critical Mass recently put together a guide that I thought I would share here.

The primary motivation behind applying SEO with CSS was that we were redesigning a Las Vegas Website portal and we had the opportunity to apply SEO best practises. The old site was a Flash website with one HTML container for the entire Website (Jill, do you remember this??). The new redesigned site with SEO applied can be viewed here: http://www.visitlasvegas.com.

Have a look at how many techniques in Jim's guide were applied including image replacement techniques, semantic markup, CSS layout techniques to put the primary content higher in the code, etc.

On to the guide....

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

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

Semantic markup is very important (without trying to spark up the debate of CSS vs. Tables). The use of CSS for the presentation layer of a Web site in conjuction with semantically valid correct can drastically improve 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 as well. 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>, <h2> 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 impacting the design. Not only does this optimize the site for search engines, but it can also reduce 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.

Text Links

Text links are a very important piece of the SEO puzzle. The copy in text links is used by search engines to help describe the Web page it is linking to. Designers often wish to make links using graphics that include mouse over or click states, making it seem like <img> are the only solution. Well, by using CSS it is possible to have a text link that the search engines will read and index while still looking great to the user. Images for all desired mouse events are still needed but the use of the <img> to present them is not. See the sample code below.

CODE

a.pirate-link{display:block;width:170px;height:20px;}
a.pirate-link:link,a.pirate-link:visited{background:#ffffff url(/images/pirate-link.gif) no-repeat top left;}
a.pirate-link:hover{background:#ffffff url(/images/pirate-link-hover.gif) no-repeat top left;}
a.pirate-link:active{background:#ffffff url(/images/pirate-link-active.gif) no-repeat top left;}
a.pirate-link span{display:none;}

<a href="http://www.piratesinfo.com/" class="pirate-link" title="History of Pirates"><span class="hidden">History of Pirates</span></a>

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.

CODE

button.submit,button.submit-down{background:#000000 url(/images/submit.gif) no-repeat top left;height:15px;width:50px;cursor:pointer;}
button.submit-down{background:#000000 url(/images/submit_down.gif) no-repeat top left;}
button.submit span,button.submit-down span{visibility:hidden;}

<button class="submit" type="submit"><span>Submit</span></button>

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 has 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.

CODE

div.column-maker{display:inline;float:left;width:650px;}
div.middle-column{display:inline;float:right;width:500px;}
div.left-column{display:inline;float:left;width:150px;}
div.right-column{display:inline;float:left;width:150px;}
div.clear{clear:both;}

<div class="column-maker">
 <div class="middle-column">
   <!-- middle column content //-->
 </div>
 <div class="left-column">
   <!-- left column content //-->
 </div>
 <div class="clear">&nbsp;</div>
</div>
<div class="right-column">
 <!-- right column content //-->
</div>
<div class="clear">&nbsp;</div>

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 the HTML version is displayed. Since search engine robots do not run Javascript they will simply 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. Again 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.

Edited by Craig B, 30 March 2005 - 04:07 PM.

[sweepthelegnate]

thanks for sharing craig...I was thinking about posting a list of comprehensive benefits of CSS as it seems that the question has been coming up more and more... but I think this will be great to point people to

[Randy]

Good stuff Craig !