移動設計備忘單：響應式設計、動態服務和移動網站

編輯更新（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 的網站站長移動指南