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

网站优化
百度收录近期更改 不要乱seo
减少 复制内容增加SEO效果
SEO 关键字布局写法
SEO 网站惩罚情况分析
SEO 交换链接技巧和链接的意义
条条大道通罗马,你的SEO公式是什么?
如何才能使自己的单向链接保质保量
seo 职业者对搜索引擎的观察分析
交叉链接 示意图
网站建好了都要向哪些搜索引擎提交?
新手如何问网站优化问题
66种SEO创意推广方法集锦
影响网站排名下降的几个主要原因
WordPress 博客的网站优化
挑选高质量友情链接的技巧
屏蔽百度快照的方法
网站SEO搜索引擎优化50问
SEO教程 robots.txt文件常见用途
SEO 经验教程 网页图片优化技巧
SEO 链接是金 全面认识网站链接

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-17   浏览: 86 ::
收藏到网摘: 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优化,希望大家慢慢的去摸索和尝试。

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