当梦想照进现实

谷歌针对移动设备进行优化的网站建议

2013.07.12

Google于2011年的手机版截图

随着近年来智能手机的普及,通过移动设备浏览网站的用户越来越多,这使得我们也不得不要重视移动端的流量。(从本人的解梦小站来看,传统手机端的UC搜索已经成为搜索引擎的前几位,特别是早上,流量增长更迅速。)

谷歌也逐渐重视移动版的网站,不仅对移动端使用了专门的爬虫Google-Mobile,而且也对移动版网站的优化进行了说明。这篇文章就是研读了谷歌的《构建针对移动设备进行优化的网站》文章后的一些总结。

移动版网站的三种配置方式

针对移动端的网站一般有3种配置方式:

  1. 响应性网页设计,即同一网址,相同内容。

不管用户是哪种设备,PC,手机还是平板电脑,内容层的HTML全都一样,只是通过表现层的CSS来控制不同的表现形式,如在移动端和平板下会控制最大宽度,以适应屏幕显示。

  1. 同一网址,不同内容。

同一个网址,根据用户使用设备的不同,从而返回不同的内容。这是从服务器端控制,根据用户的身份(User-Agent,用户请求网页时提供给服务器的信息之一)来判断设备,从而提供不同的内容。

  1. 不同网址,不同内容。

根据设备的不同,网站呈现不同的网址,不同的内容。比如PC端为www.example.com,智能手机端为m.example.com,传统手机端为wap.example.com。通常情况下还会同时设置重定向,比如用智能手机访问www.example.com,会自动跳转到m.example.com上。

使用rel="canonical"和rel="alternate"

如使用上面第三种方式,不同的URL返回基本同样的内容,就会出现内容重复的问题,例如www.example.com/arti123.html和m.example.com/arti123.html。那怎么解决呢?rel="canonical"rel="alternate"标签很好的解决了这个问题。
rel="canonical"和rel="alternate"是一种专门针对搜索引擎的建议,指明重复页面中的标准页面(目前谷歌,bing,百度都声明支持这个标签)。比如页面A和页面B2个相似页面,页面A是标准页面,页面B是替补页面,则页面B需要加上rel="canonical"标签,表明标准页面为A;而页面A则加上"rel="alternate"标签,说明还有个替补页面B。如:
页面A上:<link ref="alternate" href="www.example.com/B">
页面B上:<link ref="canonical" href="www.example.com/A">
桌面版网页和移动版网页跟上面的问题极其相似,通常桌面版网页为标准页面,而移动版网页为替补页面。则2类页面上可添加如下标签:
桌面版网页:<link ref="alternate" href="m.example.com/">
移动版网页:<link ref="canonical" href="www.example.com/">

另外,rel="alternate"标签还可用于站点地图中,如桌面版网页的站点地图中的代码:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.example.com/page-1/</loc>
<xhtml:link
    rel="alternate"
    media="only screen and (max-width: 640px)"
    href="http://m.example.com/page-1" />
</url>
</urlset>

注:上面media="only screen and (max-width: 640px)"一行暂不理解。

网站间重定向

当在移动端使用不同的URL时(即上面第三种方式),网站一般同时还会设置重定向(即跳转),比如用户在智能手机端浏览www.example.com,会自动跳转到m.example.com,以更好的呈现页面。
Googlebot支持两种重定向设置方法:HTTP重定向和JS重定向。(具体设置过程我还没掌握。对于HTTP重定向我建议设置为302跳转,因为302含义为临时跳转,更加符合规范。)
很多网站在设置重定向时会犯同样一种错误,那就是重定向至无关地址。比如智能手机端访问www.example.com/talk/123321.html,却重定向至移动版首页m.example.com(注意:很多网站都会跳转至首页。)。用户在这种情况下忽然到达首页会感觉莫名其妙,很可能离开网页,即便不离开,也会增加访问成本。这样跳出率和最终转化率都会受影响。
另外,google还建议开放一种不使用重定向的途径,比如在智能手机端直接输入www的网址,可以不跳转正常访问。

Vary: User-Agent

谷歌强烈建议Vary: User-Agent添加在HTTP响应头中,这个标签的含义是表明网页内容会根据User-Agent发生改变,需要在服务器端进行设置。一旦设置,就相当于给Googlebot一个信号,使其了解网站的配置,有助于更好的抓取和索引网站(适合第二,三种配置方法)。

以下截取一段HTTP内容:

请求头部:
GET /page-1 HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19
(...HTTP 请求标头的其余部分...)

响应头部:
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(...HTTP 响应标头的其余部分...)

零星问题

还有一些零星问题,整理如下:

  1. 对于**平板电脑端**。如果没有特别设计平板端网站,建议不要使用智能手机版网页(宽度有限),而使用桌面版网页,以最大程度上保证访问体验。
  2. 对于Googlebot。Googlebot有专门的移动版爬虫,具体User-Agent如下:

功能手机 Googlebot 移动版
SAMSUNG-SGH-E250/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)
DoCoMo/2.0 N905i(c100;TB;W24H16) (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)
智能手机 Googlebot 移动版
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)
在上面三种配置方式中,对于Googlebot的访问,无需任何特别设定,只需按照正常的用户对待即可。

  1. 对于视频。由于智能手机端对flash并不是为完全支持,因此建议改为HTML5版的视频播放。

后记

  1. 因为本人未完全实际操作以上设置,对原文理解不够深入,细节部分掌握不够准确,如有问题,还望不吝赐教。
  2. 如需完整,深入的了解内容,请看谷歌原文:https://developers.google.com/webmasters/smartphone-sites/。
  3. 图片故事:2011年Google手机版截图,很多人抱怨头部导航占据了太多的空间。也是同期,Google在桌面版刚换上黑色导航栏。

图片摘自http://www.seroundtable.com/google-mobile-top-bar-13658.html

Comments
Write a Comment