《网站移动端网页优化策略分析,网页设计论文.docx》由会员分享，可在线阅读，更多相关《网站移动端网页优化策略分析,网页设计论文.docx（8页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网站移动端网页优化策略分析,网页设计论文据媒体预测，到2021年，全球移动设备的互联网搜索量将超过桌面设备。移动搜索是指以移动设备为终端，用户通过移动通信设备输入搜索项，对互联网的检索结果通过无线网络返回给用户。移动互联网搜索引擎优化Mobile SearchEngine Optimization,缩写为MSEO,简称移动搜索优化，它是在传统PC互联网搜索引擎优化即SEO基础上发展起来的一种关于移动搜索引擎的排名优化。 2 移动搜索的特点The characteristics of mobilesearch 2.1 移动搜索的特点 首先，移动搜索具有可用性特点。移动设备可用性包括：界面可视性、
2、导航、内容等。网页界面可用性表现为同一窗口中内容要精简，按内容的重要性排列显示；网页版面布局要方便用户更容易地接收信息等。 其次，移动搜索具有可访问性特点。移动搜索用户与桌面搜索用户相比，对搜索结果的关注度更高层次1.移动用户更多的是搜索能解决身边的问题，诸如餐饮、旅游、公交等，主要关注生活服务类、健康保健类、教育培训类这三类信息，因而移动SEO的需求主要是针对这些网站的搜索引擎优化2. 2.2 根据移动搜索特点的网页移动化策略 网页移动化策略有两个：1响应式网页设计。2搜索引擎开放适配服务，抓取移动资源。 响应式网页设计Responsive web design是一种网页设计的方式方法，该设
3、计可使网站从桌面电脑显示器到移动设备上合适阅读和导航。响应式网页设计就是能够用一套样式，使网站的页面能够在不同分辨率的屏幕下都有很好的表现形式。 百度的移动资源有两种抓取方式，一是通过传统的蜘蛛spider抓取，另一种是通过百度提供的 开放适配 服务。 当前百度开放适配服务共提供三种方案：自主适配、标注Meta声明、提交对应关系Sitemap.根据百度官方的定义用 开放适配 的抓取速度会优于传统的网页抓取。 3 移动端网站优化的规则和策略The mobileterminal website optimization rules and strategies 3.1 百度移动搜索结果的排名标准
4、百度鼓励mobile资源，根据百度移动搜索结果的排名标准：1检索友好性，其友好性判定标准是网站有没有能够匹配移动设备的5构造。2有完好的功能/服务知足用户需求，保证内容/服务的稳定可用，保证访问速度及到达率。3移动化交互体验，符合移动终端特性。4使用规范的5/x协议语言。 3.2 移动端搜索结果的排名策略 移动端网站优化打破传统网站的优化方式，移动端搜索结果的排名策略主要由基础相关性、资源质量、检索友好性三个部分组成，如此图1所示。【1】 手机页面进行适配，移动网站的DOCTYPE声明有助于搜索引擎辨别该页面能否合适手机阅读，mobile页面协议编写假如不规范，会造成百度无法正常辨别。 !DO
5、CTYPE 声明应该位于文档中的最前面的位置，处于 标签之前，其声明格式，详见表1.【2】 4 基于移动搜索的网页优化Webpage optimizationbased on mobile search 面对移动搜索市场，移动用户需求与标准的桌面搜索需求是不同的，移动用户更倾向于即时需求，移动搜索与桌面搜索相比，具有：1在移动设备上的小屏幕，可能只能出现5个搜索结果。2移动搜索查询往往极短，查询的本文关键词语也比传统桌面搜索更少。3移动搜索查询结果遭到字数限制。例如，PC端和移动端搜索结果，PC端30多个中文汉字才截断，移动端不到20个字就截断3. 4.1 移动端网站样式表的优化 制作的一个移
6、动样式表单，称之为 handheld.css ,这个CSS能够把传统网页格式化为移动设备能够阅读的网页。 link rel= stylesheet href= css/handheld.css type= text/css media= handheld / 假如客户端是手机等移动设备时，就会载入这个css样式表。 4.2 移动端网页标签的优化 1meta标签优化，使用标注meta声明开放适配协议。站长在站点PC页的源代码头部嵌入一行或多行Meta信息，由Meta信息来指明该PC页对应的手机页的URL. Meta声明的格式： meta http-equiv= mobile-agent cont
7、ent= format=wml|x|5; url=url 2描绘叙述标签description的优化，使用description目的是用来讲明页面的主体内容。描绘叙述标签也会被显示在搜索结果当中被用户所见。 3jquery标签的优化，提升移动用户的使用体验。例如，滑动切换图片相比于自动切换和点击切换，滑动切换加强了用户操作的主动性、隐藏标签和显示标签实现动画效果，同时提升了切换的便捷性。 4.3 移动端页面构造的优化 使用三层的页面构造。由于移动端是直接用手指操作，需要响应元素点击区域要相对明显，布局上能够多上下排列。移动网站的页面加载速度要比普通网页加载速度慢，所以减少页面数量非常重要。用户
8、是不会有耐心不断打开网页上的，所以尽可能简化网站的布局也是很重要。一个标准的移动站应该包含首页、列表页和详情页三种类型，页面类型及层级不超过三个，保证简单、高效的用户体验4.使用尽量浅的页间构造，减少用户点击次数，提升阅读体验，如此图2所示。【3】 4.4 移动端网页导航的优化 网页导航可用性表现为用户能快速地找到所需的信息，是用户体验的重要实现方式。移动网站能够采用的导航种类较PC端要少，根据范围的不同，能够分为三大类：构造性导航、关联性导航和公用程序导航，三者的关系详见表2.【4】 一般首页导航能够分为导航式和内容式两种，导航式因其风格简洁可起到快速传达品牌形象的作用；内容式因其丰富的内容
9、，可快速传递信息，如此图3所示。【5】 通过导航，用户能够知道所在页面在整个网站中的位置，在移动端导航中尽量使用文字链接，不要使用复杂的js或者flash.使用图片做导航时，能够使用Alt告诉搜索引擎所指向的网页内容。 4.5 移动端网页屏幕分辨率的自适应 移动端网站的页面需做到下面三点：一是页面随屏幕宽度变化，无横向滚动条；二是屏幕不放大时，能清楚明晰阅读内容，文字大小不低于12像素；三是屏幕不放大时，按钮、链接等点击方便，按钮尺寸不能过大或过小。 1根据移动端屏幕的特点实现移动端屏幕适配，需要用到如下代码： meta name= viewport content= width=device
10、-width 例 如 : m e t a n a m e = v i e w p o r t content= width=480,target-densitydpi=dpi,minimal-ui ,移动页面设计 480*854的比例。 2横竖屏的适配，需要用到Js的代码控制如下所示： window.addEventListener orientationchange ,function This.isOrietation = true;This.changeOriention；/执行横竖屏的事件都通过一个侦听完成，做一个统一的管理；在屏幕横竖屏切换完成之后再执行相应的事件C的代码控制如下所示
11、： media screen andorientation:landspace /定义横屏的显示样式media screen andorientation:portrait /定义竖屏的显示样式media only screen andorientation:portraitanddevice-width:768px /定义某个尺寸的特殊样式竖屏时宽度为768px 符合一般ipad的条件5 结论Conclusion=移动网络搜索引擎在全球范围内正日益普及，移动端网站设计优化，怎样提升用户在移动端的搜索体验，怎样将使得移动端的网页愈加合适移动平台的发展特性，是当下移动网站设计者需要考虑的首要问题。 以下为参考文献References 1 俞国红。移动搜索引擎优化技术的研究J.苏州市职业大学学报，202004：36-38. 2 杨海波，赵文龙，黄成。移动搜索与桌面搜索比拟研究J.医学信息学杂志，202004：35-38. 3 刘妮娜。移动环境下搜索引擎的个性化方式方法J.江南大学学报自然科学版，200602：54-57. 4 李雅。手机网页版式设计研究J.科技与出版，201812：90-92.