在最近一段时间,打开后天为中国很多网站提供了免费的SEO分析,在分析过程中,发现的一个普遍问题就是:很多网站还在使用Table布局,而不是合乎web标准的XHTML+CSS (你可以通过浏览网页的“源码”看看自己的网站是哪种布局,如果开头就出现<table><tr><td>这样的标签就是表格布局) 。
虽然说用table布局(尤其是使用WYSIWYG-所见即所得工具)来设计网站简单又好学,美国小学生都能用Front Page设计出一个像样的网站来。 熟练点的设计师用table制作一个10页的网站,2个小时就可以完工。 但作为站主的你,无论是以后的网站维护,用户界面和体验,还是搜索引擎优化(SEO),都会因此遇到重重困难。
所以,我们建议:设计网站之前一定要问好设计师,保证他会手写XHTML+CSS代码, 并且完工之后,网站的代码都能通过W3C Validator验证,基本没有错误。 你这网站设计的钱才没白花。
如果你的网站是以前设计的,使用的是table布局,那么最好进行一次改版,做成CSS的格式。 为什么? 现在我们就简单总结一下
CSS优越于表格布局的5大原因:
1. 页面加载速度更快;
举个简单例子,同样一个网页,用表格设计的源码平均有245行,而使用CSS布局只有45-50行code,将近5倍多的无用代码,导致了table设计的网页加载速度比CSS慢2-4倍。 虽然只是几秒钟的差别,可往往就能造成一些用户离开你的网站。
出于SEO的角度,CSS布局带来了代码的精简,提高搜索引擎的爬行效率,能在最短的时间内爬完页面的内容,而不是被一些繁琐的表格代码耽误,这样对你网站的收录质量有一定的好处; 另一方面,页面显示的速度也是用户体验的重要组成部分。
2. 改版和维护容易
Sitpoint.com一个网站设计师曾经这样生动地描述:“如果有客户联系我重新设计他的表格布局网站,我就告诉他我参军不干了,但若是一个CSS设计的网站,我想都不想就会答应下来。”
理由很简单,基于表格的网页把内容和格式(字体、颜色等)都混在一个html,asp, 或php文件里,而CSS-based的网页则把文字内容和格式分开,也就是说,网页的文字放在一个文件里,所有和样式有关的代码都放在另一个单独的CSS文件里。
这样做有两个好处: a. 重新设计网站的时候,不用动内容,而且只要在CSS文件里改一下,整个网站的样式都改了,而表格网站就只能一页页地修改。 b. 保持视觉设计和文字内容分离,使得网站维护团队之间能够更好的协调,例如:编辑和设计师可以分开工作。
3. 节约带宽成本
如果你的服务器每个月给你1G的带宽限制,使用table布局只能支持65,536 pv(page view)左右的流量,而用CSS则可以支持131,072 pv。 因为一样的网页,你的代码”减肥”了,需要放在服务器上的文件就小多了。 举个例子:当 ESPN.com 改版成CSS布局后,每天节约超过两百万兆字节(terabytes)的带宽。
4. 利于网站排名
table布局的网页,一般都是导航放在内容前面。 举个例子:http://www.sitepoint.com/examples/cssvtables/tables4.html 看这个网页的源码就能看到,前一百行左右都是定义表格和内部链接的代码,没有多少文字内容。 读过搜索引擎排名原理的人肯定知道,搜索引擎较重视网页开头的内容,你要是把没用的代码放在前面,网页上真正有价值的内容就容易被搜索引擎忽视,这样就会严重伤害你的排名。
建设网站的一个很重要的原则:把代码和内容的比例降到最低, 这就是使用CSS的好处,把格式阿,字体阿,颜色结构这些不含内容的东西统统隔离到一个单独的文件当中,让搜索引擎集中爬行富含关键字的内容。
5. 网页结构更SEO友好
表格布局的网站在浏览器中显示和CSS没什么区别,但搜索引擎读的是代码,也就是说,Google等看到的网页内容顺序是这样的:
<table> Beginning of table
<tr> Row1
<td> Cell1</td>
<td> Cell2</td>
</tr>
<tr> Row2
<td> Cell3</td>
<td> Cell4</td>
</tr>
</table> End of of table
Row2的内容至少应该是个二级标题,而却在cell2之后被读,这样就破坏了逻辑。 而CSS布局则用<h1><h2><h3>各级标题加上<p>(段落)标签来组织内容,不仅让网站建设人员脉络清晰,更主要的是,向搜索引擎清楚地展示了网页的结构和逻辑。