网站SEO 第三部分：对搜索引擎友好的网页设计制作

转载：http://www.linkcn.net/wangluotuiguang/200806/02-120.html

第三部分：对搜索引擎友好的网页设计制作
一般的网页设计都由网页设计师完成。设计师设计网站往往仅从美观、创意和易用的角度考虑，这对于一个期望获得搜索引擎排名优秀的商业网站来说，已经远远不够了，网站策划人员至少应该为设计师递交一份需求备忘录，提醒在设计中需要配合和注意的环节。

3.1. 目录结构和 URL

URL 是统一资源定位，即每个网页的网址、路径。网站文件的目录结构直接体现于 URL。清晰 简短的目录结构和规范的命名不仅有利于用户体验和网址传播，更是搜索引擎友好的体现。
目录层次：
对于一个小型网站来说，一般只有一层子目录，如下：
http://www.yoursite.com/dir1/page.htm
www.yoursite.com 是域名，dir1 是一级目录名，page 是文件名。对搜索引擎而言，这种单
一的目录结构最为理想，即扁平结构（Flat）。而对规模大一些的网站，往往需要二到三层子目录。象这样：
http://www.yoursite.com/dir1/dir2/dir3/page.htm
搜索引擎还是会去抓取二到三层子目录下的文件，但最好不要超过 3 层，如果超过 4 层，象以下这个页面，搜索引擎就很难去搜索它了：
http://www.yoursite.com/dir1/dir2/dir3/dir4/page.htm
当然，以下情况下，即使深入第四层甚至更深层次的页面，也同样能被搜索到：
1、如果该页提供了重要内容，有大量来自其它网站的外部链接（Inbound Links）；
2、如果在首页上增加一个该页的链接，可以通过首页直接到达，搜索 Spider 还是可以轻易地找到它；
3、如果有其它网站在顶级页面上链接了该页，其效果就好似你在自己的首页上做了该链接。此外，图形、脚本、CGI-BIN 和 CSS 样式表则各自建立专门的目录收入其中，一般不放在根目录下。

3.2. 目录和文件命名

根据关键字无所不在的原则，可以在目录名称和文件名称中使用到关键词。但如果是关键词组，则需要用分隔符分开。我们常用连字符“-”和下划线“_”进行分隔，URL 中还经常出现空格码“%20”。因此，如果以“中国制造”作文件名，就可能出现以下三种分隔形式：
made-in-china.htm
made_in_china.htm
made%20in%20china.htm
但事实上，至少在目前 Google 并不认同“_”为分隔符。对 Google 来说，made-in-china和made%20in%20china 都等于 made in china，但 made_in_china 就被读成了 madeinchina，连在一起之后，关键词就失去了意义。
因此，目录和文件名称如果有关键词组，要用连字符“-”而不是下划线“_”进行分隔。
URL 应该越短越好。有人为了单纯增加关键字而额外建多一个带有关键字的子目录，改变目录结构。由于 URL 中含有关键字本身对排名提高帮助并不大，因而这种做法多此一举，也是搜索引擎反感的。

3.3. 绝对 URL 和相对 URL

绝对URL ：即网页路径使用包含顶级域名在内的完整的URL。如 ：
www.yoursite.com/page1/index.html 是一个绝对路径，其中/page1/index.html 则为相对
路径，由浏览器自动在该链接前加上 www.yoursite.com。
总体上，Google 在排名时并不在意 URL 使用的是相对路径还是绝对路径。

3.4. 动态 URL
目前很多网站都有数据库驱动生成的 URL，即动态 URL，往往表现为在 URL 中出现“?”、“=”、“%”，以及“&”、“$”等字符。动态 URL 极不利于搜索引擎抓取网页，严重影响网站排名，通常是通过技术解决方案将动态 URL 转化成静态的 URL 形式，如：
将 http://www.domain.com/messages.php?id=2&type=5
转化为 http://www.domain.com/messages/2/5/
下文将会专门提到动态 URL 的解决方案。

3.5. 导航结构
网站导航是对引导用户访问网站的的栏目、菜单、在线帮助、布局结构等形式的统称。其主要功能在于引导用户方便地访问网站内容，是评价网站专业度、可用度的重要指标。同时对搜索引擎也产生诸多提示作用。概括地讲，网站在导航方面应注意以下几点：

3.5.1. 主导航醒目清晰
主导航一般体现为一级目录，通过它们用户和蜘蛛程序都可以层层深入访问到网站所有重要内容。因此主栏目必须在网站首页第一屏的醒目位置体现，并最好采用文本链接而不是图片。

