对搜索引擎友好的网页设计制作
仿站对搜索引擎友好的网页设计制作
一、目录结构和 URL 搜狐，汽车频道 auto.sohu.com link:prod.it.com.cn/pricelist/2/1/14/534.htm。
天天收藏夹， 在百度里面收录这个页面外国驻华使馆-天天收藏夹网站目录而这个页面从首页算起，已经是第五层了。 二、导航结构 网站管理员支持中心例如：
若页面太多，可以考虑使用前面讲到的二级域名扩展。
使用工具 Xenu 生成网站地图：
浪潮服务器地图 Google SiteMap格式比较简单：
例如：我的Sitemap，是分成2级的。如果数量比较少，只需要 一级页面。
使用 Sitemap 协议
三、框架结构 框架结构示例，登录好后即框架结构。
<frameset rows="30,1%" frameborder="NO" border="0" framespacing="0" >
<frame name="mainFrame" src="top.jsp" scrolling="NO">
<frameset cols="168,1%" frameborder="NO" border="0" framespacing="0">
<frame name="avdNsVDmJQC7" scrolling="AUTO" src="left.jsp">
<frame name="rightFrame" scrolling="AUTO" noresize src="right.jsp">
</frameset>
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
框架型网站的优越性体现在页面的整体一致性和更新方便上。尤其对于那些大型网站而言， 框架结构的使用可以使网站的维护变得相对容易。但框架对搜索引擎来说是一个很大的问题，这是由于大多数搜索引擎都无法识别框架，也没有什么兴趣去抓取框架中的内容。此外， 某些浏览器也不支持框架页面。
如果网页已经使用了框架，或出于某种原因一定要使用框架结构，则必须在代码中使用 “Noframes”标签进行优化，把 Noframe 标签看做是一个普通文本内容的主页。在 <Noframe></Noframe>区域中包含指向 frame 页的链接以及带有关键词的描述文本，同时在框架以外的区域也出现关键词文本。这样，搜索引擎才能够正确索引到框架内的信息。 Google 图片搜索 NP370排名第一。
Google的图像搜索(Googlebot-Image)和Google的文本搜索(Googlebot)不是同蜘蛛。 浪潮英信NP370 G2一汽轿车优化可以从以下三个方面来考虑：
FLASH 新浪新闻 复杂三栏式版面使用position 属性等定位。复杂版面设计.htm
什么是XHTML。 CSS 减肥示例文件把文字的字体、字号、颜色、背景色等统一起来，不用对每段文字单独进行格式定义，从而减少大量重复性标签。注意把所有 css 文件单独存放在命名为 css 的外 部文件中。
语法： <link rel="stylesheet" type="text/css" href="/common/client.css">
作用的优先级：自身的style属性 > 页面的内部style对象 > 页面外部css文件。 Google，里面的函数名称只有1个或者2个字符。
2.将网页的公共部分转换为脚本并存于js文件里。这样可以减少文件大小，加快下载速度，同时也方便管理。
不过不能将导航等等优化的关键代码转换成js，否则搜索引擎搜索不到。
例如：华军软件园，将标题、导航等等都放着js文件里，将导航放在js里面就不太好了。
天天收藏夹， 在百度里面收录这个页面外国驻华使馆-天天收藏夹网站目录而这个页面从首页算起，已经是第五层了。 二、导航结构 网站管理员支持中心例如：
若页面太多，可以考虑使用前面讲到的二级域名扩展。
使用工具 Xenu 生成网站地图：
浪潮服务器地图 Google SiteMap格式比较简单：
例如：我的Sitemap，是分成2级的。如果数量比较少，只需要 一级页面。
使用 Sitemap 协议
三、框架结构 框架结构示例，登录好后即框架结构。
<frameset rows="30,1%" frameborder="NO" border="0" framespacing="0" >
<frame name="mainFrame" src="top.jsp" scrolling="NO">
<frameset cols="168,1%" frameborder="NO" border="0" framespacing="0">
<frame name="avdNsVDmJQC7" scrolling="AUTO" src="left.jsp">
<frame name="rightFrame" scrolling="AUTO" noresize src="right.jsp">
</frameset>
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
框架型网站的优越性体现在页面的整体一致性和更新方便上。尤其对于那些大型网站而言， 框架结构的使用可以使网站的维护变得相对容易。但框架对搜索引擎来说是一个很大的问题，这是由于大多数搜索引擎都无法识别框架，也没有什么兴趣去抓取框架中的内容。此外， 某些浏览器也不支持框架页面。
如果网页已经使用了框架，或出于某种原因一定要使用框架结构，则必须在代码中使用 “Noframes”标签进行优化，把 Noframe 标签看做是一个普通文本内容的主页。在 <Noframe></Noframe>区域中包含指向 frame 页的链接以及带有关键词的描述文本，同时在框架以外的区域也出现关键词文本。这样，搜索引擎才能够正确索引到框架内的信息。 Google 图片搜索 NP370排名第一。
Google的图像搜索(Googlebot-Image)和Google的文本搜索(Googlebot)不是同蜘蛛。 浪潮英信NP370 G2一汽轿车优化可以从以下三个方面来考虑：
FLASH 新浪新闻 复杂三栏式版面使用position 属性等定位。复杂版面设计.htm
什么是XHTML。 CSS 减肥示例文件把文字的字体、字号、颜色、背景色等统一起来，不用对每段文字单独进行格式定义，从而减少大量重复性标签。注意把所有 css 文件单独存放在命名为 css 的外 部文件中。
语法： <link rel="stylesheet" type="text/css" href="/common/client.css">
作用的优先级：自身的style属性 > 页面的内部style对象 > 页面外部css文件。 Google，里面的函数名称只有1个或者2个字符。
2.将网页的公共部分转换为脚本并存于js文件里。这样可以减少文件大小，加快下载速度，同时也方便管理。
不过不能将导航等等优化的关键代码转换成js，否则搜索引擎搜索不到。
例如：华军软件园，将标题、导航等等都放着js文件里，将导航放在js里面就不太好了。
URL 是统一资源定位，即每个网页的网址、路径。网站文件的目录结构直接体现于 URL。清晰简短的目录结构和规范的命名不仅有利于用户体验和网址传播，更是搜索引擎友好的体 现。
1.目录访问层次： ：
即通过几层能够访问到最终页面，Google 最好为三层。
这样的结果便于搜索引擎索引。第三层页面能够及时让搜索引擎收录。
这样的结果便于搜索引擎索引。第三层页面能够及时让搜索引擎收录。
问题1：如果我的网站目录层次大于三层，该怎么办？
回答：由于三层的目录，容纳的页面有限，需要多级目录。
这个时候使用前面我们讲过的二级域名的方式扩大级数。因为二级域名算独立网站，目录层次从当前二级域名算起。
例如：
这个时候使用前面我们讲过的二级域名的方式扩大级数。因为二级域名算独立网站，目录层次从当前二级域名算起。
例如：
问题2：为什么有的网页在本网站层数很多，也被Google收录呢？
回答：这些页面被其他网站引用，而Google从其他页面进入这个页面也少于三层。
可以使用 link 命令查询该页的反相链接。例如：link 命令只能查询3个月前的历史记录，当前的外链需要3个月后查询。
可以使用 link 命令查询该页的反相链接。例如：link 命令只能查询3个月前的历史记录，当前的外链需要3个月后查询。
问题3：所有的搜索引擎是否都和Google一样？
回答：不是
百度收录的时候相对 宽容一些，例如：我的网站
百度收录的时候相对 宽容一些，例如：我的网站
总结：三层目录，是最佳的目录结构。
2.目录和文件命名：
a.根据关键字无所不在的原则，可以在目录名称和文件名称中使用到关键词。但如果是关键词 组，则需要用分隔符分开。我们常用连字符“-”和下划线“_”进行分隔，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，
因此，目录和文件名称如果有关键词组，要用连字符“-”而不是下划线“_”进行分隔。
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，
因此，目录和文件名称如果有关键词组，要用连字符“-”而不是下划线“_”进行分隔。
问题1：所有的搜索引擎是否都和Google一样？
回答：不是
在百度图片中，拼音路径比较有效的。
例如：site:www.***.cn，收录大部分都排在第一。
在百度图片中，拼音路径比较有效的。
例如：site:www.***.cn，收录大部分都排在第一。
b.URL 应该越短越好。
有人为了单纯增加关键字而额外建多一个带有关键字的子目录，改变目 录结构。由于 URL 中含有关键字本身对排名提高帮助并不大，因而这种做法多此一举，也是搜索引擎反感的。
例如：要做英文关键词 computer，这样的目录 http://www.ibm.com/computer/computer/computer.html 是错误的。
有人为了单纯增加关键字而额外建多一个带有关键字的子目录，改变目 录结构。由于 URL 中含有关键字本身对排名提高帮助并不大，因而这种做法多此一举，也是搜索引擎反感的。
例如：要做英文关键词 computer，这样的目录 http://www.ibm.com/computer/computer/computer.html 是错误的。
总结：合理的目录命名，可以对网页排名是加分的。
3.绝对 URL 和相对 URL：略
> 绝 对 URL ： 即 网 页 路 径 使 用 包 含 顶 级 域 名 在 内 的 完 整 的 URL 。 如 ： www.yoursite.com/page1/index.html 是一个绝对路径，其中/page1/index.html 则为相对 路径，由浏览器自动在该链接前加上 www.yoursite.com。
总体上，Google 在排名时并不在意 URL 使用的是相对路径还是绝对路径。
总体上，Google 在排名时并不在意 URL 使用的是相对路径还是绝对路径。
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 的解决方案。
问题1：为什么动态页面对搜索引擎不友好呢？
回答：1.因为这样会陷入死循环。这就是所谓的蜘蛛陷阱(spider traps)。
1.主导航醒目清晰
主导航一般体现为一级目录，通过它们用户和蜘蛛程序都可以层层深入访问到网站所有重要内容。因此主栏目必须在网站首页第一屏的醒目位置体现，并最好采用文本链接而不是图片。
例如 www.51fangzhan.com
例如 www.51fangzhan.com
2.“面包屑型(Breadcrumbs)”路径 ：
> 所谓“面包屑”是比喻用户通过主导航到目标网页的访问过程中的路径提示，使用户了解所处网站中的位置而不至于迷失“方向”，并方便回到上级页面和起点。路径中的每个栏目最好添加链接。如下：
即使没有详细的路径来源，也至少应该在每个子页面提示回首页的链接，包括页面的 LOGO 作链接。良好的目录导航，可以提高网站的流量。
即使没有详细的路径来源，也至少应该在每个子页面提示回首页的链接，包括页面的 LOGO 作链接。良好的目录导航，可以提高网站的流量。
3.首页突出重要内容 ：
> 除了主栏目，还应该将次级目录中的重要内容以链接的方式在首页或其它子页中多次呈现，以突出重点。搜索引擎会对这种一站内多次出现的链接给予充分重视，对网页级别 （PageRank）提高有很大帮助，这也是每个网站首页的网页级别一般高于其它页面级别的重要因素，因为每个子页都对首页进行了链接。
例如：以前很多人使用博客做排名，原因就在于博客首页PR值大，而刚刚更新的博客会出现在首页，如果此时搜索引擎来索引，收录，对个人博客作用很大，通常能够获得不错的排名。
例如：以前很多人使用博客做排名，原因就在于博客首页PR值大，而刚刚更新的博客会出现在首页，如果此时搜索引擎来索引，收录，对个人博客作用很大，通常能够获得不错的排名。
4.使用网站地图：
> 网站地图（Site Map）是辅助导航的手段，多采用文本链接，以加快页面加载速度。 尤其对于那些采用图片导航和动态技术生成的网页，通过在网站地图中进行文本链接，可在一定程度上弥补蜘蛛程序无法识别图片和动态网页造成的页面不可见的风险。
需要注意，网站地图也要突出重点，尽量给出主干性内容及链接，而不是所有细枝末节。
一页内不适宜放太多链接。Google 明确提出“如果网站地图上的链接超过大约 100 个，则最 好将网站地图拆成多个网页”。 参考地址：
需要注意，网站地图也要突出重点，尽量给出主干性内容及链接，而不是所有细枝末节。
一页内不适宜放太多链接。Google 明确提出“如果网站地图上的链接超过大约 100 个，则最 好将网站地图拆成多个网页”。 参考地址：
总结：良好的导航结构能够使搜索引擎收录更多的网页。
5.Google SiteMap：
Google新推出的Sitemap，是对原来robots.txt的扩展，它使用XML格式来记录整个网站的信息并供Google读取，使搜索引擎能更快更全面的收录网站的内容。 Sitemap的作用就好像为网站提供了整站的RSS，而Google就是这些RSS的订阅者，只要网站有更新就会自动通知Google。这样一来，搜索引擎的收录由被动的拉变成了主动的推。
总结：利用google sitemap,可以提高收录的数量。
框架结构，即帧结构（Frame），包括IFrame,Frame。
例如：
例如：
总结：尽量避免使用Iframe，如果必须使用，采用对应的优化方式。
四、图像优化
1.图片优化
> 一般而言，搜索引擎只识读文本内容，对图片文件是视而不见的。同时，图像文件直接延缓页面加载时间，如果超过 20 秒网站还不能加载，用户极有可能离开你的网站。因此， 除非你的网站内容是图片为主，比如游戏站点或者图片至关重要，否则尽量避免使用大图片，更不要采用纯图像制作网页(SPLASH PAGE)。
网站图片优化的有三点：
1. 在保持图像质量的情况下尽量压缩图像的文件大小。
2. Alt 属性：
每个图像<IMG>标签中都有 ALT 属性，搜索引擎会读取该属性以了解图像的信息。因此，最好在所有插图的 ALT 属性中都有文字描述，并带上该页关键字在其中。
<img align="center" src="NP110.jpg" alt="浪潮英信NP110 G2服务器图片" >
3.在图片上方或下方加上包含关键词的描述文本；
4.使用链接链接到这个图片。
例如：
网站图片优化的有三点：
1. 在保持图像质量的情况下尽量压缩图像的文件大小。
2. Alt 属性：
每个图像<IMG>标签中都有 ALT 属性，搜索引擎会读取该属性以了解图像的信息。因此，最好在所有插图的 ALT 属性中都有文字描述，并带上该页关键字在其中。
<img align="center" src="NP110.jpg" alt="浪潮英信NP110 G2服务器图片" >
3.在图片上方或下方加上包含关键词的描述文本；
4.使用链接链接到这个图片。
例如：
总结：避免使用大图片，使用Alt属性、文本或链接优化图片。
2.FLASH 优化：
> Flash 会使页面很好看，不过FLASH 网页有一个非常致命的问题，即大部分搜索引擎无法识别 FLASH 中的信息。
例如：
例如：
1、做一个辅助 HTML 版本：
保留原有 FLASH 版本的同时，还可以设计一个 HTML 格式的版本，这样既可以保持动态美观效果，也可以让搜索引擎通过 HTML 版本的网页来发现网站。
保留原有 FLASH 版本的同时，还可以设计一个 HTML 格式的版本，这样既可以保持动态美观效果，也可以让搜索引擎通过 HTML 版本的网页来发现网站。
2、将 Flash 内嵌 HTML 文件：
还可以通过改变网页结构进行弥补，即不要将整个网页都设计成 Flash 动画，而是将 Flash 内容嵌入到 HTML 文件中，这样对于用户浏览并不会削弱视觉效果，搜索引擎也可以从 HTML 代码中发现一些必要的信息，尤其是进入内容页面的链接。
还可以通过改变网页结构进行弥补，即不要将整个网页都设计成 Flash 动画，而是将 Flash 内容嵌入到 HTML 文件中，这样对于用户浏览并不会削弱视觉效果，搜索引擎也可以从 HTML 代码中发现一些必要的信息，尤其是进入内容页面的链接。
总结：避免使用FLASH 做首页。
五、表格使用
表格是网页最重要的排版方式。
a.如果某个网页采用了大段的长篇文本，除了可以将一页文本 分成多面，还可以考虑将文本置入不同表格中，这样不仅管理方便，也使得该页加载时每个表格内容依次加载，这样访问者就可以一边看已下载内容一边等待剩余部分加载，而不是等 待很久之后才一齐加载出来。
例如：
例如：
b.表格之内套嵌太多表格也不利于页面加载，因浏览器是先加载完大表格之后再加载内嵌的小 表格，因此内嵌表格会最终降低整页加载速度。
c.尽量采用XHTML标准，使用DIV代替表格。
具体方法是采用CSS里面的 FLOAT 属性，position 属性等定位
使用FLOAT 属性的例子。
具体方法是采用CSS里面的 FLOAT 属性，position 属性等定位
使用FLOAT 属性的例子。
问题1：什么是XHTML？
回答：XHTML是The Extensible HyperText Markup Language(可扩展标识语言)的缩写。HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。
参考资料：
参考资料：
总结：合理使用表格，最多不超过三层；如果允许，最好使用DIV替换表格。
六、网页减肥
代码设置不妥不仅延长网页加载时间，也严重影响蜘蛛程序对网页内容的抓取。通过对网页代码进行清减去掉臃肿杂乱的代码，减小网页文件大小，能够加快网页加载速度，让蜘蛛快速索引到重要内容。最好不要超过 50K。 网页减肥重点涉及以下几个要点：
> a.CSS 样式
网页制作应通过 CSS（层叠样式表单）来统一定制字体风格。 例如：
<b style="color:red;font-size:16px;">测试</b>
<div id="divmain" style="font-size:12px;">DIV</b>
<div style="color:red;"> 红色 <b style="color:green;">绿色</b> </div>
----------------------
<style type="text/css">
b { color:red;font-size:16px; } /*通用对象*/
#divmain {font-size:12px;} /* ID 对象 */
.red {color:red;}/* 定制类别 */
.red b {color:green;}/* 定制类别下的 通用对象*/
</style>
<b>测试</b>
<div id="divmain">DIV</b>
<div class="red"> 红色 <b>绿色</b> </div>
网页制作应通过 CSS（层叠样式表单）来统一定制字体风格。 例如：
<b style="color:red;font-size:16px;">测试</b>
<div id="divmain" style="font-size:12px;">DIV</b>
<div style="color:red;"> 红色 <b style="color:green;">绿色</b> </div>
----------------------
<style type="text/css">
b { color:red;font-size:16px; } /*通用对象*/
#divmain {font-size:12px;} /* ID 对象 */
.red {color:red;}/* 定制类别 */
.red b {color:green;}/* 定制类别下的 通用对象*/
</style>
<b>测试</b>
<div id="divmain">DIV</b>
<div class="red"> 红色 <b>绿色</b> </div>
总结：多使用CSS 样式，能够减小文件大小。
b.JavaScript：
1.简化js中的函数名称和变量。
例如：
1.简化js中的函数名称和变量。
例如：
总结：将网页的公共的不需要优化的部分转换为脚本并存于js文件里，这样可以减少文件大小，加快下载速度，同时也方便管理。
c.慎用网页减肥工具
通常的网页减肥工具，对htm减肥具有一定的破坏性，常常为了减肥将标签的 后半个标签删除，造成网页的不完整。
通常的网页减肥工具，对htm减肥具有一定的破坏性，常常为了减肥将标签的 后半个标签删除，造成网页的不完整。
d.删除空格和回车。
如果要更加苛刻的减肥，那最后一步就是删除空格了，还可以使文件下降很多。
不过删除空格后的页面由于没有阶梯排列，将很难读懂。
> 空格减肥代码：看我的程序演示。
如果要更加苛刻的减肥，那最后一步就是删除空格了，还可以使文件下降很多。
不过删除空格后的页面由于没有阶梯排列，将很难读懂。
> 空格减肥代码：看我的程序演示。
总结：在网络条件良好的情况下，对空格和回车不做处理。
相关仿站教程：
- 相关链接：
- 教程说明：
对搜索引擎友好的网页设计制作
。
