如何优化移动网站?使用谷歌移动设备易用性工具

转载   月光博客  2018-11-19 07:18:44  94 人阅读  13 条评论

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

工具使用方法

注意,这个好用的工具用的是 Google 域名,需要帆樯才能访问,如果你不会帆樯,那么请忽略并跳过此文。

1、整个网站测试:

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

2、单个网页测试:

移动设备适合性测试工具(测试工具地址>>),打开这个网址后,将需要测试的网页的完整网址输入,点击【运行测试】,系统就会抓取网页并进行测试追踪,通常测试过程不会超过一分钟。

如何优化移动网站?使用谷歌移动设备易用性工具 建站经验 第1张

测试结果包括以下两个部分:相应网页在移动设备上所呈现的样貌的屏幕截图,以及该工具发现的所有移动设备可用性问题的列表。与在移动设备上的易用性有关的问题是指会对使用移动(小屏幕)设备访问相应网页的用户造成影响的问题,包括字体过小(在小屏幕上很难看清楚)和使用 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%;
}
}

总结

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

如何优化移动网站?使用谷歌移动设备易用性工具 建站经验 第2张

如果长期不修复这些问题,网站的移动版网页就无法提供令人满意的浏览体验,那么网站页面就会在移动搜索结果中的排名下降,导致流量的损失,因此,网站的站长赶快行动起来,立刻使用“谷歌移动设备易用性”工具来优化移动网站吧。

历史上的今天:

文章标签: ,   ,   ,  
原文地址:https://www.williamlong.info/archives/5509.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为转载文章,来源于 月光博客 ,版权归原作者所有,欢迎分享本文,转载请保留出处!
转载砖家

相关文章 分类热门分类热评最新问答

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 弥雅尔尔
    弥雅尔尔 @回复

    网站自适应才是出路啊!

  2. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    我用博主出品的主题自适应的

  3. 城南博客
    城南博客 @回复

    我觉得我没救了

  4. Zenlee
    Zenlee @回复

    我的主题根本就没考虑移动端

  5. 法士特资讯网
    法士特资讯网 @回复

    优化必学!谷歌还是比较专业!

  6. 里维斯社
    里维斯社 @回复

    我测试的结果是“网页适合在移动设备上浏览”,本身我的网站是自适应的。另外还反馈了一些问题“网页只加载了部分内容”,具体内容是“有 32 项网页资源未能成功加载”,并列出了这32条未能加载的详细信息,不错,顺着提示要去整改一下。

  7. 闲鱼
    闲鱼 @回复

    蛮好的工具,先马克一下 [嘻嘻]

  8. 夏天烤洋芋
    夏天烤洋芋 @回复

    [嘻嘻] 管他的。无所谓了。

  9. 小兽wordpress
    小兽wordpress @回复

    谷歌的东西还是实用

  10. 手机赚钱收入
    手机赚钱收入 @回复

    谷歌什么时候回来

  11. Action
    Action @回复

    Google的工具真的很智能,建议也很有用。点赞!

  12. 明月登楼
    明月登楼 @回复

    这个我感觉比较适合网页制作调试!至于说移动端速度其实代码层面影响几乎可以忽略不计的!

  13. 神奇钥匙
    神奇钥匙 @回复

    可点击元素之间的距离太近!
    这个怎么修复啊
    那段代码放到哪里
    ZBLOG求助