随着智能手机和平板电脑的使用数量日益增长，越来越多的网站开始注重面向移动设备的内容和界面设计。在这方面 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 一文改编的，转载请保留相关链接和声明。©

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