您的当前位置:首页->链接知识-> 文章预览
链接知识

使用“谷歌移动设备易用性”工具优化移动网站

标签:使用,移动,设备,易用,易用性,工具,优化,网站  2018/11/4 11:16:10  预览111469

图片来源图虫:已授站长之家使用

随着移动网站的流量日益增大,拥有适合移动设备的网站是提拔网站影响力的紧张因素,谷歌等搜索引擎也大力增强移动端的搜索体验,不过,许多桌面版网站在移动设备上可能不太容易欣赏及使用。因此,拥有适合移动设备的网站是提拔在线影响力的紧张因素。为了方便网站站长对于原有桌面网站在移动设备上的优化,谷歌推出了“移动设备易用性”工具来帮助站长优化网站。

工具使用方法

细致,这个好用的工具用的是Google域名,必要翻墙才能访问,假如你不会翻墙,那么请忽略并跳过此文。

整个网站测试:

访问Google Webmaster,在该工具里添加网站,即可对整个网站的所有页面进行移动设备易用性测试。

单个网页测试:

移动设备适合性测试工具:https://search.google.com/test/mobile-friendly

打开这个网址后,将必要测试的网页的完备网址输入,点击运行测试,系统就会抓取网页并进行测试追踪,通常测试过程不会超过一分钟。

测试效果包括以下两个部分:响应网页在移动设备上所呈现的样貌的屏幕截图,以及该工具发现的所有移动设备可用性题目的列表。与在移动设备上的易用性有关的题目是指会对使用移动(小屏幕)设备访问响应网页的用户造成影响的题目,包括字体过小(在小屏幕上很难看清楚)和使用 Flash(大多数移动设备都不支撑 Flash)等等。

偶然候,测试效果展示的屏幕截图并不正常,可能是测试无法加载响应网页所用的所有资源,会表现“网页包含无法加载的资源”的警告新闻北京人事考试信息网,这些资源是指网页包含的外部元素,如图片、CSS 或脚本文件。导致出现该题目的最重要缘故原由可能是网站站长设置robots.txt禁止搜索引擎访问响应资源,只需修改robots.txt,取消禁止搜索引擎访问此资源即可。

工具优化指南

移动设备适合性测试工具能检测出下列可用性错误,我们可以针对对应错误进行逐一修改,详细的优化修改方法如下:

1、使用了不兼容的插件

页面使用了Flash等插件,将Flash删除,或者使用HTML5 来替换即可。

2、未设置视口

网页未定义viewport属性,只必要在网页头部增长如下一行即可。

<meta name="viewport" content="width=device-width, initial-scale=1" />

3、笔墨太小,无法阅读

网页字体过小而,移动设备用户必要“张合双指进行缩放”,然后才能阅读这些网页上的内容。这现实上和上一个是统一个题目,网页只要定义了viewport属性,这个题目即可解决。

4、内容宽度超过了屏幕表现范围

网页必要横向滚动屏幕才能查看其中的笔墨和图片,这说明页面中某些元素的CSS样式使用了宽度的绝对值,例如图片、表格使用的980px宽度等,这种题目的修改方法是,在css中使用相应式设计方法,当欣赏器宽度介于 0 像素和 640 像素之间时,使用适合移动设备的css成都人事考试网首页,将宽度设置为相对值,或者将部分元素隐蔽。示例代码如下:

@media screen and (max-width:640px) {

  #divMain {

    width:100%;

  }

  #divSidebar {

    display:none;

  }

}

5、可点击元素之间的距离太近

网页上的元素(如按钮和导航链接)间距过小,导致移动设备用户在用手辅导按所需元素时通常会按到相邻的元素。这个题目也可以使用相应式设计方法,在移动设备上增长行高即可,示例代码如下:

@media screen and (max-width:640px) {

  p {

    line-height:150%;

  }

}

总结

解决了这些题目之后网站开发,点击“验证修复”,即可让搜索引擎重新验证网站页面,对影响网站的移动设备易用性题目加以修复。

假如长期不修复这些题目,网站的移动版网页就无法提供令人写意的欣赏体验,那么网站页面就会在移动搜索效果中的排名降落,导致流量的损失,因此,网站的站长赶紧举措起来,马上使用“谷歌移动设备易用性”工具来优化移动网站吧。