设计制作对搜索引擎友好的网页

6.4.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，搜索引擎还是会去抓取二到三层子目录下的文件，但最好不要超过三层，如果超过四层，如以下这个页面：http://www.yoursite.com/dir1/dir2/dir3/dir4/page.htm，搜索引擎将很难搜索到。但以下情况，即使深入第四层甚至更深层次的页面，也同样能被搜索到：

（1）如果该页提供了重要内容，有大量来自其他网站的外部链接（Inbound Link）。

（2）如果在首页上增加一个该页的链接，可以通过首页直接到达，搜索Spider还是可以轻易地找到它。

（3）如果有其他网站在顶级页面上链接了该页，其效果类似于在本站的首页上做了该链接。

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

2）目录和文件命名

根据关键词无所不在的原则，可以在目录名称和文件名称中使用关键词。但如果是关键词组，则需要用分隔符分开。常用连字符“-”和下划线“＿”进行分隔，URL中还经常出现空格码“%20”。因此，如果以“中国制造”作为文件名，就可能出现以下三种分隔形式：made-in-china.htm、made＿in＿china.htm、made%20in%20china.htm，但事实上，至少在目前谷歌并不认同“＿”为分隔符。对谷歌来说，made-in-china和made%20in%20china都等于made in china，但made＿in＿china就被读成了madeinchina，连在一起之后，关键词就失去了意义。因此，目录和文件名称如果有关键词组，要用连字符“_-”而不是下划线“＿”进行分隔。

URL应力求简洁，切忌为了单纯增加关键词而额外多建一个带有关键词的子目录，改变目录结构。由于URL中含有关键词本身对排名提高帮助并不大，因而这种做法多此一举，也是搜索引擎反感的。

3）绝对URL和相对URL

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

（2）动态URL　目前很多网站都有数据库驱动生成的URL，即动态URL，往往表现为在URL中出现“？”、“＝”、“%”以及“＆”、“＄”等字符。动态URL极不利于搜索引擎抓取网页，严重影响网站排名，通常是通过技术解决方案将动态URL转化成静态的URL形式。如将http://www.domain.com/messages.php？id＝2＆type＝5转化为http://www.do-main.com/messages/2/5/。

4）导航结构

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

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

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

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

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

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

5）框架结构

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

6）图像优化

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

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

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

除了Alt属性文字，还可以考虑以如下方法直接优化图像，使之被搜索到：

（1）在图片上方或下方加上包含关键词的描述文本。

（2）在代码中增加一个包含关键词段的heading标题标签，然后在图片下方增加文字描述。

（3）在图片下方或旁边增加如“更多某某”链接，包含关键词。

（4）创建一些既吸引用户又吸引搜索引擎的文本内页，先把流量吸引到这些页面，再提供文本链接指向你的图片页面。

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

7）GIF和JPEG图像优化

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

同时，对于矢量图、颜色单一的图片应保存为GIF格式；对于色彩丰富的图片（如相片）应保存为JPEG格式。

8）Flash优化

由于Flash优美的视觉效果和广阔的创意空间，Flash技术在网页设计和网络广告中的应用非常广泛，很多网站首页甚至全部用Flash设计。但Flash网页有一个非常致命的问题，即大部分搜索引擎无法识别Flash中的信息。谷歌也只能检索到部分Flash文件中的内嵌链接。

Flash优化可以从以下三个方面来考虑：

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

（2）将Flash内嵌HTML文件　还可以通过改变网页结构进行弥补，即不要将整个网页都设计成Flash动画，而是将Flash内容嵌入到HTML文件中，这样对于用户浏览并不会削弱视觉效果，搜索引擎也可以从HTML代码中发现一些必要的信息，尤其是进入内容页面的链接。即使首页全部动用了Flash，也应该将进入内页的关键性按钮/链接置于Flash文件之外，以独立纯文本链接的方式呈现。

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

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

9）表格使用

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

10）代码设置

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