3.5.2. “面包屑型(Breadcrumbs)”路径
所谓“面包屑”是比喻用户通过主导航到目标网页的访问过程中的路径提示，使用户了解所处网站中的位置而不至于迷失“方向”，并方便回到上级页面和起点。路径中的每个栏目最好添加链接。如下：
时代营销：首页 > 网络营销动态 > 特别报道
即使没有详细的路径来源，也至少应该在每个子页面提示回首页的链接，包括页面的 LOGO作链接。

3.5.3. 首页突出重要内容
除了主栏目，还应该将次级目录中的重要内容以链接的方式在首页或其它子页中多次呈现，以突出重点。搜索引擎 会对这种一站内多次出 现的链接给 予充分重视 ，对网页级 别（PageRank）提高有很大帮助，这也是每个网站首页的网页级别一般高于其它页面级别的重要因素，因为每个子页都对首页进行了链接。

3.5.4. 使用网站地图
网站地图（Site Map）是辅助导航的手段，最初是为用户设计，以方便用户快捷到达目标页。

良好的网站地图设计常常以网站拓扑结构体现复杂的目录关系，具有静态、直观、扁平、简单的特点。多采用文本链接，不用或少用修饰性图片，以加快页面加载速度。以上特点符合搜索引擎友好的要求，因此网站地图在 SEO 中也有重要的意义。尤其对于那些采用图片导航和动态技术生成的网页，通过在网站地图中进行文本链接，可在一定程度上弥补蜘蛛程序无法识别图片和动态网页造成的页面不可见的风险。
需要注意，网站地图也要突出重点，尽量给出主干性内容及链接，而不是所有细枝末节。一页内不适宜放太多链接。Google 明确提出“如果网站地图上的链接超过大约100个，则最好将网站地图拆成多个网页”。
工具推荐：
Xenu：http://home.snafu.de/tilman/xenulink.html 生成网站地图

3.6. 框架结构
框架结构，即帧结构（Frame）网页表现为一个页面内的某一块保持固定，其它部分信息可以通过滚动条上下或左右移动显示，如左边菜单固定，正文信息可移动，或者顶部导航和LOGO 部分保持固定，其它部分上下或左右移动。我们的邮箱通常都采用框架建构。框架型网页的另一个表现是，深层页面的域名通常不会在 URL 中体现出来，即使进入深层子页面，浏览器显示出来的URL 仍然是主页的 URL。
框架型网站的优越性体现在页面的整体一致性和更新方便上。尤其对于那些大型网站而言，框架结构的使用可以使网站的维护变得相对容易。但框架对搜索引擎来说是一个很大的问题，这是由于大多数搜索引擎都无法识别框架，也没有什么兴趣去抓取框架中的内容。此外，某些浏览器也不支持框架页面。
如果网页已经使用了框架，或出于某种原因一定要使用框架结构，则必须在代码中使用“ Noframes ”标签 进行 优化，把 Noframe 标签看做是一个普通文本内容的主页。<Noframe></Noframe>区域中包含指向 frame 页的链接以及带有关键词的描述文本，同时在框架以外的区域也出现关键词文本。这样，搜索引擎才能够正确索引到框架内的信息。
还有一个办法是采用 iframe 即内联框架（Inner Frame）技术来避免 Frame 带来的不便。所谓iframe 也是框架的一种形式，它是相当于在主浏览器窗口中内嵌一个子窗口，内容自动打开。iframe 可以嵌在网页中的任意部分，也可以随意定义其大小，其代码显示为：
<iframe src=xx width=x height=x scrolling=xx frameborder=x></iframe>”
对搜索引擎来说，iframe 中的文字是可见的，也可以跟踪到其中链接指向的页面，不过与用户所见不同的是，搜索引擎将 iframe 内容看成单独的一个页面内容，与被内嵌的页面无关。

3.7. 图像优化
一般而言，搜索引擎只识读文本内容，对图像是不可见的。同时，图像文件直接延缓页面加载时间，如果超过 20 秒网站还不能加载，用户和搜索引擎极有可能离开你的网站。因此，除非你的网站内容是图片为主，比如游戏站点或者图片至关重要，否则尽量避免使用大图片，更不要采用纯图像制作网页(SPLASH PAGE)。网站图片优化的核心有两点：增加搜索引擎可见的文本描述，以及在保持图像质量的情况下尽量压缩图像的文件大小。

