使用谷歌移动设备易用性工具优化移动网站
随着移动网站流量的增加,拥有适合移动设备的网站是提高网站影响力的重要因素。谷歌等搜索引擎也大力加强移动搜索体验。然而,许多桌面网站可能不容易浏览和使用移动设备。因此,拥有适合移动设备的网站是提高在线影响力的重要因素。为了方便网站站长在移动设备上优化原桌面网站,谷歌推出了“移动设备的易用性”帮助站长优化网站的工具。
工具使用方法
注意,这个易用的工具是用的Google域名需要翻墙才能访问。如果你不能翻墙,请忽略并跳过这篇文章。
整个网站测试:
访问Google Webmaster,将网站添加到工具中,以测试移动设备的易用性。
单页测试:
适用于移动设备的测试工具:https://search.google.com/test/mobile-friendly
打开此网站后,输入需要测试的页的完整网站,点击运行测试,系统将抓取网页并进行测试跟踪,测试通常不超过一分钟。
测试结果包括以下两部分:移动设备上相应网页的屏幕截图和工具中发现的所有移动设备可用性问题的列表。与移动设备的易用性有关的问题是指使用移动(小屏幕)设备访问相应网页的用户,包括字体太小(很难在小屏幕上看到)和使用 Flash(大多数移动设备都不支持 Flash)等等。
有时候测试结果显示的屏幕截图不正常,可能是测试不能加载相应网页使用的所有资源,会显示“网页包含无法加载的资源”这些资源是指网页中包含的外部元素,如图片、CSS 或脚本文件。造成这个问题的主要原因可能是网站站长设置robots.txt只需修改,禁止搜索引擎访问相应的资源robots.txt,取消禁止搜索引擎访问此资源。
工具优化指南
移动设备的适用性测试工具可以检测到以下可用性错误,我们可以逐一修改相应的错误,具体的优化修改方法如下:
1.使用不兼容的插件
页面使用了Flash等插件,将Flash删除,或使用HTML5 替代。
2.未设置视口
网页未定义viewport属性,只需在网页头部添加以下一行即可。
2.未设置视口
网页未定义viewport属性,只需要在网页头部增加如下一行即可。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%;
}
}
总结
如果长期不修复这些问题,网站的移动版网页就无法提供令人满意的浏览体验,那么网站页面就会在移动搜索结果中的排名下降,导致流量的损失,因此,网站的站长赶快行动起来,立刻使用“谷歌移动设备易用性”优化移动网站的工具。
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权本站发表,未经许可,不得转载。