SEO：细节决定成败 - CSS篇

以一个实例来提现css在SEO中的灵活运用，我发现，在大多数不怎么运用标准甚至一些符合标准的网站里，都犯有这点错误，哪一点？请继续往下看。
      先看图：

      

       我就不兜圈子了，从图中我们看到有些标题是这样的：4399小游. . . 。这是一个因为长度过长而被省略的标题。
       通常我们的一般是做成静态页面的，那么我们在生成标题的时候会使用类似：{limit：title，12，“. . .”}，相信大家都看得懂，限制标题长度为12，过长的部分用“. . .”省略号代替。那实际该标题显示在首页或者当前页的关键字就是”4399小游. . .“，我们知道，搜索是读源文件的，我们提取该页的源文件分析：
       搜索引擎看到的结果是这样的：<li><a href="http://www.4399ol.com" target="_blank" title="4399小游戏">4399小游. . .</a></li>
       而不是我们想像中的完整标题：<li><a href="http://www.4399ol.com" target="_blank" title="4399小游戏">4399小游戏</a></li>
       那么这样做会有影响么？答案是肯定的。站长们其实都知道，这样做该链接的文字描述权重就会分到”4399小游...“，而非”4399小游戏“上了，当然尽管我们已经在<A>中用title描述了完整的标题。
       如果这样说还不明白的话，我们还可以这样来解释，很多平时喜欢交换链接的站长，使用的网站名不单单是为了带流量，而是为了某个关键词的权重和排名。SEO的灵魂就是链接，不管是外链还是内链，都有明显的‘权重传递’，如果我们限制了标题而替代以省略号，相信权重会大打折扣，这一点是毋庸置疑的。
       了解了这一点，我们就会想对策。其实CSS 2.0中属性<li>就很好的为我们解决了这个问题，一个很简简单的功能就能搞定了，我们在控制<li>的时候可以这样写（为了清楚明白，附以完整代码）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
li {
 width:200px;
 white-space:nowrap;
 text-overflow:ellipsis;
 -o-text-overflow:ellipsis;
 overflow: hidden;
 } 
/* firefox only */
  li:not(p) { /* wtf is? pls let me know*/
   clear: both;
   }
  li:not(p) a {
   max-width: 175px;
   float: left;
   }
  li:not(p):after {
   content: "...";
   float: left;
   width: 25px;
   padding-left: 5px;
   color: #df3a0e;
   }

-->
</style>
<ul>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
</ul>

       这样的话就轻松解决了问题。即便是超出的部分，也不会在源文件中被砍掉了，而是以完整的标题提供给搜索引擎去索引了。
       其实文章前面我们也提到了，很多网站，尤其是以表格完成页面主题的网站，在”相关文章“里都会有标题超长出现，而大多数网站的处理方法就是截掉了超长部分，当然表格完成的页面也可以使用此方法，道理是一样的，大家可以去试试。
       div+css标准设计有很多地方很适合SEO优化，希望大家慢慢的去摸索和尝试。
posted @ 2008-05-20 21:39  凌点  阅读(285)  评论(0)  编辑  收藏  举报