搜索引擎友好的DIV+CSS结构

本文由金楠于 2017-1-9 14:46 发布在 SEO网站优化阅读：3544

搜索引擎蜘蛛的工作趋向于线性方式，蜘蛛抓取网页内容的时候会从上到下依次抓取网页上的内容，越简单实用的网页就越受蜘蛛的喜欢。而在网站兴起的初期，网站基本采用框架结构和表格形式来构成网页的基本布局，这使得蜘蛛的线性工作很难抓取网页的具体内容，也很难对网站结构布局进行控制，这不利于搜索引擎优化。而在DIV+CSS出现后，改变了这一不利的局面。

随着网页标记语言的发展，在HTML基础上优化和改进形成了一种新的语言XHTML，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位布局。

DIV+CSS有别于传统的表格（table）定位方式，它可以实现网页页面内容与表现相分离。网站建设者可以控制某一内容在网页的具体位置和表现形式，灵活度更高。而且对于搜索引擎来说，DIV模块化的结构是很容易抓取和分析网页内容的。对于内容量较大的网站来说，使用DIV+CSS更是必然的选择。

如图4.2所示，这是考试在线的网站结构布局，我们可以看到网站整体呈模块化布局，结构统一。页面每一行都由3个DIV层组成，例如考试报名、成绩查询、报考指南这三个版块的DIV层分别为左中右排列在同一行，浏览者可以轻松的在网站上找到自己需要的内容。在便于收录的同时，还可提高用户体验和网站的页面浏览量，这是其他网站结构所难以达到的效果。由于考试在线DIV+CSS布局代码较多，下面我们只对DIV+CSS布局原理做一些简单的分析。

图4.2 教育在线DIV+CSS布局

CSS是层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术，是控制DIV网站布局的重要工具。

DIV层相对位置控制代码如下：

#left{ width:200px; float:left;background-color:#FFF}

#mid{width:auto;background:#00FF00;margin:0 230px; border:1px solid #000;}

#right{ width:200px; float:right; background-color:#CCC}

DIV层绝对位置控制代码如下：

#left{background:#999;width:100px;height:200px;position:absolute;top:0;left:0}

#mid{background:#0CF;height:200px;margin-left:120px;margin-right:120px;}

#right{width:100px;height:200px;position:absolute;background:#693;top:0;right:0}

第一段相对位置控制代码表示DIV层分别为#left：float向左浮动，宽度为200像素；#mid：位置居中，宽度自动，左边距为0，右边距为230像素；#right：float向右浮动，宽度为200像素。这样就构成了一个三个DIV层的位置分布，相当于上一级DIV层里的左中右布局。

第二段绝对位置控制代码表示DIV层分别为#left：DIV层距离页面上边和左边都为0，即置顶靠左，position位置属性设置为绝对位置，DIV层宽100像素，高200像素；#mid：DIV层宽200像素，左边距离120像素，右边距离120像素；#right：DIV层距离页面上边和右边都为0，即置顶靠右，position位置属性设置为绝对位置，DIV层宽100像素，高200像素，这就构成了三个位置固定的DIV层左中右布局。

以下为内容页面DIV调用CSS里的样式构成网站的布局的代码：

经过分析DIV+CSS代码，是如何实现网站结构布局以后，我们对DIV+CSS为何能成为目前主流的网站结构布局方式有了一个清楚的了解。

q DIV+CSS使网站内容更富有层次和条理，符合搜索引擎抓取网页的习惯。

q 加快页面载入速度。使用 margin 和 padding 代替多余的表格单元和间隔图片，相比之下，DIV+CSS结构的页面在代码的字节数比table页面的小几倍以上，在table中要移动１像素的距离就要多出几行代码甚至更多，而在DIV+CSS结构中只需改动一下margin 或 padding 的数值即可实现。

q 降低服务器带宽及流量。虽说现在很多IDC都不限制网站的网络流量，但是带宽都有限制的，CSS样式表在浏览器加载一次后，即可保存在本地而不需要再次加载，对于节省网站服务器带宽有着很大的作用，保证了服务器在多用户请求时的反应速度，和用户的浏览速度。

q 保持整个站点视觉的一致性。这点对于提高用户体验有很大帮助。用户不会因为凌乱的网站布局，而找不到自己想要的信息，对于提高前面我们讲到的网站实用性也有好处。

q 使网站修改时更有效率、代价更低。使用table来布局的网页修改就是噩梦，几乎需要重新编写，而DIV+CSS结构的网站，只需要修改CSS样式表里的一些数据就行了，这大大提高了网站修改和改版的效率。

DIV+CSS是网页标记语言的一大进步，它使网站结构布局变得简单，也使搜索引擎内容抓取变得容易。作为一个合格的SEOer，应该了解DIV+CSS的使用，对于网站内部的优化才更得心应手。

　　本文节选自金楠所著《seo搜索引擎实战详解》一书，更多内容可关注金楠博客或者选择购买本书。