剑薰电脑爱好者
  天津网站建设   许愿 两性知识  
    电脑知识经典技巧----打造电脑教学的专业门户网站!
  本站首页 | 最新教程 | 推荐教程 | 热门阅读 | 欢迎投稿 | 友情链接 | 网站服务 | 广告服务 | 网站地图 |
  网站论坛 | 会员专区 | 论坛新帖 | 找回密码 | 软件专区 | 硬件专区 | 网络专区 | 技巧专区 | 搞笑事件 | 求助专区
  网络秘籍 | 电脑安全 | 电脑操作 | 软件技巧 | 网站开发 | 保养常识 | 硬件常识 | 选购指南 | 故障维修 | 网友来稿
 当前位置:剑薰电脑爱好者 -->> 网站开发教程 -->> 搜索引擎优化seo完全教程之三:网页设计
搜索引擎优化seo完全教程之三:网页设计
浏览 次  发布时间:2008-5-25 19:52:42
剑薰电脑爱好者----打造电脑教学的专业门户网站!

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

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

  目录结构和 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。如 :http://www.yoursite.com/page1/index.html 是一个绝对路径,其中/page1/index.html 则为相对路径,由浏览器自动在该链接前加上 http://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、首页突出重要内容
  除了主栏目,还应该将次级目录中的重要内容以链接的方式在首页或其它子页中多次呈现,以突出重点。搜索引擎会对这种一站内多次出现的链接给予充分重视,对网页级别(PageRank)提高有很大帮助,这也是每个网站首页的网页级别一般高于其它页面级别的重要因素,因为每个子页都对首页进行了链接。

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

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

  工具推荐:
  Xenu:http://home.snafu.de/tilman/xenulink.html 生成网站地图

  框架结构

  框架结构,即帧结构(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 属性中都有文字描述,并带上该页关键字在其中。

  如:http://www.likecp.com/index.html 的广告图片代码为:<img src="images/ad.jpg" width="200" height="259" alt="许愿网" 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="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 首页中进入“中文版”“英文版”关键性内容的链接。

  FLASH 优化可以从以下三个方面来考虑:
  1、做一个辅助 HTML 版本:
  保留原有 FLASH 版本的同时,还可以设计一个 HTML 格式的版本,这样既可以保持动态美观效果,也可以让搜索引擎通过 HTML 版本的网页来发现网站。

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

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

剑薰电脑爱好者----打造电脑教学的专业门户网站!
上一篇:搜索引擎优化seo完全教程之二:关键字策略 | 下一篇:搜索引擎优化seo完全教程之四:SEO指导下的技术支持
【返回顶端】  【返回列表】  【回首页】  【打印该页】  【收藏该页】  【关闭该页】
 网友评论:(只显示最新10条,评论内容只代表网友观点,与本站立场无关!)
* 姓名: (* 为必填 下同)
网址:
QQ:
邮箱:
* 验证码: 验证码,看不清楚?请点击刷新验证码
* 内容:
(200字以内)
 教程搜索

 网站开发教程热门阅读
· SEO的两个致命点:... (27754)
· 17条网站隐患 影响... (26546)
· 在网页优化中进行作... (25348)
· 要以搜索引擎蜘蛛S... (25139)
· 提高域名信任度的几... (24910)
· 如何让百度加速收录... (24036)
· 最基本的SEO建站要点 (23342)
· 搜索引擎优化/网站... (23272)
· seo工作中一定要避... (23130)
· SEO技巧中你可能没... (22350)
· 学习SEO,你需要先... (20905)
· 什么是Sandbox 效应... (20773)
 论坛新帖
· 点击开始关闭计算机... [8-22]
· 亦道为嬴[灌水] [8-17]
· [求助]我的百度帖吧... [8-17]
· [求助]如何将录音磁... [8-17]
· [求助]大哥们先进来... [8-11]
· [转帖]电脑族不可少... [8-7]
· 大问题要帮忙!!! [8-6]
· 开机出现黑屏,请各... [8-3]
· 输入法没有 [8-1]
· 100M双线全能空间最... [7-25]
 站内调查
  您觉得本站哪里需要改进,您最不满意的是?
网页的排版、布局太差
页面的色彩搭配不好
网页载入的速度太慢
教程内容太少了
教程内容质量太差
  
[关于我们][广告服务][网站开发][网站优化][作品展示][本站地图][会员特权][我要投稿][错误指正][友情链接][免责声明][关于本站][联系我们]
版权所有:剑薰电脑爱好者网站 技术支持:剑薰网站服务 QQ:84489673 QQ群:16088162 E-mail:admin@likecp.com
Copyright©2005-2008 likecp.com All Right Reserved 冀ICP备06010478号