隨著行動瀏覽成為搜尋引擎主流，響應式網頁設計也越來越重要，甚至能說在這幾年，假設你的網頁沒有響應式設計，或是響應式網頁設計不良，那你的網頁流量可謂十分不妙。
然而，談到響應式網頁設計，就不得不順帶提到響應式網頁與搜尋引擎優化的關係，搜尋引擎優化一直都是熱門話題，從網頁標籤、圖片alt屬性、SSL安全憑證到網站連結都能與搜尋引擎優化沾上邊，但很少人能將其與響應式網頁設計連結起來。
本篇文章會針對搜尋引擎優化與響應式網頁做名詞解釋，以及闡述響應式網頁與搜尋引擎優化的關聯性。
在經營品牌網站時，我們時常會提到網頁設計要達到搜尋引擎優化、搜尋引擎最佳化、網站優化、搜尋引擎排序最佳化、搜尋引擎排序優化、關鍵字行銷，很顯然這些指的都是同一件事：Search Engine Optimization，令人熟悉的SEO。
關於搜尋引擎優化的概念，網路上有很多文章能更深入了解其意義，這裡簡略說明一下概念，搜尋引擎優化是一種用來判斷網站品質的指標，判斷的基準點在於網頁設計的內容是否符合搜尋引擎的口味。
通常各大搜尋引擎都會有著自己的一套評分標準，拿目前搜尋引擎龍頭Google Chrome來說，他們就在自己的搜尋中心公布這麼一份搜尋引擎最佳化入門指南，用來說明搜尋引擎評分與扣分的重點是什麼？
如果你有仔細閱覽過搜尋引擎最佳化入門指南，那你一定也會發現雖然整體而言最佳化針對的對象是搜尋引擎，但指南當中大部分的篇幅都會告訴你，除了搜尋引擎外，還應該要讓使用者看懂，譬如：最佳化內容、結構化資料、行動裝置瀏覽……等等。
其中與我們今天響應式網頁主題緊扣的，便是行動裝置友善。在行動裝置友善的說明中，有許多方法能讓網站適合透過行動裝置瀏覽，其中就有著這麼一條建議：使用響應式網頁設計。
響應式網頁是基於響應式網頁設計技術所製作，可以兼容各種行動裝置、螢幕大小的網頁。與傳統網頁設計不同，不需要在比桌電畫面還小的螢幕中，不斷的用手指放大、放大、再放大，才能找到所需要的資訊。
響應式網頁設計如同字面上的意思會自動感測你所使用的行動裝置，進行圖片的縮放、區塊的調整，主動讓網頁符合行動裝置。相當於你只需要擁有一組網址，就能獲得桌電、筆電、平板、手機…等多種版本的網頁設計。
不需要像以前，為了維持版本使用的舒適度，電腦一個版本、手機版一個版本。如此一來，單一網址可以更有效彙整流量、衝擊網頁排名。在網站維護的部分，也只需要進行同一網站的更新，降低程式碼錯誤的機率，讓耗費在網站維護上的人事成本、開發成本大幅減少。
但實際上，擁有多種版本的響應式網頁設計，雖然相對傳統網頁設計為了讓搜尋引擎讀懂，在程式碼或視覺部分較為簡約。然而，想要做好一個有轉換效果的響應式網頁設計，仍不是那麼容易。
如果說自由度較高的傳統網頁，會為了轉換效果而同時使用相同的功能設計，那響應式網頁設計，便是在求「同中存異」。在被搜尋引擎與使用者了解，也就是相同的網頁架構之下，從色彩、字型、Icon、圖像、功能，與使用者體驗做出專屬品牌的獨特性。
再來，不曉得你在閱覽網站時，是否曾經有過這種體驗，在桌電版本閱覽時，頁面精美、資訊排序明確，但轉換到手機版本時，不管是視覺排版，還是資訊層級都變成一場災難？
響應式網頁的確會隨著行動裝置大小而有不同變化，不過如果在變換的過程中，沒有在資訊層級上作區塊性的調整，在效能最佳的桌電版本所呈現的內容，會無法在效能有限的手機版本中完全揭露。
尤其是圖片，擁有過多沉浸式圖片的響應式網頁，會為網頁載入速度帶來一定的負擔。因此響應式網頁在設計過程中，便需要在網頁的視覺效果與載入效能之間找到平衡，且要特別注意在行動裝置轉換中，內容資訊的排列是否有按照層級呈現。
【 延伸閱讀 】為什麼要選RWD網站，一篇就讓你了解RWD網頁設計
從上述響應式網頁設計與搜尋引擎最佳化的解釋中，你可以很輕易地發現響應式網頁設計與搜尋引擎最佳化的概念都圍繞著使用者體驗運轉，而部分共同點會讓你感覺響應式網頁設計更像是搜尋引擎最佳化的其中一種優化方式。
重複內容意謂著不同網址出現相同內容，有看過搜尋引擎優化相關說明的人，就會知道搜尋引擎對重複內容極其感冒。
就算你只是網頁改版，新舊網頁同時存在，或電腦版、手機版網頁內容相同，但不同網址，重複內容都會使得網頁排名下滑。 響應式網頁「一址多版本」的設計，不僅能規避掉重複內容，還能滿足使用者多項行動裝置瀏覽的需求。
【 延伸閱讀 】網站全面升級！5個網站改版前的問題，原來要這樣處理…
不管是響應式網頁設計，還是搜尋引擎最佳化，最終的目的都是為了改善使用者體驗。
搜尋引擎最佳化只要可以在響應式網頁設計的基礎上，改善其他搜尋引擎評分項目，那麼網頁排名一定能大幅提升。
響應式網頁設計與搜尋引擎最佳化通常都會被認定為網頁設計必備的項目，但經過文章的剖析，響應式網頁設計之後會被你列為檢測搜尋引擎最佳化的其中一個項目，相反的，沒有特地去拆解兩者的共同之處，搜尋引擎優化出問題時，很可能根本找不出問題點。
文章的最後，介紹一項常用於檢測網頁的工具，Google Search Concole的行動裝置相容性測試，你可以運用此工具定期檢測網頁的行動裝置相容性，響應式網頁的分數越高，使用者體驗就越好，網頁排名也會逐漸提升。
【 延伸閱讀 】網頁成效如何追蹤？5種常見的成效追蹤工具
網路資源整理＞＞＞
你的網頁是響應式嗎？利用一個簡單技巧測出 RWD 網頁
好用的RWD響應式網頁檢視工具：Chrome擴充外掛 EMMet Re:view
pongo6301
iThome鐵人賽
看影片追技術