移动设计备忘单：响应式设计、动态服务和移动网站

编辑更新（2015 年 7 月）： 2015 年 4 月，Google 对移动搜索结果排名算法进行了预先宣布的更新。 网站的移动友好度是移动搜索排名的确认排名信号。 请注意并在以下文章的帮助下使您的网站对移动设备友好。

我们都听说过这些统计数据：2014 年是使用智能手机上网的人数超过使用电脑或笔记本电脑上网的一年。 移动设计是未来。 您不希望自己的网站被抛在后面，但是您究竟如何为这个日益移动的互联网编程呢？ 有三个主要选项，每个选项都有自己的优点和缺点。 在这篇文章中，我将分解您的移动准备选项，为您提供每个选项的优缺点，以帮助您为您的网站和 SEO 策略选择最佳的前进路径。

选项 1：响应式设计

响应式设计使用媒体查询确定正在查看页面的屏幕的分辨率，然后适当地调整页面的大小和布局。 谷歌表示它更喜欢响应式网页设计，这使其成为这次讨论的重量级人物。

优点：

1. 每页只有一个版本。 同一个页面会适应显示它的设备类型（而不是检测设备类型，然后根据它提供不同的内容）。 在所有设备上使用相同的 HTML 和 URL 可以简化您的站点维护。
2. 响应式设计不像其他两个选项那样依赖于用户代理检测。 用户代理检测（即检测什么浏览器或设备正在请求一个网页）本身并不坏，但它并不完美，如果过程中出现故障，用户可能会得到错误版本的网站。 此外，这使搜索引擎蜘蛛不必将您的网站作为几个不同的用户代理进行抓取——这意味着您的网站的更多内容被抓取。
3. 响应式通常在浏览器中加载得更快。 因为所有设备都获得相同的内容，所以没有请求-用户代理检测-可能重定向的过程。 任何曾经饿过并在智能手机上寻找好餐厅的人都知道，速度很重要。

缺点：

1. 重新设计现有网站可能是一个漫长而密集的过程。 因此，如果您有一个大型网站，那么转向响应式可能不是最佳选择。
2. 根据您网站的布局，将内容塞入移动屏幕可能太难了。 像 NYTimes.com 这样的网站维护独立的移动网站，因为将内容分解比将其放入单个页面更容易。
3. 导航元素并不总是能很好地调整大小； 悬停元素在触摸屏上根本不起作用。 因此，响应式可能意味着更改您的导航。
4. 在某些情况下，具有大量图像的响应式页面在响应式设计中加载速度较慢。 我应该强调，这不是常态，但它已经发生了。

如果您选择响应式设计，请记住，您需要优化图像并在各种浏览器和设备上测试您的网站（或使用良好的用户代理模拟器），然后再将其发布。

选项 2：动态服务

有时被称为用户代理“嗅探”，动态服务可以通过两种方式完成，并且难以实现。 事实上，谷歌概述了动态服务的一些常见错误。 这种技术所做的是检测访问者的用户代理（即，他们使用什么设备来查看您的站点），然后在服务器级别进行重定向。 实现动态服务的一种方法是单向重定向，其中指向站点的链接默认指向桌面站点，但移动设备会从桌面站点重定向到移动站点。

第二种类型，双向重定向，在桌面和移动网站上都有代码，确保任何访问者，无论使用何种设备，都可以获得适当的内容。 （这些代码有时被称为交换机标签。）实现意味着在桌面上放置一个 rel=”alternate” 标签，指向移动站点； 并且，在移动网站上，放置一个指向桌面网站的 rel=”canonical” 标签。

优点：

1. 因为重定向是在服务器级别完成的，所以每页只需要一个 URL。
2. 动态服务也适用于功能手机。 根据 PCMag.com 的定义，功能手机是“包含语音通话和短信之外的一组固定功能的手机，但不如智能手机广泛。” 例如，功能手机通常不能下载应用程序，但通常具有一些网页浏览功能。 根据 Google，最大的不同是功能手机无法处理 CSS，因此它们无法很好地处理响应式设计。 因此，了解您的受众以及他们使用的移动设备类型非常重要。
3. 如果您想为您的移动用户设置一组单独的关键字，那么此选项将允许您这样做，因为移动用户和桌面用户都可以看到不同的 HTML。 （Search Engine Land 有一篇很棒的文章讨论了特定于移动设备的关键字。）

缺点：

1. 动态重定向使您的站点维护工作加倍，因为它为移动设备设置了一个单独的站点，一组单独的索引 HTML 需要单独的 SEO 项目。
2. 必要的用户代理字符串列表也需要不断维护，因为每当发布新的移动设备时都必须添加新的字符串。
3. 最后，请记住，如果您的网站动态提供内容，您将需要使用“Vary HTTP-User Agents”标头。 标头有助于正确提供内容并帮助引擎正确缓存它。 Google 提供了有关如何添加此标头的详细信息。

选项 3：移动网站

顾名思义，此选项涉及专门为移动用户创建一个单独的域。 最常见的例子是m.domain.com或mobile.domain.com 。 这是大型零售商的热门选择； Bridget Randolph 指出，“在 Quantcast 排名前 100,000 的网站中，有 73% 的网站使用 URL 重定向到移动特定 URL。” 与动态服务一样，该技术涉及专门为使用移动设备的访问者开发内容； 但是，单独的移动站点的 URL 是不同的，因此没有服务器级别的重定向。

优点：

1. 对于页面数在数十万或数百万的大型网站，实施响应式设计可能只是太多的工作。 移动网站允许您定制用户体验，并慢慢建立独特的移动体验。
2. 与动态服务一样，移动网站比响应式设计更适合功能手机。 根据您网站的人口统计，这可能不是标准； 但对于某些企业来说，这是一个重要的考虑因素。

缺点：

1. 您的移动网站不会从您的桌面网站建立的任何积极的反向链接配置文件中受益（除非您实施双向重定向）。 因此，如果您想让您的移动用户在自然搜索中找到您，这可能是一个真正的挫折。
2. 您的移动网站将需要一些额外的 SEO 工作。 您必须向 Google 和 Bing 网站管理员工具提交单独的 XML 站点地图。 此外，较小的屏幕意味着较小的 SERP，因此您可能需要编辑 Meta 标签。 特定于移动设备的 Meta 标签应该比桌面网站的标签短。

如您所见，内容已被大幅重新格式化和缩减，使其在移动设备上可读。

在筛选所有这些信息以便为您的网站做出正确选择时，不要忘记问自己有多少访问者正在使用移动设备访问该网站。 检查您的分析。 如果移动流量的总百分比低于 5%，那么您可能可以等待实施移动设计。 目前。 如果预测是正确的，那么移动使用只会继续要求越来越多的互联网流量。

有关如何优化页面以提高速度和移动 SEO 的信息，我们建议从以下资源开始：

• 多合一的移动搜索引擎优化和设计清单
• 7 个适合移动设备的导航最佳实践
• SEO 指南：移动 SEO 和 UX 优化
• 图像优化：改善移动用户体验的第一件事
• Google Developers 的网站站长移动指南