搜寻引擎优化入门篇：你不能不知道的响应式网页设计

随着行动浏览成为搜寻引擎主流，响应式网页设计也越来越重要，甚至能说在这几年，假设你的网页没有响应式设计，或是响应式网页设计不良，那你的网页流量可谓十分不妙。

然而，谈到响应式网页设计，就不得不顺带提到响应式网页与搜寻引擎优化的关系，搜寻引擎优化一直都是热门话题，从网页标签、图片alt属性、SSL安全凭证到网站连结都能与搜寻引擎优化沾上边，但很少人能将其与响应式网页设计连结起来。

本篇文章会针对搜寻引擎优化与响应式网页做名词解释，以及阐述响应式网页与搜寻引擎优化的关联性。

搜寻引擎优化是什麽？

在经营品牌网站时，我们时常会提到网页设计要达到搜寻引擎优化、搜寻引擎最佳化、网站优化、搜寻引擎排序最佳化、搜寻引擎排序优化、关键字行销，很显然这些指的都是同一件事：Search Engine Optimization，令人熟悉的SEO。

关於搜寻引擎优化的概念，网路上有很多文章能更深入了解其意义，这里简略说明一下概念，搜寻引擎优化是一种用来判断网站品质的指标，判断的基准点在於网页设计的内容是否符合搜寻引擎的口味。

通常各大搜寻引擎都会有着自己的一套评分标准，拿目前搜寻引擎龙头Google Chrome来说，他们就在自己的搜寻中心公布这麽一份搜寻引擎最佳化入门指南，用来说明搜寻引擎评分与扣分的重点是什麽？

如果你有仔细阅览过搜寻引擎最佳化入门指南，那你一定也会发现虽然整体而言最佳化针对的对象是搜寻引擎，但指南当中大部分的篇幅都会告诉你，除了搜寻引擎外，还应该要让使用者看懂，譬如：最佳化内容、结构化资料、行动装置浏览……等等。

其中与我们今天响应式网页主题紧扣的，便是行动装置友善。在行动装置友善的说明中，有许多方法能让网站适合透过行动装置浏览，其中就有着这麽一条建议：使用响应式网页设计。

什麽是响应式网页设计？

响应式网页是基於响应式网页设计技术所制作，可以兼容各种行动装置、萤幕大小的网页。与传统网页设计不同，不需要在比桌电画面还小的萤幕中，不断的用手指放大、放大、再放大，才能找到所需要的资讯。

响应式网页设计如同字面上的意思会自动感测你所使用的行动装置，进行图片的缩放、区块的调整，主动让网页符合行动装置。相当於你只需要拥有一组网址，就能获得桌电、笔电、平板、手机…等多种版本的网页设计。

不需要像以前，为了维持版本使用的舒适度，电脑一个版本、手机版一个版本。如此一来，单一网址可以更有效汇整流量、冲击网页排名。在网站维护的部分，也只需要进行同一网站的更新，降低程序码错误的机率，让耗费在网站维护上的人事成本、开发成本大幅减少。

响应式网页优势

• 流动性排版
• 单一网址，多种版本
• 减少开发成本
• 良好的使用者体验
• 符合搜寻引擎最佳化

但实际上，拥有多种版本的响应式网页设计，虽然相对传统网页设计为了让搜寻引擎读懂，在程序码或视觉部分较为简约。然而，想要做好一个有转换效果的响应式网页设计，仍不是那麽容易。

如果说自由度较高的传统网页，会为了转换效果而同时使用相同的功能设计，那响应式网页设计，便是在求「同中存异」。在被搜寻引擎与使用者了解，也就是相同的网页架构之下，从色彩、字型、Icon、图像、功能，与使用者体验做出专属品牌的独特性。

再来，不晓得你在阅览网站时，是否曾经有过这种体验，在桌电版本阅览时，页面精美、资讯排序明确，但转换到手机版本时，不管是视觉排版，还是资讯层级都变成一场灾难？

响应式网页的确会随着行动装置大小而有不同变化，不过如果在变换的过程中，没有在资讯层级上作区块性的调整，在效能最佳的桌电版本所呈现的内容，会无法在效能有限的手机版本中完全揭露。

尤其是图片，拥有过多沉浸式图片的响应式网页，会为网页载入速度带来一定的负担。因此响应式网页在设计过程中，便需要在网页的视觉效果与载入效能之间找到平衡，且要特别注意在行动装置转换中，内容资讯的排列是否有按照层级呈现。

响应式网页劣势

• 网页内容排版混乱
• 网页载入速度缓慢
• 资讯揭露方式不一致

【 延伸阅读 】为什麽要选RWD网站，一篇就让你了解RWD网页设计

响应式网页设计与搜寻引擎最佳化的关联

从上述响应式网页设计与搜寻引擎最佳化的解释中，你可以很轻易地发现响应式网页设计与搜寻引擎最佳化的概念都围绕着使用者体验运转，而部分共同点会让你感觉响应式网页设计更像是搜寻引擎最佳化的其中一种优化方式。

没有重复内容

重复内容意谓着不同网址出现相同内容，有看过搜寻引擎优化相关说明的人，就会知道搜寻引擎对重复内容极其感冒。

就算你只是网页改版，新旧网页同时存在，或电脑版、手机版网页内容相同，但不同网址，重复内容都会使得网页排名下滑。 响应式网页「一址多版本」的设计，不仅能规避掉重复内容，还能满足使用者多项行动装置浏览的需求。

【 延伸阅读 】网站全面升级！5个网站改版前的问题，原来要这样处理…

良好的使用者体验

不管是响应式网页设计，还是搜寻引擎最佳化，最终的目的都是为了改善使用者体验。

搜寻引擎最佳化只要可以在响应式网页设计的基础上，改善其他搜寻引擎评分项目，那麽网页排名一定能大幅提升。

响应式网页设计之後

响应式网页设计与搜寻引擎最佳化通常都会被认定为网页设计必备的项目，但经过文章的剖析，响应式网页设计之後会被你列为检测搜寻引擎最佳化的其中一个项目，相反的，没有特地去拆解两者的共同之处，搜寻引擎优化出问题时，很可能根本找不出问题点。

文章的最後，介绍一项常用於检测网页的工具，Google Search Concole的行动装置相容性测试，你可以运用此工具定期检测网页的行动装置相容性，响应式网页的分数越高，使用者体验就越好，网页排名也会逐渐提升。

【 延伸阅读 】网页成效如何追踪？5种常见的成效追踪工具