3.7.1. Alt 属性
每个图像<IMG>标签中都有 ALT 属性，搜索引擎会读取该属性以了解图像的信息。因此，最好在所有插图的 ALT 属性中都有文字描述，并带上该页关键字在其中。
如：www.marketingman.net/wm37.htm 的书籍广告图片代码为：
<img src="images/webmarketing2_cover_200.jpg" width="200" height="259" alt="《网络营销基础与实践》第 2 版（冯英健著，2004）" border="0">
文本说明：
除了 ALT 属性文字，还可以考虑以下方法直接优化图像，使之被搜索到：
1、在图片上方或下方加上包含关键词的描述文本；
2、在代码中增加一个包含关键词段的 heading 标题标签，然后在图片下方增加文字描述。
3、在图片下方或旁边增加如“更多某某”链接，包含关键词。
4、创建一些既吸引用户又吸引搜索引擎的文本内页，先把流量吸引到这些页面，再提供文本链接指向你的图片页面。总体上，网页应尽量减少装饰性图片以及大图片。而 Alt 属性中的文字对搜索引擎来说，其重要性比正文内容的文字要低。

3.7.2. Gif 和 JPGE 图像优化
Alt 属性和文本说明都只是对图像之外的文本环境进行优化，下面简单谈谈对图片本身的优

化处理。对图片文件优化的目的是在尽量不影响图像画面效果的情况下，将其文件大小降到最低，以加快页面整体下载速度。网页图片格式主要有 GIF 和 JPGE 两种形式。一般来讲，GIF 适用于线图和企业标识；JPEG适宜照片元素的格式。主要通过减少 GIF 颜色数量、缩小图片尺寸和降低分辩率来缩小文件，也可以采用层叠样式表达到优化的目的。PhotoShop 的版本越高越适用于网络图形。此外，将大图片切割成若干小图片于不同的表格区间内进行拼接，也可以相对加快下载时间。
工具推荐（英文）：www.xat.com/internet_technology/download.html （图片优化工具）

3.8. FLASH 优化
由于 FLASH 优美的视觉效果和广阔的创意空间，FLASH 技术在网页设计和网络广告中的应用非常广泛，很多网站首页甚至全部用 FLASH 设计。但 FLASH 网页有一个非常致命的问题，即大部分搜索引擎无法识别 FLASH 中的信息。Google 也只能检索到部分Flash 文件中的内嵌链接。以下列举一个制造机电设备的企业网站首页的代码，用 FLASH 制作，请注意是否可以看见有意义的文本：
<html>
<head>
<title>Welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<link rel="stylesheet" href="style.txt" type="text/css">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" background="images/bg.jpg"><div align="center">
<center>
<table width="777" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="777" height="455"><param name="movie" value="index.swf">
<param name="quality" value="high">
<embed src="index.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="777" height="455"></embed>
</object></td>
</tr>
</table>
<br>
<span class="style2"> 本页使用FLASH技术,如果无法正常浏览请下载并<a href="http://www.macromedia.com/shockwave/download/triggerpages/flash.html">安装插件 </a> 或<a href="asp-bin/big5/?page=1">直接进入 </a><br>
if you are not able to view the animated <a
href="http://www.macromedia.com/shockwave/download/triggerpages/flash.html">pleass install
plug-in </a> first <br><!--网站计数器开始-->
<Script language="JavaScript" src="counter/count.asp"></Script>
<!--网站计数器结束-->
</span>
</center>
</div> </td>
</tr>
</table>
</body>
</html>
同时再采用模拟蜘蛛程序的工具，测试到搜索引擎对该页抓取结果如下：
Spidered Text （蜘蛛可识别的文本）:
Welcome 本页使用 FLASH 技术,如果无法正常浏览请下载并 安装插件 或 直接进入 if you are not able to view the animated pleass install plug-in first
Spidered Links（蜘蛛可识别的链接）:
http://www.macromedia.com/shockwave/download/triggerpages/flash.html
asp-bin/big5/?page=1 (下载 FLASH 插件的链接地址)
http://www.macromedia.com/shockwave/download/triggerpages/flash.html

因此可以得出结论是：
蜘蛛程序没有在这个企业网站首页获得任何有意义的文本内容，也没有获得该 Flash 首页中进入“中文版”“英文版”关键性内容的链接。

3.8.1. FLASH 优化可以从以下三个方面来考虑

