`
zhouxing
  • 浏览: 207303 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

阅读更多

一、目录结构和 URL 

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

1.目录访问层次: :
即通过几层能够访问到最终页面,Google 最好为三层。 

问题1:如果我的网站目录层次大于三层,该怎么办?

回答:由于三层的目录,容纳的页面有限,需要多级目录。
这个时候使用前面我们讲过的二级域名的方式扩大级数。因为二级域名算独立网站,目录层次从当前二级域名算起。
例如:搜狐汽车频道 auto.sohu.com


问题2:为什么有的网页在本网站层数很多,也被Google收录呢?

回答:这些页面被其他网站引用,而Google从其他页面进入这个页面也少于三层。
可以使用 link 命令查询该页的反相链接。例如:link:prod.it.com.cn/pricelist/2/1/14/534.htm

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,

因此,目录和文件名称如果有关键词组,要用连字符“-”而不是下划线“_”进行分隔。

问题1:所有的搜索引擎是否都和Google一样?

回答:不是
在百度图片中,拼音路径比较有效的。
例如:site:www.***.cn,收录大部分都排在第一。


b.URL 应该越短越好。
有人为了单纯增加关键字而额外建多一个带有关键字的子目录,改变目 录结构。由于 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 使用的是相对路径还是绝对路径。

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

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

即使没有详细的路径来源,也至少应该在每个子页面提示回首页的链接,包括页面的 LOGO 作链接。良好的目录导航,可以提高网站的流量。

3.首页突出重要内容 :
 除了主栏目,还应该将次级目录中的重要内容以链接的方式在首页或其它子页中多次呈现, 以突出重点。搜索引擎会对这种一站内多次出现的链接给予充分重视,对网页级别 (PageRank)提高有很大帮助,这也是每个网站首页的网页级别一般高于其它页面级别的重 要因素,因为每个子页都对首页进行了链接。
例如:以前很多人使用博客做排名,原因就在于博客首页PR值大,而刚刚更新的博客会出现在首页,如果此时 搜索引擎来索引,收录,对个人博客作用很大,通常能够获得不错的排名。

4.使用网站地图:
 网站地图(Site Map)是辅助导航的手段,多采用文本链接,以加快页面加载速度。 尤其对于那些采用图片导航和动态技术生成的网页,通过在网站地图中进行文本链接, 可在一定程度上弥补蜘蛛程序无法识别图片和动态网页造成的页面不可见的风险。

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

若页面太多,可以考虑使用前面讲到的二级域名扩展。
使用工具 Xenu 生成网站地图.

总结:良好的导航结构能够使搜索引擎收录更多的网页。

5.Google SiteMap:
Google新推出的Sitemap,是对原来robots.txt的扩展,它使用XML格式来记录整个网站的信息并供Google读取,使搜索引擎能更快更全面的收录网站的内容。 Sitemap的作用就好像为网站提供了整站的RSS,而Google就是这些RSS的订阅者,只要网站有更新就会自动通知Google。这样一来,搜索引擎的收录由被动的拉变成了主动的推。
Google SiteMap
使用 Sitemap 协议

总结:利用google sitemap,可以提高收录的数量。

三、框架结构 

框架结构,即帧结构(Frame),包括IFrame,Frame。
例如:
<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 页的链接以及带有关键词的描述文本,同时在 框架以外的区域也出现关键词文本。这样,搜索引擎才能够正确索引到框架内的信息。

总结:尽量避免使用Iframe,如果必须使用,采用对应的优化方式。

四、图像优化 

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

网站图片优化的有三点:
1. 在保持图像质量的情况下尽量压缩图像的文件大小。
2. Alt 属性:
每个图像<IMG>标签中都有 ALT 属性,搜索引擎会读取该属性以了解图像的信息。因此,最 好在所有插图的 ALT 属性中都有文字描述,并带上该页关键字在其中。
<img align="center" src="NP110.jpg" alt="浪潮英信NP110 G2服务器图片" >
3.在图片上方或下方加上包含关键词的描述文本;
4.使用链接链接到这个图片。

Google的图像搜索(Googlebot-Image)和Google的文本搜索(Googlebot)不是同蜘蛛。

总结:避免使用大图片,使用Alt属性、文本或链接优化图片。

2.FLASH 优化:
 Flash 会使页面很好看,不过FLASH 网页有一个非常致命的问题,即大部分搜索引擎无法识别 FLASH 中的信息。
例如:一汽轿车
FLASH 优化可以从以下三个方面来考虑:
1、做一个辅助 HTML 版本:
保留原有 FLASH 版本的同时,还可以设计一个 HTML 格式的版本,这样既可以保持动态美观 效果,也可以让搜索引擎通过 HTML 版本的网页来发现网站。
2、将 Flash 内嵌 HTML 文件:
还可以通过改变网页结构进行弥补,即不要将整个网页都设计成 Flash 动画,而是将 Flash 内容嵌入到 HTML 文件中,这样对于用户浏览并不会削弱视觉效果,搜索引擎也可以从 HTML 代码中发现一些必要的信息,尤其是进入内容页面的链接。

总结:避免使用FLASH 做首页。

五、表格使用  

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

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

c.尽量采用XHTML标准,使用DIV代替表格。
具体方法是采用CSS里面的 FLOAT 属性,position 属性等定位

问题1:什么是XHTML?

回答:XHTML是The Extensible HyperText Markup Language(可扩展标识语言)的缩写。HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。
参考资料:什么是XHTML


总结:合理使用表格,最多不超过三层;如果允许,最好使用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 文件单独存放在命名为 css 的外 部文件中。
语法: <link rel="stylesheet" type="text/css" href="/common/client.css">

作用的优先级:自身的style属性 > 页面的内部style对象 > 页面外部css文件。
总结:多使用CSS 样式,能够减小文件大小。

b.JavaScript:
1.简化js中的函数名称和变量。
例如:Google,里面的函数名称只有1个或者2个字符。
2.将网页的公共部分转换为脚本并存于js文件里。这样可以减少文件大小,加快下载速度,同时也方便管理。
不过不能将导航等等优化的关键代码转换成js,否则搜索引擎搜索不到。
例如:华军软件园 ,将标题、导航等等都放着js文件里,将导航放在js里面就不太好了。

总结:将网页的公共的不需要优化的部分转换为脚本并存于js文件里,这样可以减少文件大小,加快下载速度,同时也方便管理。

c.慎用网页减肥工具
通常的网页减肥工具,对htm减肥具有一定的破坏性,常常为了减肥将标签的 后半个标签删除,造成网页的不完整。

d.删除空格和回车。
如果要更加苛刻的减肥,那最后一步就是删除空格了,还可以使文件下降很多。
不过删除空格后的页面由于没有阶梯排列,将很难读懂。 
空格减肥代码:看我的程序演示。
总结:在网络条件良好的情况下,对空格和回车不做处理。


(一)域名和主机对 SEO 的影响
(二)搜索引擎优化的核心:关键字策略
(三)对搜索引擎友好的网页设计制作
(四)SEO 指导下的技术支持
(五)搜索引擎优化的重点:链接策略
(六)搜索引擎优化
(七)Google 、百度
分享到:
评论

相关推荐

    中小网站搜索引擎友好设计

    综上所述,中小网站的搜索引擎友好设计涉及多方面,包括精准定位、网页静态化、代码规范、关键词策略、内容原创和内部优化。遵循这些原则,可以帮助网站在搜索引擎中获得更好的排名,从而增加曝光度,吸引更多的潜在...

    DIV+CSS网页制作对搜索引擎优化的优势分析整理.pdf

    DIV+CSS网页制作对搜索引擎优化的优势分析整理 DIV+CSS网页制作技术的优势在于其符合W3C国际标准,能够将表现与内容分离,提高搜索引擎对网页的索引效率,提高页面浏览速度,易于维护和改版。同时,DIV+CSS网页...

    《网页设计与制作项目教程(HTML+CSS+JavaScript)》源代码.zip

    通过分析这些源代码,你可以学习到如何使用正确的标签来构建语义化的页面结构,这对于搜索引擎优化(SEO)和无障碍访问至关重要。 CSS (Cascading Style Sheets) 是用于控制网页外观和布局的语言。CSS允许设计师将...

    商务网页设计与制作(第二版)ppt及参考答案.zip

    9. **SEO优化**:为了提高网站在搜索引擎中的可见性,商务网页设计应考虑关键词优化、元标签、内部链接等SEO技巧。 10. **无障碍设计**:遵循WCAG(Web Content Accessibility Guidelines)标准,确保残障人士也能...

    网页设计技巧及网页制作常见问题

    30. SEO优化:考虑到搜索引擎的友好性,便于搜索排名。 总结起来,网页设计是一门综合艺术,涉及到美学、用户体验和功能实现等多个方面。通过掌握上述技巧和解决常见问题,你可以创作出既美观又实用的网页,为用户...

    html网页设计 网页制作

    8. **SEO友好**:理解搜索引擎优化(SEO)的基本原则,如使用`&lt;meta&gt;`标签设置关键词和描述,合理使用H标签,以及创建友好的URL结构,以提高网页在搜索引擎中的排名。 9. **网页验证**:使用W3C的验证工具检查HTML...

    网页设计与制作电子

    最后,SEO(搜索引擎优化)是网页设计的重要组成部分,它关乎网站在搜索引擎结果中的排名。PPT教程可能会教导如何优化元标签、使用关键词、构建内部链接结构,以提高网站的可见性和访问量。 总的来说,这个"网页...

    《网页设计与制作》页面设计.ppt

    网页设计与制作页面设计 本节课主要介绍了网页设计与制作的基础知识,包括网页的风格、布局、属性设置、标题设置、META设置、关键字设置、描述设置、刷新设置、基础设置、链接设置等内容。同时还涉及到了网页设计的...

    网页设计 网页制作的 作业

    网页设计师还需要了解SEO(搜索引擎优化),这是为了让网站在搜索引擎结果中排名更高,从而吸引更多的访问者。这包括关键词策略、元标签优化以及网站速度优化等。 文件名"网页作业"可能包含了各种练习和项目,比如...

    电子商务网页设计与制作(微课版)_配套教案.rar

    《电子商务网页设计与制作》是一门融合了技术与艺术的学科,旨在培养学生的网页设计技能,使其能够适应电子商务环境下的网站开发需求。本教程的"微课版"以压缩包形式提供,包含了一套完整的教案资源,适用于教学或...

    网页设计与制作ppt

    然而,由于其对SEO(搜索引擎优化)的不利影响,现在框架的使用已逐渐减少。 最后,第八章“表单”是网页交互性的重要体现,涵盖表单元素的创建(如输入框、按钮、复选框等)、表单验证以及数据提交。表单设计的...

    英雄联盟LOL静态HTML网页制作模板 DIV+CSS学生网页作品代码 游戏题材大学生网页设计作业下载

    这些元素有助于提高网页的语义化,使搜索引擎更好地理解网页内容,同时也方便屏幕阅读器等辅助技术的使用。 接着,CSS(Cascading Style Sheets)赋予了HTML元素样式和布局。在这个模板中,设计师运用CSS来控制网页...

    网页设计与制作实例教程源码.rar

    通过源码分析,我们可以了解到如何正确地构建页面结构,使内容更加清晰且易于机器理解和搜索引擎抓取。 CSS3是层叠样式表的最新版本,带来了更多样式控制选项和视觉效果。它引入了选择器的扩展,如伪类和伪元素,让...

    网页设计与制作基础课件

    这份“网页设计与制作基础课件”集成了“网页设计与制作1”和“网页设计与制作2”的内容,旨在为初学者提供全面的指导。 首先,我们可以从章节标题(ch1.ppt至ch4.ppt)推测出课程的基本结构。通常,这些PPT文件会...

    网页设计与制作实例展示

    另外,网页制作实例也可能涉及SEO(搜索引擎优化)的知识,包括关键词策略、元标签的设置、页面结构的优化等,这些对于提升网站在搜索引擎中的排名至关重要。 最后,版本控制工具如Git在网页开发中扮演着重要角色,...

    00900网页设计与制作201804

    这些知识点只是网页设计与制作领域的冰山一角,还包括HTML和CSS的语法、响应式设计、用户体验(UX)、搜索引擎优化(SEO)等内容。考生需要全面理解和掌握这些基础知识,才能有效地进行网页设计与制作。

    网页设计 作业 大学生 高中生 网页设计作业

    5. **SEO优化**:理解搜索引擎优化的基本原则,如关键词优化、元标签设置和网站速度优化,以提高网页在搜索结果中的排名。 在实际操作中,学生们可能会遇到“返回地方”的问题,这可能涉及到网页的导航设计。合理的...

    个人网页设计与制作

    在网页制作过程中,还需要考虑SEO(搜索引擎优化),以便让网页在搜索结果中更容易被找到。这包括编写有意义的元标签,创建高质量的原创内容,以及优化页面加载速度等。 个人网页设计时,内容管理系统的使用也很...

    网页设计与制作案例教程

    网页设计与制作是一门涉及广泛技术的学科,它涵盖了从规划到实现一个网站的全过程。在"网页设计与制作案例教程"中,我们通常会学习到以下关键知识点: 1. **HTML(超文本标记语言)**:HTML是网页的基础,用于定义...

    中国传统美食网页HTML代码 学生网页课程设计期末作业下载 美食大学生网页设计制作成品下载 DW餐饮美食网页作业代码下载

    1. **SEO优化**:搜索引擎优化是提高网站在搜索引擎结果页面中排名的重要手段。合理设置关键词、元标签等可以有效提升网站的可见度。 2. **性能优化**:通过压缩图片、合并文件、缓存策略等方式减少加载时间,提高...

Global site tag (gtag.js) - Google Analytics