如果你針對SEO來考慮的話，Responsive Web Design確實是有助益的，並且Google在”Overview of Google’s recommendations“也說 …

1. Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.

2. If responsive design is not the best option to serve your users, Google supports having your content being served using different HTML. The different HTML can be on the same URL or on different URLs, and Googlebot can handle both setups appropriately if you follow our recommendations.

上述的第一點說明Google的最優先建議，請大家使用Responsive Web Design (適應性網頁設計)，因為不管什麼版本都是相同的HTML、相同的內容，Google最容易處理。

但是第二點又說了，如果Responsive Web Design (適應性網頁設計)不是你的最佳選擇的話，也可以使用其他的方式云云。

因為上面的說法，所以大家都認為使用Responsive Web Design (適應性網頁設計)就對啦 … 其實並不是這樣。

我們前面說到的都是針對SEO而言，當然Responsive Web Design是首選，但是我們也提到一個但書: 「如果你的網頁較為複雜的話，Responsive Web Design還是有其缺點。」

也就是如果你以「網站優化」的觀點來看的話，你必須思考Google的第二點建議的意思。為什麼Google會說~「If responsive design is not the best option to serve your users 如果適應性網頁設計不是你的最好選擇的話 … 」。

這篇”Could Mobile Responsive Website Design Hurt Your SEO?“也提出跟我們同樣的看法，他提到了一個很特別的案例，就是Disney (迪士尼公司) 的網頁。他說在迪士尼網頁中有許多給小朋友玩的網頁遊戲，有些遊戲可以在桌上型電腦玩，但是如果使用行動設備就可以無法使用。因此這個情況下，就必須做出抉擇，放棄使用Responsive Web Design，或是修改遊戲，讓桌上型電腦與行動設備都可以順利使用。

這篇文章”THE DESIGN THINKING BEHIND THE NEW DISNEY.COM“的作者參與了迪士尼網頁工作，他就說到了他們的最大挑戰就是~創造出一個全新的方式來讓訪客與迪士尼日新月異的內容進行互動 (Our biggest challenge was creating a new way for our Guests to interact with our wide array of content on a day-to-day basis.)

如下圖就是迪士尼的內容顯示在桌上型電腦、平板、手機的樣子:

所以Responsive Web Design (適應性網頁設計)確實非常好，但是你必須知道你提供的內容是否能夠在這個架構內如你所想的，讓所有使用者在任何設備下都能夠順利瀏覽。也就是在網站優化的考量下，是否應該使用Responsive Web Design，還必須多加思考。

這篇”5 Reasons Why Responsive Web Design is Good for SEO“說有5個好理由讓適應性網頁設計對SEO有幫助。並且說到~「The bottom line is that as long as multiple devices for browsing are accessible, responsive design will always be a requirement.」。只要在多設備的瀏覽情況下，適應性網頁設計就是必須的。

以下就是這五個理由:

(1)Higher Local Rankings 因為以行動設備瀏覽網頁的比例越來越多，因此可以提升在地評等。
(2)Your Onsite SEO Efforts Are Still Applicable 因為網頁沒有區分版本，所以SEO策略保持一致。
(3)Avoid Duplicate Content 可以避免內容的重覆。
(4)Keep Your Links 可以保持網頁的原本連結。
(5)Google Said So 更重要的是 … Google也這麼說。

通常我們在瀏覽網頁時，有一種情況是很令人挫折的，就是當你使用可攜設備瀏覽某個網頁時，發現網頁內容跟你使用桌上型電腦瀏覽時不同。因為你很可能記得在家中在某個網頁看到某個資料，但是你卻無法使用手機找到相同的資料。

許多網頁設計是自動偵測使用設備，自動轉到特定的網頁，當你使用桌上型電腦瀏覽時，就顯示正常版網頁，當你使用手機瀏覽時，就顯示手機版本的網頁，但是卻沒有提供自由選擇版本的機會。

但是雖然適應性網頁設計對於SEO是好的，但是畢竟這些相關技術都還在演化當中，還是有些尚待克服的地方。

例如下圖中，大的畫面是桌上型電腦瀏覽時的樣子，小的畫面是手機瀏覽時的樣子:

但是，如果原本桌上型電腦版本的網頁是比較複雜的話，就不太容易順利的在手機呈現，例如PChome網頁或是Yahoo!奇摩，都還是讓使用者自己選擇版本，而非自動轉址。

所以雖然都知道適應性網頁設計對於SEO有好處，但是在目前而言，仍然處於技術與現實折衝的階段，如果出現更好的解決方案的話，也許以後就再也看不到網頁有桌機手機雙版本的情況了。

Responsive Web Design會不會變成以後的網頁設計標準呢? 這篇”The SEO of Responsive Web Design“說到，現在各種類型的設備都可以上網，要讓這麼多種不同大小的螢幕都可以看到適合的內容，Responsive Web Design會是以後網頁設計的標準。

並且提到微軟的網站就是典型的Responsive Web Design的例子，如下圖是桌上型正常的顯示樣子:

當畫面縮小後，就變成下面的樣子:

當繼續縮小成手機螢幕大小，就變成下面的樣子:

這樣子的Responsive Web Design最明顯的好處就是，使用者可以很舒服的以各種設備瀏覽網頁，但是更重要的是，對於SEO有特別的意義，我們整理如下。

(1) 可以減少網頁內容重複性 (Duplicate Content)

如果沒有使用Responsive Web Design，你必須有適合桌上型電腦瀏覽的網頁，以及適合行動設備瀏覽的網頁，雖然這樣子的網頁內容重複不會受到搜尋引擎的處罰，但是你必須維護兩份內容，可能會增加維護成本，更可能因為疏忽而兩個版本的內容不同步。如果使用Responsive Web Design，就可以專心的維護一個網頁。