1、做一个辅助 HTML 版本：
保留原有 FLASH 版本的同时，还可以设计一个 HTML 格式的版本，这样既可以保持动态美观效果，也可以让搜索引擎通过 HTML 版本的网页来发现网站。
2、将 Flash 内嵌 HTML 文件：
还可以通过改变网页结构进行弥补，即不要将整个网页都设计成 Flash 动画，而是将 Flash内容嵌入到 HTML 文件中，这样对于用户浏览并不会削弱视觉效果，搜索引擎也可以从 HTML代码中发现一些必要的信息，尤其是进入内容页面的链接。
即使首页全部动用了 FLASH，也应该将进入内页的关键性按钮/链接置于 FLASH 文件之外，以独立纯文本链接的方式呈现。上文案例将“中文版”链接置于 FLASH 文件中，使得蜘蛛程序一无所获，无法抓取到内页信息。
3、 付费登录搜索引擎：
如果 FLASH 网站错过了被免费的技术型搜索引擎自动检索的机会，或者搜索结果排名效果不
太理想，可以通过付费登录或做搜索引擎关键词广告，同样被用户搜索到。总体上，商业网站应尽量少用 FLASH，站点间进行广告交换时也要避免采用 FLASH 广告为上策。

3.9. 表格使用
表格是网页最重要的排版方式。如果某个网页采用了大段的长篇文本，除了可以将一页文本

分成多面，还可以考虑将文本置入不同表格中，这样不仅管理方便，也使得该页加载时每个表格内容依次加载，这样访问者就可以一边看已下载内容一边等待剩余部分加载，而不是等待很久之后才一齐加载出来。表格之内套嵌太多表格也不利于页面加载，因浏览器是先加载完大表格之后再加载内嵌的小表格，因此内嵌表格会最终降低整页加载速度。

3.10. 网页减肥
代码设置不妥不仅延长网页加载时间，也严重影响蜘蛛程序对网页内容的抓取。通过对网页代码进行清减（俗称“网页减肥”），去掉臃肿杂乱的代码，减小网页文件大小，能够加快网页加载速度，让蜘蛛快速索引到重要内容。正常情况下一个页面的文件大小在 15K 左右，最好不要超过 50K。网页减肥重点涉及以下几个要点：

3.10.1. CSS 样式
网页制作应通过 CSS（层叠样式表单）来统一定制字体风格，以使代码标准化，避免大量的字体和格式化标签如< h1 >< /h1 >、< font size=×× color=×× >< /font >充斥页面。通过 css 可以控制任何 HTML 标签的风格。例如<td>,<p>,<body>,<table>,<tr>,<th>等。只要在 HTML 的<head>区内的<style type="text/css">和</style>之间指定对应标签的风格如字体，颜色，大小即可，例如：
<style type="text/css">
<!--
h2 { font-family: " 宋 体 "; font-size: 12pt; color: #333366; background-color:
#FFCCCC; font-weight: bold}
h1 { font-family: "Arial"; font-size: 12pt; color: #993300}
-->
</style>
仅通过以上设置，就把文字的字体、字号、颜色、背景色等统一起来，不用对每段文字单独进行格式定义，从而减少大量重复性标签。注意把所有 css 文件单独存放在命名为 css 的外部文件中。通过设置 CSS 样式，也可以提升导航文本的美观度，达到与图片导航同样优美观的效果，这点尤其提醒网页设计师注意，没有必要将导航条用图片呈现。

3.10.2. JavaScript
正常情况下，网页尽量以<HTML>作为代码的开始端。但采用 JavaScript 技术的网页往往在

页面一开始就堆积大量 JAVA 代码，以至 META 及关键字迟迟不能出现，被推至页面底部，对搜索引擎很不友好。有两种方法可以使之得以改善：
1、 将脚本移至页面底部
大部分的 JAVA 代码都可以移到页面结束标签之上，而不影响网站功能。这样就能一开始突出关键词，并加快页面加载时间。
2、 将 JAVA 脚本置入一个.js 扩展名的文件。
包含你的 JavaScript 的.js 文件通常在网站访问者的浏览器中被缓存下来，使得下次访问速度加快，也使得网站修改和维护起来更加方便。例：一段 JAVA 代码正常情况下显示如下：
<script language=JavaScript>
<!--
此处是你的代码，将它们拷贝到一个.js 文件
//-->
</script>
忽略开始及 结束标签，将中间的代码单独保存为扩展名为 .js 的文件，如文件名为 “mycode.js”的一个文件，然后将此文件上传到服务器上与该页同样的目录下。最后将上文列举的完整的 JavaScript 置换为简单的一行：
<script language=JavaScript src=mycode.js></script>
这样，一个“mycode.js”文件就将大段冗长复杂的 JAVA 代码置换了。
工具推荐：
网页减肥工具：http://202.99.237.33/softdown/softdoc/net_opt.htm 去除网页中多余代码，减小网页。