zoukankan      html  css  js  c++  java
  • 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 {
     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- 175px;
       float: left;
       }
      li:not(p):after {
       content: "...";
       float: left;
       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优化,希望大家慢慢的去摸索和尝试。
  • 相关阅读:
    函数
    数值
    数据类型
    jQuery工具方法
    jQuery概述
    史上最全的SpringMVC学习笔记
    webpack-Hot Module Replacement(热更新)
    webpack-Manifest
    webpack-Targets(构建目标)
    webpack-Dependency Graph(依赖图)
  • 原文地址:https://www.cnblogs.com/ganmk/p/1203619.html
Copyright © 2011-2022 走看看