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

?目录结构和?URL

?URL?是统一资源定位，即每个网页的网址、路径。网站文件的目录结构直接体现于?URL。清?晰简短的目录结构和规范的命名不仅有利于用户体验和网址传播，更是搜索引擎友好的体?现。

?目录层次：?对于一个小型网站来说，一般只有一层子目录，如下：?http://www.yoursite.com/dir1/page.htm

??是域名，dir1?是一级目录名，page?是文件名。对搜索引擎而言，这种单?一的目录结构最为理想，即扁平结构（Flat）。

?而对规模大一些的网站，往往需要二到三层子目录。象这样：?http://www.yoursite.com/dir1/dir2/dir3/page.htm?搜索引擎还是会去抓取二到三层子目录下的文件，但{zh0}不要超过?3?层，如果超过?4?层，象?以下这个页面，搜索引擎就很难去搜索它了：?http://www.yoursite.com/dir1/dir2/dir3/dir4/page.htm

当然，以下情况下，即使深入第四层甚至更深层次的页面，也同样能被搜索到：?1、如果该页提供了重要内容，有大量来自其它网站的外部链接（Inbound?Links）；?2、如果在首页上增加一个该页的链接，可以通过首页直接到达，搜索?Spider?还是可以轻易?地找到它；?3、如果有其它网站在{dj0}页面上链接了该页，其效果就好似你在自己的首页上做了该链接。

?此外，图形、脚本、CGI-BIN?和?CSS?样式表则各自建立专门的目录收入其中，一般不放在根?目录下。

?目录和文件命名：?根据关键字无所不在的原则，可以在目录名称和文件名称中使用到关键词。但如果是关键词?组，则需要用分隔符分开。我们常用连字符“-”和下划线“_”进行分隔，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?中含有关键字本身对排名提高帮助并不大，因而这种做法多此一举，也是?搜索引擎反感的。

?{jd1}?URL?和相对?URL：

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

?总体上，Google?在排名时并不在意?URL?使用的是相对路径还是{jd1}路径。

动态?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?的解决方案。

导航结构

主?要功能在于引导用户方便地访问网站内容，是评价网站专业度、可用度的重要指标。同时对?搜索引擎也产生诸多提示作用。概括地讲，网站在导航方面应注意以下几点：

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

2、?“面包屑型(Breadcrumbs)”路径?所谓“面包屑”是比喻用户通过主导航到目标网页的访问过程中的路径提示，使用户了解所?处网站中的位置而不至于迷失“方向”，并方便回到上级页面和起点。路径中的每个栏目最?好添加链接。如下：

时代营销：>?>?

?即使没有详细的路径来源，也至少应该在每个子页面提示回首页的链接，包括页面的?LOGO作链接。

?3、首页突出重要内容

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

?4、使用网站地图

?网站地图（Site?Map）是辅助导航的手段，最初是为用户设计，以方便用户快捷到达目标页。?良好的网站地图设计常常以网站拓扑结构体现复杂的目录关系，具有静态、直观、扁平、简?单的特点。多采用文本链接，不用或少用修饰性图片，以加快页面加载速度。以上特点符合?搜索引擎友好的要求，因此网站地图在?SEO?中也有重要的意义。尤其对于那些采用图片导航?和动态技术生成的网页，通过在网站地图中进行文本链接，可在一定程度上弥补蜘蛛程序无?法识别图片和动态网页造成的页面不可见的风险。

?需要注意，网站地图也要突出重点，尽量给出主干性内容及链接，而不是所有细枝末节。一?页内不适宜放太多链接。Google?明确提出“如果网站地图上的链接超过大约?100?个，则最?好将网站地图拆成多个网页”。

?工具推荐：

?Xenu：生成网站地图

?框架结构

框架结构，即帧结构（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?内容看成单独的一个页面内容，与被内嵌的页面无?关。

?图像优化

?一般而言，搜索引擎只识读文本内容，对图像是不可见的。同时，图像文件直接延缓页面加?载时间，如果超过?20?秒网站还不能加载，用户和搜索引擎极有可能离开你的网站。因此，?除非你的网站内容是图片为主，比如游戏站点或者图片至关重要，否则尽量避免使用大图片，?更不要采用纯图像制作网页(SPLASH?PAGE)。

?网站图片优化的核心有两点：增加搜索引擎可见的文本描述，以及在保持图像质量的情况下?尽量压缩图像的文件大小。

Alt?属性：

?每个图像<IMG>标签中都有?ALT?属性，搜索引擎会读取该属性以了解图像的信息。因此，最?好在所有插图的?ALT?属性中都有文字描述，并带上该页关键字在其中。

?如：?的书籍广告图片代码为：

?<img?src=”images/webmarketing2_cover_200.jpg”?width=”200″?height=”259″?alt=”《网?络营销基础与实践》第?2?版（冯英健著，2004）”?border=”0″>

?文本说明：

?除了?ALT?属性文字，还可以考虑以下方法直接优化图像，使之被搜索到：?1、在图片上方或下方加上包含关键词的描述文本；?2、在代码中增加一个包含关键词段的?heading?标题标签，然后在图片下方增加文字描述。?3、在图片下方或旁边增加如“更多某某”链接，包含关键词。?4、创建一些既吸引用户又吸引搜索引擎的文本内页，先把流量吸引到这些页面，再提供文?本链接指向你的图片页面。

