网站优化

如何设计对搜索引擎友好的网站

2010-07-20

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

目录结构和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 样式表则各自建立专门的目录收入其中,一般不放在根目录下。
目录和文件命名:
根据关键字无所不在的原则,可以在目录名称和文件名称中使用到关键词。但如果是关键词组,则需要用分隔符分开。我们常用连字符“-”和下划线“_”进行分隔,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 中含有关键字本身对排名提高帮助并不大,因而这种做法多此一举,也是搜索引擎反感的。
绝对URL和相对URL:
绝对URL : 即网页路径使用包含顶级域名在内的完整的URL 。如:
www.yoursite.com/page1/index.html 是一个绝对路径,其中/page1/index.html 则为相对路径,由浏览器自动在该链接前加上www.yoursite.com。
总体上,Google 在排名时并不在意URL 使用的是相对路径还是绝对路径。
动态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、主导航醒目清晰
主导航一般体现为一级目录,通过它们用户和蜘蛛程序都可以层层深入访问到网站所有重要内容。因此主栏目必须在网站首页第一屏的醒目位置体现,并最好采用文本链接而不是图片。
2、“面包屑型(Breadcrumbs)”路径
所谓“面包屑”是比喻用户通过主导航到目标网页的访问过程中的路径提示,使用户了解所处网站中的位置而不至于迷失“方向”,并方便回到上级页面和起点。路径中的每个栏目最好添加链接。如下:
时代营销:首页> 网络营销动态> 特别报道
即使没有详细的路径来源,也至少应该在每个子页面提示回首页的链接,包括页面的LOGO作链接。
3、首页突出重要内容
对搜索引擎来说,iframe 中的文字是可见的,也可以跟踪到其中链接指向的页面,不过与用户所见不同的是,搜索引擎将iframe 内容看成单独的一个页面内容,与被内嵌的页面无关。


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

Gif 和JPGE 图像优化:
Alt 属性和文本说明都只是对图像之外的文本环境进行优化,下面简单谈谈对图片本身的优化处理。对图片文件优化的目的是在尽量不影响图像画面效果的情况下,将其文件大小降到最低,以加快页面整体下载速度。
网页图片格式主要有GIF 和JPGE 两种形式。一般来讲,GIF 适用于线图和企业标识;JPEG 适宜照片元素的格式。主要通过减少GIF 颜色数量、缩小图片尺寸和降低分辩率来缩小文件,也可以采用层叠样式表达到优化的目的。PhotoShop 的版本越高越适用于网络图形。此外,将大图片切割成若干小图片于不同的表格区间内进行拼接,也可以相对加快下载时间。

工具推荐(英文):www.xat.com/internet_technology/download.html (图片优化工具)

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="clsid27CDB6E-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/shockw ... gerpages/flash.html asp-bin/big5/?page=1 (下载FLASH 插件的链接地址)
http://www.macromedia.com/shockw ... gerpages/flash.html
因此可以得出结论是:
蜘蛛程序没有在这个企业网站首页获得任何有意义的文本内容,也没有获得该Flash 首页中进入“中文版”“英文版”关键性内容的链接。
FLASH 优化可以从以下三个方面来考虑:
1、做一个辅助HTML 版本:
保留原有FLASH 版本的同时,还可以设计一个HTML 格式的版本,这样既可以保持动态美观效果,也可以让搜索引擎通过HTML 版本的网页来发现网站。
2、将Flash 内嵌HTML 文件:
还可以通过改变网页结构进行弥补,即不要将整个网页都设计成Flash 动画,而是将Flash 内容嵌入到HTML 文件中,这样对于用户浏览并不会削弱视觉效果,搜索引擎也可以从HTML 代码中发现一些必要的信息,尤其是进入内容页面的链接。
即使首页全部动用了FLASH,也应该将进入内页的关键性按钮/链接置于FLASH 文件之外,以独立纯文本链接的方式呈现。上文案例将“中文版”链接置于FLASH 文件中,使得蜘蛛程序一无所获,无法抓取到内页信息。
3、付费登录搜索引擎:
如果FLASH 网站错过了被免费的技术型搜索引擎自动检索的机会,或者搜索结果排名效果不太理想,可以通过付费登录或做搜索引擎关键词广告,同样被用户搜索到。
总体上,商业网站应尽量少用FLASH,站点间进行广告交换时也要避免采用FLASH 广告为上策。

表格使用
表格是网页最重要的排版方式。如果某个网页采用了大段的长篇文本,除了可以将一页文本分成多面,还可以考虑将文本置入不同表格中,这样不仅管理方便,也使得该页加载时每个表格内容依次加载,这样访问者就可以一边看已下载内容一边等待剩余部分加载,而不是等待很久之后才一齐加载出来。
表格之内套嵌太多表格也不利于页面加载,因浏览器是先加载完大表格之后再加载内嵌的小表格,因此内嵌表格会最终降低整页加载速度。
网页减肥
代码设置不妥不仅延长网页加载时间,也严重影响蜘蛛程序对网页内容的抓取。通过对网页代码进行清减(俗称“网页减肥”),去掉臃肿杂乱的代码,减小网页文件大小,能够加快网页加载速度,让蜘蛛快速索引到重要内容。正常情况下一个页面的文件大小在15K 左右,最好不要超过50K。
网页减肥重点涉及以下几个要点:
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”的一个文件,然后将此文件上传到服务器上与该页同样的目录下。最后将上文列举的完整的JavaScript 置换为简单的一行:
<script language=JavaScript src=mycode.js></script>
这样,一个“mycode.js”文件就将大段冗长复杂的JAVA 代码置换了。