谈到手机版网页，最常被提到的就是 RWD。究竟什么是 RWD 呢？RWD，也就是响应式网站设计，英文为 Responsive Web Design。Responsive 响应式代表着，网页内容可以依照屏幕宽度，马上反应在排版上。也就是说，同一个 HTML 文本，可以透过 CSS 编写，依照不同设备（手机、桌机、平板）屏幕宽度，无论直立或横放，都能流畅的缩放、更改版面配置、甚至是控制网页上的文本显示与否。

一般提到「创建手机版网页」，有三种做法，分别是：RWD、AWD、手机桌机独立网站。

简单的差异如下：

RWD，Responsive Web Design，响应式网站

手机、桌机同网址。同一个 HTML 文本，CSS 能依照不同屏幕宽度的条件，来改变排版。

AWD，Adaptive Web Design，自适应式网站

手机、桌机网址，可以做到完全一样。不同的设备打开时，会先判定设备是哪一种，来给予不同的 CSS，进而改变排版。

Separate URLs，手机桌机各自为独立网站，不同网址

手机、桌机网址不同。保持电脑版网站不变，另外做一个专门给手机用的小尺寸网站。所以也可能会有不同的 HTML 文本、CSS、JavaScript 文档。

把「Separate URLs」，拿来这边跟 RWD、AWD 讨论，有点奇怪。毕竟，AWD 网站也是可以做成「手机、桌机网址不同」，但是为了顺应本篇文章主轴，会针对 SEO 优缺点来讨论，就暂且让我们用比较粗浅的方式来分类。

什么是 RWD 响应式网站（Responsive web design）？

要开始讨论对 SEO 影响之前，可以先了解什么是 RWD 响应式网站？原理是什么呢？RWD 是透过检查屏幕宽度（浏览器宽度），让网页上的内容，可以改变文本大小、行距、整体排版、区块位置、图片缩放等等样式。无论你是用手机开网页、电脑开网页、平板开网页，网页内容的版面配置，都可流畅的依照浏览器宽度来改变，用一套网址就可以走天下啦！

直接看影片就可以清楚了解：

RWD 重要的精神：设置查看区 viewport

RWD 最重要精神，就是会依据「屏幕宽度」，也就是查看区宽度（viewport），来改变网页上的内容排版。在 HTML 文本上，应该要注明 meta name=”viewport” 的标签，让浏览器清楚知道，「宽度尺寸变化」与「网页的内容缩放」两者的比例。

• 利用 meta viewport 标签，控制浏览器大小变化时，网页内容的宽度、缩放该如何调整。
• 注明 width=device-width ，让网页内容可以依据「设备宽度」，灵活运用设备的独立像素，可以自由改变排版。
• 注明 initial-scale=1 ，让网页 CSS 像素：设备独立像素＝1:1，如此一来，无论手机直立、横放，都能确保网页能完整运用屏幕宽度。

左图：有设置 viewport，右图：没有设置 viewport （此为仿真图，画面截取自美丽佳人Marie Claire）

RWD 重要的精神：使用 CSS @media，针对不同屏幕宽度，套用不同样式

RWD 网页，之所以可以随着设备屏幕宽度来改变版型，最大的功劳就是来自于 CSS 样式。简单来说，我们可以用 CSS 设置条件，在不同的屏幕宽度之下，可以使用不同的字体大小、行距、版面位置。

• 在 CSS 中，大型元素使用「相对」宽度，避免使用「绝对」宽度。因为各家手机、平板，屏幕大小不同，设置了「绝对」宽度，难以保证可以在所有类型设备上正常显示。例如，在顶层 div ，设置 width: 100%，而不要使用 width: 344px。
• 使用 CSS @media 以针对不同大小的屏幕套用不同的样式。

@media 的语法，是一种简易的条件筛选功能，可以套用在 CSS 样式中，当屏幕宽度符合条件，就会查找到相对应的 CSS 样式。

例如，当屏幕宽度小于、等于 600 px 时，背景会是 lightblue ，当屏幕宽度大于 600 px，背景会是 lightgreen。

上面的 CSS 写法，可以。（使用鼠标拉右侧窗口的宽度，就可以发现颜色变化。详见下图）

下图是跑出来的结果：

屏幕宽度小于、等于 600 px 时，背景会是 lightblue

当屏幕宽度大于 600 px，背景会是 lightgreen

RWD 响应式网站上关于 SEO 的设置

RWD 响应式网站有哪些设置，与 SEO 相关呢？在 SEO 领域中，「用户体验」一直是 Google 非常强调的。例如：手机网页是不是好操作？按钮够不够大？文本间距够不够宽？流程是不是顺畅？浏览的画面是不是有符合屏幕宽度？网页加载时间是不是够快？

这些都是 SEO 中，非常重要的一环，也刚好是 RWD 技术的重点。

