浅议DIV+CSS网页布局中SEO优化技巧.docVIP

浅议DIV+CSS网页布局中SEO优化技巧中图分类号：G71 文献标识码：A 文章编号：1008-925X(2012)O7-0122-02 摘要：目前网页布局多采用DIV+CSS方式，通过合理的网页布局，符合标准的搜索引擎优化手段，能使网站内容在自然搜索结果中排在前列。本文讨论了几种DIV+CSS网页布局中SEO优化的技巧。 关键词：DIV+CSS；SEO；技巧 一、 SEO简介 搜索引擎优化SEO（Search Engine Optimization），是指针对搜索引擎来优化网站的内容，对网站结构、网页文字、网页标签、网站的链接等进行合理规划部署，使网站较容易被搜索引擎抓取并接受。搜索引擎在抓取该网站的资料后进行比对及运算，之后将PR（Page Rank）值较高的网站放在其他用户在搜索时优先看到的位置，从而促使网站在搜索引擎中具有较强的自然排名竞争优势。 二、网页布局 2.1 利用表格进行网页布局 采用表格进行网页布局是指根据页面布局要求设计一个能满足版式要求的表格结构，表格的每个块填充所需文字与图片。使用透明背景图片实现各个块中内容的间距及空格。当某个块中的内容需要再划分，可以通过嵌套表格来完成，最终的结构可能是一个多次嵌套的复杂表格。这种布局方式除了具有维护困难的缺陷外，还会影响搜索引擎对这种布局网站的收录。 2.2 利用DIV+CSS进行网页布局 目前DIV+CSS进行网页布局是网页的主流布局方式。DIV是一个块状元素，相当于一个容器。DIV的起始标签和结束标签之间的所有内容都是用来构成一个块，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。CSS是Cascading Style Sheets(层叠样式表)的缩写。它是定义HTML元素样式的一种结构化语言，它通过脚本程序调用和改变对象的属性。简单地说，DIV用于搭建网站结构（框架）、CSS 用于创建网站表现（样式/美化），实质即使用XHTML对网站进行标准化重构，使用CSS将表现与内容分离，便于网站维护，简化HTML页面代码，可以获得一个较优秀的网站结构便于日后维护、协同工作和搜索引擎蜘蛛抓取。 三、DIV+CSS网页布局中的SEO优化技巧 用DIV+CSS布局的网页，页面代码精简，容易向W3C标准靠拢，便于搜索引擎的蜘蛛抓取内容，是目前最适合搜索引擎的页面结构。下文讨论几种DIV+CSS网页布局中的SEO优化技巧。 3.1 页面代码中关键内容优先 搜索引擎蜘蛛抓取站点页面内容是按照从上而下，从左至右的顺序进行的。大多数网站采用左中右三栏式，而页面的主要内容一般处于中间栏，如果按顺序写页面代码，按照搜索引擎蜘蛛抓取站点内容的规则，如果左栏内容较多，会影响中间栏内容的权值。因此采用DIV+CSS布局可以将中间栏的DIV块写在前面，再分别写其他栏的DIV块，然后通过CSS进行定位，就可完成网页布局，而且可将主要内容写在前面。 3.2 LOGO图片的处理技巧 代表网站名称的通常是LOGO图片，而文字性的网站名字才是SEO的首选。为了解决这个问题，通常将网站名字放在H1标签中，再通过CSS的设置来实现显示LOGO图片并隐藏网站名字。在CSS的属性设置中，首先将背景图片设置为相应的LOGO图片，为了使网站名字的文字信息隐藏起来，再将 text-indent设置一个很大的负值，不让其在显示器的正常范围出现，同时为了使LOGO图片实现链接的效果，将A标签设置为块级元素，并设置和图片一样大小的相应宽高。具体参考例子代码如下： Html代码片段： 网站名称 CSS代码片段: #test-logo h1 a{}{ text-indent:-9999px; background: url(../images/logo_test.png) no-repeat; width: 120px; height: 30px; font-size:0; display:block; } 3.3网页上较长标题的处理技巧 当网页布局遇到较长的标题的时候，会显示标题的一部分，其余部分用省略号表示。这样可能会出现标题中关键内容不能完整表示而使搜索引擎蜘蛛忽略的情况。此时，可以在Html代码中完整表示标题信息,再使用CSS来控制显示效果，从而实现浏览器中显示的是省略了的标题，但实际页面代码有完整的标题信息的目的。具体参考代码如下： Html代码片段： 某个比较长的标题比较长的标题 CSS代码片段： li{ width:20px; white-space:nowrap; text-overflow:ellipsis; ov