DIV+CSS布局与Table布局在SEO应用中的差别

时间:12-11-05 栏目:SEO优化 作者:kyle 评论:1 点击: 6,516 次

此文转自seo无题站论坛的一个会员写的帖子,质量非常之高,转载过来分享一下。

其实很多朋友对div+css的布局存在一定的误区。通常认为,div+css的布局更利于SEO优化,更有一些人说做好div+css就等于把seo做到八九不离十了。
事实真的如此吗?

首先要明白div+css与传统table布局到底有何差别。其实最主要的差别是加载方式的不同:
div的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容。
table 的加载方式是完成后加载,遇到 <table> 后,在读到 </table> 之前,table 中的内容不加载。
也就是说只有table中的数据完全加载完之后才会显示出来。这也就是为什么在网速慢的时候div布局的网页显示比table快的原因。
所以我们在这里还是推荐大家能使用div+css布局尽量使用div+css布局。div+css布局的优点如下:
1、减少页面加载时间
过多table的嵌套会影响网页的加载速度。据统计,一个网页加载时间超过7秒,72%的用户会选择离开。
2、减少网页体积
网页体积过大,会影响蜘蛛的索引。给网页减肥,使得蜘蛛索取你网站内容更加轻松。
当然,这里注意。并不是我说了div+css的好处就非得用div+css,有些div+css不利于完成的工作还是交给table去完成吧。
上面我们讨论的是布局问题,让我们再深究一下,其实div和table一样只不过是html文档中的一个标签而已,而所有的html标签都是有自己独特的语义。我们html源码中首行出现的那个w3c标准,最初的用意就是在做好网页的结构化和语义化,该用哪个标签 就用哪个标签,不该用而用了就是多余。

table不适合用来做整体布局, 这点已经得到大家的公认,有过前端经验的朋友都知道布局涉及到层次嵌套.用table嵌套来呈现结构会让你以后的布局的调整变得很困难.比如移动某个块的 位置,调整左右块的距离等等,当嵌套的层次越多,你的调整越困难.再次嵌套的层次越深.解析dom所花费的时间越长,增加了客户端和搜索引擎的负担。

就语义化而言,table在所有html标签中.它的语义化是最强的。比如

<table>
<caption>新闻列表</caption>
<thead>
<tr>
<th>新闻标题</th>
<th>新闻作者</th>
<th>占击次数</th>
</tr>
</thead>
<tfoot>
<tr>
<td>文章总数:2</td>
<td>作者数:1</td>
<td>平均点击次数:40</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>标题2</td>
<td>w3c</td>
<td>50</td>
</tr>
<tr>
<td>表格不好吗?</td>
<td>w3c</td>
<td>30</td>
</tr>
</tbody>
</table>

其中<thead>,<tbody>,</tfoot>分别表示了表格的头部,内容和底部,<caption>表示表格标题,<th>表示列标题

搜索引擎能够很直观的从这些代码中判断出其含义。tabel的语义化是非常强的.该用的时候得用.不要被误导的”web标准”所困扰。亚马逊那么大的网站,源码里面出现了多少table,大家注意过没有。
DIV+CSS除了让网页设计师的工作更加细分,对SEO的意义在于其蕴含的语义。现在的大部分模板,不过就是打着div+css的口号做table做的事。

为什么这么说?

我举几个很简单的标签和命名,cite、dl、dd、dt,有几个人能说出其含义?
网站中的类似于“登陆”、“注册”,你是否有想过使用div的id标签来让搜索引擎直接识别出来?
mainbav、subnav、topnav这几个又有谁想过它们其实一直在潜移默化的影响着你的页面质量得分?

具体请参考此文:http://www.justest.in/jishu/103.html

搜索引擎判断一个网页的区块,不只是通过什么文字判别的,搜索引擎是读不懂文字的!爱信不信。

比如“SEO无题站”,搜索引擎不是人,不可能说一看这几个字,就说,啊,我知道这是神马意思,所以文字前后的HTML标签就成了搜索引擎决定内容轻重主次的唯一判断依据。

<h1>郑夺你欠我2万金</h1>

告诉搜索引擎,这个页面是关于郑夺欠钱不还的。

<p id=”summary”>
郑夺欠我2万金还不认账,让我写个帖子说会慢慢补上。
</p>

summary这个标签是告诉搜索引擎,这是一段介绍性文字(俗称:摘要)

<small>要债</small>

就是告诉搜索引擎,这东西不重要,一行小字而已。

现在想想,你们的html代码中虽然没有出现table,但是你们敢说你们的div+css布局让搜索引擎读懂了麽。

 

具体在网站模板设计中使用DIVCSS还是Table还是要看个人喜好和不同的需求,成都SEO小五认为,大体上使用DIVCSS结构,在一些特殊情况使用table是可以的。影响并不大,而不是说每个地方细节都不能用table来布局,辩证的看待比较好。

成都SEO小五嚎2句: 本文是(成都SEO小五)辛苦弄出来的,转载成都SEO小五原创的请保留链接: DIV+CSS布局与Table布局在SEO应用中的差别,3Q

DIV+CSS布局与Table布局在SEO应用中的差别:目前有1 条留言,牛逼吧!

  1. 虽然现在都推崇div不过有的table排名靠前且稳定的也非常多,而且流量还很大,并且简单的网站!!

    2012-11-21 7:06 pm [回复]

来给哥评论评论


------====== 小五公告 ======------
成都SEO小五,专注成都搜索引擎优化。
小五善长站内外优化,C#、PHP开发,中英文SEO,Google中英文和百度优化技术。欢迎群内交流。伸手党请绕路,求资源的请绕开,求问题解答的请进群内交流。开放了一个QQ交流群:160750032。加入验证时请标注任何SEO相交字眼。友情链接直接Q我,收录正常,内容大部份原创、SEO或者程序开发、网络营销、线上推广等相关行业即可。

常用工具

赞助广告

来看过哥的人