当前位置: 首页 > 图文教程 > 网站运营 > 网站优化 > SEO优化CSS篇,细节决定成败

网站优化
学习seo的注意事项
同样内容的网站放在不同的域名对你有帮助吗
SEO 关键词的选择
网站真实流量分析方法
锚文本对于SEO的重要性
SEO技术 google pr值算法浅谈
搜索引擎优化的一些方法和排名技巧
2009年影响网站搜索引擎排名的重要因素小结
SEO 实战 关键词排名还很重要吗?
SEO教程 网站地址URL规范化技巧
SEO实例分享 关键词和网站流量
所有SEO策略需要站在运营和产品角度
SEO工具 五款免费的死链接检测工具
网页图片该如何优化
SEO切不可把 内容为王 奉为圣经而不知变通
选择一个适合SEO的CMS系统的分析
Google 任何时间段的网页结果查看方法
Google明令禁止的十大SEO黑帽技术小结
SEO作弊方法和SEO作弊认定准则分析
博客从谷歌获得较高的PR值的方法分析

网站优化 中的 SEO优化CSS篇,细节决定成败


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-17   浏览: 57 ::
收藏到网摘: n/a

 前言:SEO在网站运营中的地位已经不言而喻了,SEO说难不难,因为只要在网站制作过程中,把握一些“套路”,不要过于修饰就差不多了,这个方面站长基本都是知道的,但是SEO说简单也不简单,需要多观察、思考,耐心的去研究“细节”,方能把网站的整体排名提高到一个档次。如果对于SEO细节的把握得当,会起到非常好的收效。本人不才,将在以后的日子里,发布一系列“SEO:细节决定成败”的文章,本文以CSS优化为例,介绍一些技巧,希望能和大家一起学习探讨SEO,同时也希望大家不吝赐教,谢谢!

总的来说,DIV + 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>的时候可以这样写(为了清楚明白,附以完整代码):

以下为引用的内容:

<style type="text/css">
<!--
li {
 width:20px;
 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: 17px;
   float: left;
   }
  li:not(p):after {
   content: "...";
   float: left;
   width: 25px;
   padding-left: 5px;
   color: #df3a0e;
   }

-->
</style>
<ul>
<li><a href="http://www.4399ol.com" titile="4399小游戏">4399小游戏</a></li>
</ul>

这样的话就轻松解决了问题。即便是超出的部分,也不会在源文件中被砍掉了,而是以完整的标题提供给搜索引擎去索引了。

其实文章前面我们也提到了,很多网站,尤其是以表格完成页面主题的网站,在”相关文章“里都会有标题超长出现,而大多数网站的处理方法就是截掉了超长部分,当然表格完成的页面也可以使用此方法,道理是一样的,大家可以去试试。

div+css标准设计有很多地方很适合SEO优化,希望大家慢慢的去摸索和尝试。

此文只是本人优化过程中的一点点体会,希望能起到抛砖引玉的作用,谢谢大家!