SEO最简单优化: 增加内容和HTML代码比 (SinCS佳作)

SinCS的 老文章被我翻出来了
分享下, 文章中举的例子可以举一反三.

另外,能否加一个代码高亮的css,我们这是技术论坛哦??这个dz做的很不错.

--------------
SEO优化办法有N种，传统的META信息、H1写标题、目录结构等等，算不上什么优化，那些更是建站的基础知识。

那什么叫有技术含量的优化？其中的一种就是内容和HTML代码比的优化。


就像HTML语言的定义一样，HTML代码其实就是构造语言，是用来构造页面结构，从访客角度上讲，HTML代码就是视觉效果表现方式，访客根本不会去关注HTML代码。

可爬虫不一样，它可以分析，抓取一个页面后，删掉所有的HTML代码，即<[^>]*>部分，就可以获得有效内容及HTML代码比


咱们都知道XHTML页面有利于收录和排序，其中的一个重要原因就是采用XHTML结构，可以提高内容和HTML代码比。但是页面很漂亮，比如有边角、滑动门等效果的时候，你不得不写上很多JS代码和HTML代码去构造模型，这样直接减少了这比例关系。


那我们如何增加这比例？增加内容？不……，虽然增加内容也是一个办法，但页面太大的话，也并不利于爬虫的抓取。

在保持页面内容不变的情况下，我们需要想方设法去减少HTML代码，如：

很多人喜欢这样写H1：<h1 class="title">这里是标题</h1>

众所周知，一个页面不会出现两个H1，如果有两个，那好比一个人身上长着两个脑袋一样很难看。这不仅是常识，也是标准。所以给h1加上这些那些class或id是画蛇添足。

应这样写：<h1>这里是标题</h1>

然后样式需要在CSS中定义。

这是很简单，那页面中有圆倒角如何做？网上有N多办法，其中最典型的就是HTML+CSS实现圆角矩形，HTML代码部分如下：
<div class="panel">

  <DIV class="t-o b1"></DIV>

  <DIV class="t-o b2"></DIV>

  <DIV class="t-o b3"></DIV>

  <DIV class="t-o b4"></DIV>

  <DIV class="content">

    <!-- 这里放内容 -->

    <DIV class=clear></DIV>

  </DIV>

  <DIV class="b-o b4"></DIV>

  <DIV class="b-o b3"></DIV>

  <DIV class="b-o b2"></DIV>

  <DIV class="b-o b1"></DIV>

  <DIV class="break"></DIV>

</div>

其实，我们完全不必用这些代码，可以简化到：
<div class="panel">

    <!-- 这里放内容 -->

</div>

毫无疑问，这样可以很明显的减少HTML代码，当然，光这样写是失去了圆角效果，效果我们可以借助JS加上。

你完全可以用纯粹的JavaScript代码来写，为了方便，我们采用jQuery来写：

jQuery(function($){

$('.panel').prepend('  <DIV class="t-o b1"></DIV><DIV
class="t-o b2"></DIV><DIV class="t-o
b3"></DIV><DIV class="t-o b4"></DIV><DIV
class="content">').append('<DIV
class=clear></DIV></DIV><DIV class="b-o
b4"></DIV><DIV class="b-o b3"></DIV><DIV
class="b-o b2"></DIV><DIV class="b-o
b1"></DIV><DIV class="break"></DIV>');

})

需要注意的是，这个JavaScript代码要写到一个独立的js文件中。


如果页面中，用到多个圆角，则只管设置class为panel即可。


这样，我们可以减少HTML代码，实现了增加内容和HTML代码比的目的。

在不牺牲用户视觉效果的情况下，给爬虫看一个干净的页面代码，并且在网速相等的条件下，一定的减少抓取时间，有利于抓取，毫无疑问，也将有利于搜索引擎的排名。


除了这个圆角外，滑动门等，完全可以用jQuery进行代码优化，说点不客气的话，国内常用的那些滑动门实在是恶心，还得加一大堆没用的id，其实滑动门可以做的更简单。

HTML代码先贴出来欣赏欣赏，jQuery代码谁有空补上，我最近比较忙，暂时不写了：

<dl>

    <dt>滑动门标题1</dt>

    <dd>滑动门1对应的内容</dd>

    <dt>滑动门标题2</dt>

    <dd>滑动门2对应的内容</dd>

     ......

</dl>

非常感谢！！正需要这样的教程

学习一下 看看是否适用

这个还是不错啊

给力

可惜看不懂，，，

我也看不懂，，，

非常感谢！！正需要这样的教程