文章来源牛站:www.niuzhan.com

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

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

整个网站测试:

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

单个网页测试:

移动设备适合性测试工具:http://news.mkq.online

谷歌移动设备易用性

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

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

总结

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

谷歌移动设备易用性

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

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

  1. 谷歌网站收录移动设备易用性有问题?

    谷歌网站收录移动设备易用性有问题? Google Search Console 中的工具与报告可以帮助您收录网站,帮助您衡量您网站的搜索流量和搜索排名情况.解决相关问题以及让您的网站在 Google ...

  2. 谷歌seo独立站搜索引擎优化指南【2023新版】

    作为一个拥有十年操作经验的个人站长,我认为SEO是网站优化的核心,它可以帮助我们的网站在搜索引擎上获得更高的排名和更多的流量.在本篇文章中,我将分享我的谷歌SEO独立站搜索引擎优化指南,希望对您有所帮 ...

  3. win10用什么软件测试硬件,Win10系统下硬件设备检测工具的使用方法

    在win10系统中,自带有硬件设备检测工具,当电脑遇到故障的时候就可以用这个工具来检测并处理,可是许多win10系统用户并不知道要怎么使用硬件设备检测工具,接下来小编就给大家分享一下Win10系统下硬 ...

  4. 谷歌 chrome 浏览器开发者工具打不开的解决方法

    谷歌 chrome 浏览器开发者工具打不开的解决方法 参考文章: (1)谷歌 chrome 浏览器开发者工具打不开的解决方法 (2)https://www.cnblogs.com/youding/p/ ...

  5. 谷歌开源机器学习可视化工具 Facets:从全新角度观察数据

    谷歌开源机器学习可视化工具 Facets:从全新角度观察数据 By 黄小天2017年7月18日 10:51 近日,出于支持 PAIR initiative的目的,谷歌发布了 Facets,一款开源的可 ...

  6. 运用工具优化数据库设计(Database Engine Tuning Advisor)

    Data Engine Tuning Advisor 是SqlServer自带的数据库性能调优工具之一,我们一起来学习一下怎么用这个工具优化数据库设计 Database Engine Tuning A ...

  7. win10系统自带的计算机无法使用吗,Win10如何使用系统自带的硬件设备检测工具?...

    Win10如何使用系统自带的硬件设备检测工具?在Win10操作系统中,自带有硬件设备检测工具,当我们遇到电脑故障时,可以使用这些检测工具来处理故障.下面小编就来教大家使用电脑自带的硬件设备检测工具! ...

  8. 谷歌开源Embedding可视化工具

    谷歌开源Embedding可视化工具 导读 目前,在深度学习中可以利用多种方法或工具将特征信息转换为低维稠密的向量表示(Embedding),且Embedding在自然语言处理.知识图谱.推荐搜索.机 ...

  9. 谷歌Chrome浏览器开发者工具教程—JS调试篇

    上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources. Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主 ...

最新文章

  1. 产权分割商铺,太坑人!
  2. Excel关于使用图形的妙招技法
  3. 牛客网(剑指offer) 第五题 用两个栈来实现一个队列
  4. React中的模糊匹配与精准匹配
  5. leetcode - 21. 合并两个有序链表
  6. nginx php 源码安装,Nginx和php安装及配置一之编译安装nginx-1.8.0
  7. Android、iOS、和Web如何做灰度发布?
  8. 51c语言编程入门教程,51单片机C语言入门教程
  9. word另存为pdf后,pdf文件中有空白页
  10. keepalived的双机热备(主从模式)-主机宕机备机无法替代踩坑
  11. mysql中%3c%3e和=_如何巧妙去除隐藏“站长统计”文字链接?
  12. dwg格式转换成jpg图片
  13. android改微信号码,安卓版微信更新,已支持修改微信号
  14. Live800:在线客服系统如何为客服减负?
  15. 航海新说|掌舵绝招 -- 弹性 · 敏捷 · 开放
  16. 【整理】SIMD、MMX、SSE、AVX、3D Now!、neon——指令集大全
  17. 一个Tab切换类,求指导
  18. 百度地图(常用方法)
  19. Remove Duplicate
  20. Bug的严重程度(缺陷程度)有哪几种。。。。

热门文章

  1. 为什么能在子线程通过setText进行更新UI
  2. 硬盘基础知识(HDD、SSD、IDE、PATA、SATA、SCSI、SAS)
  3. Junit学习之一——安装及简单使用
  4. 教你绘制卡通圣诞雪景
  5. 眼镜计算机检查,电脑验光机
  6. [宋史学习] 潘美功过
  7. 自主导航小车实践(四)
  8. [C/C++] 算法提高 5-3日历
  9. bzoj 2054: 疯狂的馒头(线段树||并查集)
  10. 【深度学习】人脸识别、视频中找人的实现