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

网站优化
主流论坛程序相同的搜索引擎优化注意要点
Web标准有利于搜索引擎优化?
把访问者留在网站的核心 SEO观念要正确
做好网站链接建设 做好自然链接人工链接
比较快速地提高网站PR值的十个有效办法
百度图片搜索优化技巧 让网站流量再翻番
对症下药 如何让自己网站不被百度潜规则
搜索引擎如何来评估网站链接的
优化热门关键字的5点心得体会
提高文章搜索引擎优化质量的十八个小技巧
谷歌官方《搜索引擎优化指南》网站内容篇
谷歌官方《搜索引擎优化指南》链接文本篇
谷歌官方《搜索引擎优化指南》标题标签篇
谷歌官方《搜索引擎优化指南》网页图片篇
SEO关键字排名VS用户体验谁更重要?
网站优化的几个要点
影响网页在谷歌搜索引擎上权重的三个因素
针对谷歌搜索引擎 选取关键词的十个技巧
从搜索引擎优化角度 分析月光博客的成功
快速获取百度排名之偷梁换柱与抛砖引玉篇

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


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

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