?总体上，网页应尽量减少装饰性图片以及大图片。而?Alt?属性中的文字对搜索引擎来说，其?重要性比正文内容的文字要低。

?Gif?和?JPGE?图像优化：

?Alt?属性和文本说明都只是对图像之外的文本环境进行优化，下面简单谈谈对图片本身的优?化处理。对图片文件优化的目的是在尽量不影响图像画面效果的情况下，将其文件大小降到?{zd1}，以加快页面整体下载速度。

?网页图片格式主要有?GIF?和?JPGE?两种形式。一般来讲，GIF?适用于线图和企业标识；JPEG?适宜照片元素的格式。主要通过减少?GIF?颜色数量、缩小图片尺寸和降低分辩率来缩小文件，?也可以采用层叠样式表达到优化的目的。PhotoShop?的版本越高越适用于网络图形。此外，?将大图片切割成若干小图片于不同的表格区间内进行拼接，也可以相对加快下载时间。

?工具推荐（英文）：（图片优化工具）

FLASH 优化：

由于 FLASH 优美的视觉效果和广阔的创意空间，FLASH 技术在网页设计和网络广告中的应用 非常广泛，很多网站首页甚至全部用 FLASH 设计。但 FLASH 网页有一个非常致命的问题，即 大部分搜索引擎无法识别 FLASH 中的信息。Google 也只能检索到部分 Flash 文件中的内嵌 链接。以下列举一个制造机电设备的企业网站首页的代码，用 FLASH 制作，请注意是否可以 看见有意义的文本：

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=”{bfb}”?height=”{bfb}”?cellspacing=”0″?cellpadding=”0″>?<tr>

?<td?width=”{bfb}”?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>

?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?首页中?进入“中文版”“英文版”关键性内容的链接。

?FLASH?优化可以从以下三个方面来考虑：?1、做一个辅助?HTML?版本：

?保留原有?FLASH?版本的同时，还可以设计一个?HTML?格式的版本，这样既可以保持动态美观?效果，也可以让搜索引擎通过?HTML?版本的网页来发现网站。

?2、将?Flash?内嵌?HTML?文件：?还可以通过改变网页结构进行弥补，即不要将整个网页都设计成?Flash?动画，而是将?Flash?内容嵌入到?HTML?文件中，这样对于用户浏览并不会削弱视觉效果，搜索引擎也可以从?HTML?代码中发现一些必要的信息，尤其是进入内容页面的链接。

?即使首页全部动用了?FLASH，也应该将进入内页的关键性按钮/链接置于?FLASH?文件之外，?以独立纯文本链接的方式呈现。上文案例将“中文版”链接置于?FLASH?文件中，使得蜘蛛程?序一无所获，无法抓取到内页信息。

3、?付费登录搜索引擎：

?如果?FLASH?网站错过了被免费的技术型搜索引擎自动检索的机会，或者搜索结果排名效果不?太理想，可以通过付费登录或做搜索引擎关键词广告，同样被用户搜索到。

?总体上，商业网站应尽量少用?FLASH，站点间进行广告交换时也要避免采用?FLASH?广告为上?策。表格使用

?表格是网页最重要的排版方式。如果某个网页采用了大段的长篇文本，除了可以将一页文本?分成多面，还可以考虑将文本置入不同表格中，这样不仅管理方便，也使得该页加载时每个?表格内容依次加载，这样访问者就可以一边看已下载内容一边等待剩余部分加载，而不是等?待很久之后才一齐加载出来。

?表格之内套嵌太多表格也不利于页面加载，因浏览器是先加载完大表格之后再加载内嵌的小?表格，因此内嵌表格会最终降低整页加载速度。

?网页xx

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

?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?样式，也可以提升导航文本的美观度，达到与图片导航同样优美观的效果，这?点尤其提醒网页设计师注意，没有必要将导航条用图片呈现。

?JavaScript：

?正常情况下，网页尽量以<HTML>作为代码的开始端。但采用?JavaScript?技术的网页往往在?页面一开始就堆积大量?JAVA?代码，以至?META?及关键字迟迟不能出现，被推至页面底部，对?搜索引擎很不友好。有两种方法可以使之得以改善：?1、?将脚本移至页面底部

?大部分的?JAVA?代码都可以移到页面结束标签之上，而不影响网站功能。这样就能一开始突?出关键词，并加快页面加载时间。

?2、?将?JAVA?脚本置入一个.js?扩展名的文件。

?包含你的?JavaScript?的.js?文件通常在网站访问者的浏览器中被缓存下来，使得下次访问?速度加快，也使得网站修改和维护起来更加方便。例：一段?JAVA?代码正常情况下显示如下：

?<script?language=JavaScript>?<!–

?此处是你的代码，将它们拷贝到一个.js?文件?//–>

?</script>

?忽略开始及?结束标签，将中间的代?码单独保存为扩展名为?.js?的文件，如文件名?为?“mycode.js”的一个文件，然后将此文件上传到服务器上与该页同样的目录下。{zh1}将上?文列举的完整的?JavaScript?置换为简单的一行：

?<script??language=JavaScript??src=mycode.js></script>

?这样，一个“mycode.js”文件就将大段冗长复杂的?JAVA?代码置换了。

工具推荐：

网页xx工具：去除网页中多余?代码，减小网页。