(2) 可以提升網頁可使用性 (Usability)

如上面所說的，使用者可以很舒服的以各種設備瀏覽網頁，因此使用者不需要再去選擇各種網頁的版本。並且如果你的正常版本與行動版內容是不相同的，許多使用者可能會找不到原本預期的內容，因此Responsive Web Design可以提升網頁可使用性。

(3) 可以降低網頁跳離率 (Bounce Rate)

許多使用者經常會碰到網頁不適合行動設備瀏覽而離開，一來可能因為畫面讓人眼花撩亂，二來可以因為畫面等待過久。如果網頁能夠自動調整畫面，並且自動判斷應該下載的檔案大小，就不會讓使用者跳離。

(4) 可以提升社交化流量(Social traffic) 以及搜尋排名 (SERP)

當網頁提升可使用性，以及降低網頁跳離率之後，隨之而來的就是會增加流量，並且因為越來越多的社交活動都在手機上進行，因此社交化流量也會隨之提升，並且進而影響搜尋排名。

現在Responsive Web Design雖然很熱門，但是並沒有太多的網站採用這類的設計方式，我們後續再來討論Responsive Web Design的相關架構問題。

有圖有真像，我們隨便舉一個例子來看看。以下是用「美國雅虎」為關鍵字，在Google行動版搜尋的結果:

以下是用「美國雅虎」為關鍵字，在Google普通版搜尋的結果:

很明顯的上面的例子，「美國雅虎」這個關鍵字是沒有地區問題的關鍵字，但是兩者出現的結果是不同的，雖然不是完全不同，但是幾個網站在其中不同類型的搜尋中，從第一頁消失了。

為什麼Google行動版搜尋與普通搜尋結果不相同呢? 當然如果因為關鍵字是地區性質，例如搜尋「餐廳」或是其他在地實體店面，可能Google行動版搜尋會完全的以行動設備的所在地點來決定顯示資料，但是為什麼非地區性質的關鍵字也會不同呢?

其中最可能的原因就是Googlebot-mobile，所以不要再認為Google行動版搜尋與普通搜尋結果都會是一樣的結果，絕對有可能會越來越有差異的。

你是否還發現更多的Google行動版搜尋與普通搜尋結果是不相同的呢? 或是如果你有不同的看法，也歡迎多多交流囉。

什麼是Googlebot-Mobile呢? 這是Google新推出的網路抓取程式，專門為了智慧型手機(SmartPhone)的瀏覽方便性而來的。也就是這支Googlebot-Mobile會在網路上尋找適合智慧型手機瀏覽的網站，然後抓取下來進行索引，當使用者使用智慧型手機搜尋時，就可以方便的在手機螢幕內瀏覽網站。

為什麼需要這樣呢? 許多網站如果有手機版的網站，不是就會自動導向嗎? 為什麼需要特別使用Googlebot-Mobile來抓取呢?

因為網站具有手機版網站有兩種情況，第一種是當使用手機連接網站時，會自動偵測使用者的設備，如果是偵測到手機，則自動轉址到手機版本的網站。另一種是只在網站上標示手機網站連結，讓使用者自己選擇是否點選到手機版本的網站。

所以第一種是依照使用者設備自動轉址，而第二種不會自動轉址，只提供手機版本的連結。

以上兩種情況，都有一個共通的特性，就是手機版本網站的內容一定跟普遍網站不同，因為必須特別因應手機螢幕大小，所以內容上一定都有精減，只顯示出最重要的內容。

如果Google使用一般的Googlebot去抓取網站，在以上的第一種情況就無法抓到手機版網站，因為Googlebot的User-Agent不是手機設備。

不管如何，如果Google以普通版本網站的索引資料讓手機使用，很可能會發生手機使用者看不到Google所看到的資料，因為網站內容是兩種不同版本。

Googlebot-Mobile的作用除了抓取手機版本網站內容之外，還具有Skip Redirect for Smartphone-Optimized Pages功能，也就是手機看到的網址就是轉址後的網址，不需要再由普通版本的網址再進行轉址。

例如普通版本的網址是 http://www.yourwebsite.com

而手機版本的網址是 http://m.yourwebsite.com

手機搜尋到的網址就是直接後者，不需要再進行一次轉址。

所以代表的是 … 如果你的網站不是Mobile-Friendly (行動設備友善界面) 的話，很可能就會再這個行動元年缺席了。

我們在”搜尋引擎六大趨勢，你的搜尋引擎優化策略準備好了嗎?“就已經說過，以智慧型手機以及平板電腦的發展趨勢來看，很快的桌上電腦可能會逐漸萎縮，到時候肯定傳統搜尋市場會再變化，能夠主宰「行動搜詢」才算是最後贏家。

那麼應該如何才能符合「Mobile-Friendly」呢?  這篇”Making Websites Mobile Friendly“說明很清楚，必須注意三個問題:

(1)你的網站內容是否適合行動設備瀏覽? 也就是你必須瞭解你的目標群眾可能使用哪些行動設備，你必須瞭解這些行動設備可以瀏覽哪些格式的內容。

(2)你是否提供行動設備瀏覽的網址? 也就是你最好能夠讓行動用戶直接轉址到你的行動網址，例如 http://m.dns.com.tw 之類的網址。

(3)你的網站是否有Mobile Sitemap? 當行動網址區分出來之後，你最好讓搜尋引擎瞭解你的行動網站的所有連結。

所以網站越來越複雜了，不僅需要有適合桌上型電腦瀏覽的網站，還必須考慮適合行動設備瀏覽的網站，並且最好還必須區分為適合智慧型手機瀏覽的網站，以及適合平板電腦瀏覽的網站。

行動元年真的即將開啟了，你都準備好了嗎?