来自 Google 的建议:针对移动设备优化网站设计

随着智能手机和平板电脑的使用数量日益增长,越来越多的网站开始注重面向移动设备的内容和界面设计。在这方面 Google 绝对不会落后。Google 在 2011 年 12 月份推出了专门针对智能手机的 Googlebot-Mobile 来甄别和抓取适合移动设备的网页。Google 团队的 Pierre Far 为我们献上了一篇关于针对移动设备优化网站的建议文章。该文从设计思路、响应性网页设计和针对特定设备的 HTML 三个方面对移动设备网页设计进行介绍,给出了来自搜索巨人的建议。

设计思路:关于针对移动设备进行网站优化的建议

网站设计人员可以使用不同的形式来针对移动设备进行网页设计。Google 支持三种不同的设计思路:

  1. 使用响应性网站设计方法。例如,对于所有的设备(包括桌面设备),网站都使用相同的链接地址(URLs)形式来提供内容;单个链接地址响应不同的访问设备时,会提供相同的 HTML 网页,但是通过调整 CSS 样式来改变该网页在特定设备上的展现形式。这是 Google 推荐的设计思路。
  2. 网站使用相同的链接地址形式向不同的设备提供内容,但是通过判断浏览器的 User Agent 来动态地决定要发送的 HTML(以及对应的 CSS 样式)网页。即,虽然桌面设备和移动设备访问的地址是一样的,但是接收到的内容(网页结构 HTML 和 CSS)却是不一样的。
  3. 网站分别提供针对桌面设备和移动设备的两套网页,比如 www.google.com 和 m.google.com。

在流行的网站平台 WordPress 上曾经出现了很多针对移动设备的主题,它们多是以插件的形式探测发送请求的设备类型,然后使用针对该设备类型的网页结构和样式来展示内容,这就属于上述 2 的设计思路;有的则是在链接地址上添加参数,如 ?wpmp_switcher=desktop?wpmp_switcher=mobile 分别针对桌面设备和移动设备,这就属于上述第 3 类设计。

响应性网页设计

响应性网页设计(Responsive web design,不知道翻译的准确不)是一种使用 CSS3 媒体查询(CSS3 media queries)方法来改变网页展示效果的设计方法。也就是说,不管使用什么设备访问,网页的 HTML 都是一样的,但是表现出来的外观是根据 CSS 媒体查询来确定的特定 CSS 样式规则渲染得到的。

Google 针对这种设计提供了两篇参考资料(生在国内的你,可能需要用些手段才能访问的到):

  1. http://googlewebmastercentral.blogspot.com/2012/04/responsive-design-harnessing-power-of.html
  2. https://developers.google.com/webmasters/smartphone-sites/details

使用响应性网页设计方法有以下几个优点:

  • 它将针对桌面设备和移动设备的内容统一到同一个 URL 地址上,更方便用户交互、分享和引用,同时也方便 Google 的算法给你的网页赋予合适的索引属性。
  • Google 可以更有效的发现你的网页内容,而不需要使用不同的网页爬行机器人 Googlebot 抓取同一个页面并分别建立索引。

水景一页正在使用的 WordPress 默认的 TwentyEleven 主题就采取了这种设计思路(注意 CSS 中靠后面的几个 @media 部分的内容就明白了)。

设备特定 HTML

有时候可能无法或者不适合使用响应性网页设计方法来设计网页,所以 Google 同时也支持别的设计方式,比如使用针对特定设备的 HTML 来提供相同或等效的内容。设备特定的 HTML 可以使用相同的 URL 地址提供给不同设备(动态响应),也可以使用不同的 URL 链接地址分别提供给不同的设备类型(比如 www.example.com 和 m.example.com)。

如果你的网站使用动态响应方式,Google 强烈建议 大家使用 Vary HTTP 头来与缓存服务器和 Google 的算法进行交互(通信),告诉用户和 Google 该内容可能会随着 User Agent 的不同而有所变化。然后 Google 就可以使用 Googlebot-Mobile 来抓取针对移动设备的网页。这里有更详细的说明。

这是根据 Google 网站管理员博客上的 Recommendations for building smartphone-optimized websites 一文改编的,转载请保留相关链接和声明。©

本文发表于水景一页。永久链接:<http://cnzhx.net/blog/building-smartphone-optimized-websites/>。转载请保留此信息及相应链接。

6 条关于 “来自 Google 的建议:针对移动设备优化网站设计” 的评论

雁过留声,人过留名

您的电子邮箱地址不会被公开。 必填项已用 * 标注

特别提示:与当前文章主题无关的讨论相关但需要较多讨论求助信息请发布到水景一页讨论区的相应版块,谢谢您的理解与合作!请参考本站互助指南
您可以在评论中使用如下的 HTML 标记来辅助表达: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>