2020年浅谈基于移动搜索的网页设计优化研究论文

浅谈基于移动搜索的网页设计优化研究论文 据媒体预测，到xx年，全球移动设备的互联网搜索量将超过桌面设备。移动搜索是指以移动设备为终端，用户通过移动通信设备输入搜索项，对互联网的检索结果通过无线网络返回给用户。移动互联网搜索引擎优化(Mobile Search Engine Optimization，缩写为MSEO，简称移动搜索优化)，它是在传统PC互联网搜索引擎优化(即SEO)基础上发展起来的一种关于移动搜索引擎的排名优化。 2.1 移动搜索的特点 首先，移动搜索具有可用性特点。移动设备可用性包括：界面可视性、导航、内容等。网页界面可用性表现为同一窗口中内容要精简，按内容的重要性排列显示;网页版面布局要方便用户更容易地接收信息等。其次，移动搜索具有可访问性特点。移动搜索用户与桌面搜索用户相比，对搜索结果的关注度更高。移动用户更多的是搜索能解决身边的问题，诸如餐饮、旅游、公交等，主要关注生活服务类、健康保健类、教育培训类这三类信息，因此移动SEO的需求主要是针对这些网站的搜索引擎优化。 2.2 根据移动搜索特点的网页移动化策略 网页移动化策略有两个：(1)响应式网页设计。(2)搜索引擎开放适配服务，抓取移动资源。响应式网页设计(Responsive web design)是一种网页设计的方法，该设计可使网站从桌面电脑显示器到移动设备上适合阅读和导航。响应式网页设计就是能够用一套样式，使网站的页面能够在不同分辨率的屏幕下都有很好的表现形式。百度的移动资源有两种抓取方式，一是通过传统的蜘蛛(spider)抓取，另一种是通过百度提供的“开放适配”服务。目前百度开放适配服务共提供三种：自主适配、标注Meta声明、提交对应关系Sitemap。按照百度官方的定义用“开放适配”的抓取速度会优于传统的网页抓取。 3.1 百度移动搜索结果的排名标准 百度鼓励mobile资源，根据百度移动搜索结果的排名标准：(1)检索友好性，其友好性判断标准是网站有没有可以匹配移动设备的HTML5结构。(2)有完整的功能/服务满足用户需求，保证内容/服务的稳定可用，保证访问速度及到达率。(3)移动化交互体验，符合移动终端特性。(4)使用规范的html5/xhtml协议语言。 3.2 移动端搜索结果的排名策略 移动端网站优化打破传统网站的优化方式，移动端搜索结果的排名策略主要由基础相关性、资源质量、检索友好性三个部分组成。 机页面进行适配，移动网站的DOCTYPE声明有助于搜索引擎识别该页面是否适合手机浏览，mobile页面协议编写如果不规范，会造成百度无法正常识别。 声明应该位于文档中的最前面的位置，处于 标签之前，其声明格式。 面对移动搜索市场，移动用户需求与标准的桌面搜索需求是不同的，移动用户更倾向于即时需求，移动搜索与桌面搜索相比，具有：(1)在移动设备上的小屏幕，可能只能出现5个搜索结果。(2)移动搜索查询往往极短，查询的关键词也比传统桌面搜索更少。(3)移动搜索查询结果受到字数限制。例如，PC端和移动端搜索结果,PC端30多个中文汉字才截断，移动端不到20个字就截断。 4.1 移动端网站样式表的优化 制作的一个移动样式表单，称之为“handheld.css”，这个CSS可以把传统网页格式化为移动设备可以浏览的网页。 如果客户端是手机等移动设备时，就会载入这个css样式表。 4.2 移动端网页标签的优化 (1)meta标签优化，使用标注meta声明开放适配协议。站长在站点PC页的源代码头部嵌入一行或多行Meta信息，由Meta信息来指明该PC页对应的手机页的URL。Meta声明的格式： (2)描述标签(description)的优化，使用description目的是用来说明页面的主体内容。描述标签也会被显示在搜索结果当中被用户所见。 (3)jquery标签的优化，提升移动用户的使用体验。例如，滑动切换图片相比于自动切换和点击切换，滑动切换增强了用户操作的主动性、隐藏标签和显示标签实现动画效果，同时提升了切换的便捷性。 4.3 移动端页面结构的优化 使用三层的页面结构。由于移动端是直接用手指操作，需要响应元素点击区域要相对明显，布局上可以多上下排列。移动网站的页面加载速度要比普通网页加载速度慢，所以减少页面数量非常重要。用户是不会有耐心不断打开网页上的，所以尽可能简化网站的布局也是很重要。一个标准的移动站应该包含首页、列表页和详情页三种类型，页面类型及层级不超过三个，保证简单、高效的用户体验。使用尽量浅的页间结构，减少用户点击次数，提升浏览体验。 4.4 移动端网页导航的优化 网页导航可用性表现为用户能快速地找到所需的信息，是用户体验的重要实现方式。移动网站可以采用的导航种类较PC端要少，按照范围的不同，可以分为三大类：结构性导航、关联性导航和公用程序导航。一般首页导航可以分为导航式和内容式两种，导航式因其风格简洁可起到快速传达品牌形象的作用;内容式因其丰富的内容，可快速传递信息。通过导航，用户可以知道所在页面在整个网站中的位置，在移动端导航中尽量使用文字链接，不要使用复杂的js或者flash。使用图片做导航时，可以使用Alt告诉搜索引擎所指向的网页内容。 4.5 移动端网页屏幕分辨率的自适应 移动端网站的页面需做到以下三点：一是页面随屏幕宽度变化，无横向滚动条;二是屏幕不放大时，能清晰浏览内容，文字大小不低于12像素;三是屏幕不放大时，按钮、链接等点击方便，按钮尺寸不能过大或过小。 (1)根据移动端屏幕的特点实现移动端屏幕适配，需要用到如下代码： 例 如 ： ，移动页面设计 480*854的比例。 (2)横竖屏的适配，需要用到Js的代码控制如下所示： window.addEventListener(orientationchange,function () This.isOrietation = true; This.changeOriention(); ); /执行横竖屏的事件都通过一个侦听完成，做一个统一的管理;在屏幕横竖屏切换完成之后再执行相应的事件C的代码控制如下所示： media screen and(orientation:landspace). /定义横屏的显示样式 media screen and(orientation:portrait). /定义竖屏的显示样式 media only screen and(orientation:portrait) and(device-width:768px)