• 使用 meta name=”viewport” 标记，向浏览器声明，网页内容可以配合设备宽度调整大小。
• 请勿使用 robots.txt 或其他方式，挡住 Googlebot 检索任何网页资产 (CSS、JavaScript 和图片)，以避免 Google 无确解读 RWD 的网页配置。
• RWD 响应式网站上线后，使用 ，检验 Googlebot 是否能正确解读，并且预防有不小心挡掉 Googlebot 的状况。
• 使用响应式图片技术（Responsive Images）。除了可依据设备宽度，调整图片比例之外，在高分辨率设备上，也可给予高分辨率图片。另外，也可以结合 CSS 的 @media 筛选功能，对于不同设备宽度，给予适合的图片文档，避免图片文档过大。
• Google 建议使用「适应性 JavaScript（ JavaScript-adaptive）」。

RWD、AWD 哪种对 SEO 比较好？手机桌机各为不同网址，对 SEO 不好吗？

关于 RWD、AWD、手机桌机独立网站，SEO 最好的是哪一种？Google 官方表明，并没有偏好哪一种技术，只要你确保 Googlebot 可以访问网页、可以访问到网页上所使用的 CSS、JavaScript，就没有问题。

但是，如果单纯从「Google Search」官方说明，来探讨「RWD、AWD、手机桌机不同网址」哪种对 SEO 比较好呢？

1. 重复内容

当手机版、电脑版网址不同时，如果 Googlebot 判定发生问题，例如，没有在手机版 HTML 文本，注明「电脑版的对应网址」，导致 Google 算法收录不正确的网页作为电脑版网址。或是，将手机版页面视为桌机版的「重复内容」，这两种情况，都会让 SEO 上的处理相当棘手。

所以，就「重复内容」议题，推荐使用能做到「单一网址」的 RWD、AWD。

1. 减少重新导向（转址）、减少重新导向错误

当手机版、电脑版网址不同时，可能在切换设备时，会透过「重新导向」，将用户带到适合的页面。像是，用手机打开电脑版网址时，会自动转址到手机版网址。

但是，重新导向让用户等待更久，更容易放弃，更容易直接跳出。另外，在设置重新导向时，也常会发生错误。例如，应该用 302 重新导向，却误用 301 重新导向，或是导向到错误的网址，都会影响搜索的排名表现！

所以，就「减少重新导向错误」议题，推荐使用能做到「单一网址」的 RWD、AWD。

1. Googlebot 的爬取也是有预算上限（Crawl budget）

什么是 Googlebot 的爬取预算呢？基本上，Googlebot 会依照网站流量、更新速度，来决定造访这个网站的频率，以及 Googlebot 投入在这个网站的时间。。

当手机版、电脑版网址不同时，需要在各版本的 HTML 文本，指明相对应的电脑版、行动版网页。Googlebot 可顺着这个指示，前往不同版本，继续爬取。

但是，比起「手机、电脑单一网址」来说，「手机、电脑网址不同」花费了 Googlebot 更多的爬取预算在不同版本、相似内容上面（手机版、电脑版）。

若网站规模小，不会有什么影响。但对于越大的网站（有效 URL 数量在 1,000 以上的网站）、更新频率越高的网站（例如每日都有新文章产生），会有较大的影响。

所以，就「节省 Googlebot 的爬取预算（Crawl budget）」议题，推荐使用能做到「单一网址」的 RWD、AWD。

什么是爬取预算(crawl budget)？网站速度优化，从Google Page Speed Insights开始

1. 网页加载速度

网页加载速度一直是「用户体验」主要指针，Google 曾经重申多次，！

那么，若是在同样的「硬件条件」、「网络带宽」下，该选择哪种技术架设网站呢？（继续往下探讨之前，要声明一下，这边的技术探讨，是以广泛来说，不代表绝对的优劣。

能专门为「手机设备」、「手机网络带宽」，来量身订做 HTML、JavaScript、CSS，是最能保证手机版网页加载性能的方式之一。

AWD 自适应式技术，就是专门为手机设备所开发，能充分为网页加载的性能优化。

而 RWD 响应式技术，手机、电脑都是访问同一份 HTML、JavaScript、CSS，若网站层级、数据量庞大，有可能会造成文档肥大，影响网页加载速度。

Mobile SEO必学！行动版网站健检Search Console帮你做

除了 SEO，经营网站，还有其他重点需要考察

拥有一个网站，除了 SEO，还有其他重点需要考察。我们粗略分成两大部分来看：

1. 手上能运用的资源：人力、开发时间、管理及维护成本。
2. 网站内容需求：内容数据量、功能复杂度、画面要求程度。

因为 RWD、AWD 在 SEO 先天条件上差异不大，反而与「工程层面」、「功能需求层面」有高度相关，诚心建议在选择之前，协同「网站产品经理」（清楚了解网站诉求、功能、SEO 项目）以及「工程开发团队」（清楚了解工程层面的复杂度、后续维运成本），双方一起讨论，评估最适合的成本，并有利于后续维运，才是最适合的选项！

参考数据：