Stephan Spencer 2006年8月

CSS技术在注重网站标准和易进入度的编程人员中非常受欢迎，它同样也应受到SEO人员的重视。

CSS可以帮助你实现很多惊人的事情。比如你可以彻底避免使用HTML table和透明的GIF空格图片来排版（这些听起来真的是90年代的事情了）。用简明的HTML和Stylesheet代码来代替臃肿的编码。使用基于table的布局不仅导致您的顾客下载时间过长，而且削减了页面内容的关键词权重。事实上，应该努力将表现层和内容层彻底分开，将所有表现与表现形式相关的元素完全转移到一个外部的样式表中－换句话说，放置在.css文件中。另外一个好处就是，.css文件会被用户的浏览器缓存并且不用在每个页面都重新加载，这样就更加提升了用户使用体验。

您可以通过使用更先进的CSS技术来提升关键词权重。可以将HTML中的页面元素重新排序而不影响页面的效果。因此，您可以在HTML中将内容放在导航的上方而仍然在呈递页面展示该导航在你想放至的位置。你见过一个左侧导航条的代码出现在HTML的结尾部分吗？那是一种美的展现（至少对于SEO人来说是这样的）在CSS Zen Garden 中有一个非常好的例子。注意HTML是如何没有参与变化而达成左右导航条转变的，这是CSS变化所产生的效果。

现在搜索引擎已经减弱了alt标签对排名的权重，幸亏有CSS，您可以有一个替代方法来联系文字与图片，并且是一个更有效的SEO方法。这种CSS技术被称为“Image Replacement”及图片替代法，并且不仅可以达到与文字合并，还可与HTML标签包括Heading标签(H1等)以及链接。这种替代的HTML代码会出现在搜索引擎爬虫面前而不会在访问者展示除非故意将CSS在其浏览器中关掉。事实上，CSS代码将替代文字和HTML推到一边（例如，网页边缘外）并且插入图片。

总体来讲，为非常鼓励应用以文本为基准的导航条而不是图片导航，这也许就使“image replacement”不必要。当然一些时候由于您公司的品牌方针或其它因素不允许这样做。因此，在这些情况下，图片替代就是一个可行的方法了。例如，www.northland.edu很好的应用这项技术替代了其商标和导航。

我有两个关于图片替代的告诫。首先，不能堆砌关键词。第二，我想迟早搜索引擎会查看CSS文档并且忽视在屏幕外的文字因为这很容易被“垃圾邮件”制造者所滥用。因此，在SEO长期效果来看还是个问题。

通常图片替代技术是将文字移到屏幕外（比如，将“display”设置为“none”或设置“text indent”到一个很大的负数）。这不是很理想的做法。随着时间的推移，搜索引擎将会怀疑。幸亏现在还有一些图片替代法仍然可以达到理想的效果，被称为“Leahy/Langridge Method”，“Gilder/Levin method”，“Shea Enhancement”。这些方法都有缺点及优点，Mezzoblue的一篇文章将这些解释的很好。

CSS还提供了一种可以产生“mouseover”导航的替代方法，这样的导航仍然对搜索引擎很友好。对于基于JavaScript制作的Mouseover导航，搜索引擎爬虫不能够进入其联系的链接。您可以运用CSS达到同样的mouseover效果。关闭浏览器中CSS就会露出所有隐藏在下面的链接，所以所有的链接对于搜索引擎爬虫是可见的。理想来说，这些链接是文字而不是图片，所以搜索引擎就会将锚文本和所链接的页面联系在一起。