(Google 官方) 以回應式網頁設計優化自然搜尋

 

回應式設計能為所有裝置提供相同的程式碼，可根據螢幕尺寸調整呈現方式。

 

TL;DR

• 使用 meta name="viewport" 標記，指示瀏覽器如何調整內容。
• 前往我們的「Web 基礎知識」網站參閱更多相關文件。

使用 meta name="viewport"

如要向瀏覽器傳送資訊，告知網頁會配合所有裝置適時調整，請在文件的標題 加入中繼標記：

<metaname="viewport"content="width=device-width, initial-scale=1.0">

中繼檢視點標記能指示瀏覽器如何 配合裝置的寬度調整網頁大小和縮放比例。如果 未提供中繼檢視點元素，行動瀏覽器會預設 以電腦版螢幕的寬度來轉譯網頁 (雖然因裝置而異， 但一般約為 980px)。行動瀏覽器隨後會嘗試加大字體， 並且選擇將內容縮放至符合螢幕的大小，或者僅顯示 與螢幕大小相符的部分內容，讓內容更容易閱讀。

對使用者而言，這代表字體大小可能不一致， 且使用者可能需要輕觸兩下或使用雙指撥動縮放， 才能查看及使用內容。對 Google 而言，由於網頁要求 在行動裝置上進行這類互動，我們可能無法判斷網頁 是否適合行動裝置使用。

左邊為未指定中繼檢視點的網頁：行動瀏覽器因此按預設 採用電腦版網頁的寬度，並將網頁縮放至符合螢幕的大小， 導致內容難以閱讀。右邊為相同網頁，不過指定了 符合裝置寬度的中繼檢視點：行動瀏覽器不會縮放網頁， 內容也容易閱讀。

如需使用回應式圖片，請加入 <picture> 元素。

一般而言，如果您的網站可以在新型瀏覽器 (例如 Google Chrome 或 Apple Mobile Safari) 中運作，那麼該網站就可以使用我們的演算法。

為什麼要使用回應式設計

我們建議您使用回應式網頁設計的原因如下：

• 使用者可以使用單一網址，以更輕鬆的方式分享及連結到您的內容。
• 可協助 Google 的演算法為網頁正確指定索引編列屬性， 不需要發送訊息指明既有的相對應電腦版/行動版網頁。
• 無需維護多個內容相同的網頁，減少工程師的處理時間。
• 降低行動版網站發生常見錯誤的機率。
• 使用者無需重新導向即可瀏覽最適合裝置大小的畫面， 縮短載入時間。此外，根據使用者代理程式執行重新導向容易出錯， 可能導致網站的使用體驗大打折扣 (詳情請參閱 「偵測使用者代理程式時遇到的問題」一節)。
• Googlebot 檢索您的網站時可節省資源。 對於採用回應式網頁設計的網頁， 任何 Googlebot 使用者代理程式只要檢索這些網頁一次 (不需依據不同的使用者代理程式多次反覆檢索)， 即可擷取所有版本的內容。提高檢索效率可間接協助 Google 為網站中的更多內容建立索引，並確保擷取的內容是 最新版本。

如果您有興趣進一步瞭解回應式網頁設計，可先前往網站管理員中心參考 我們的網誌文章，以及造訪網頁基礎知識網站。

重要事項：<span="">請勿使用 robots.txt 或以其他方式阻止 Googlebot 檢索任何網頁資產 (CSS、JavaScript 和圖片)。如果能完全存取這些外部檔案， 我們的演算法將能快速偵測您網站的回應式網頁設計配置， 並進行適當處理。注意：請造訪常見錯誤一節，確保其中列出的錯誤不會發生。

JavaScript

建立適合行動裝置瀏覽的網站時，您必須仔細思考 如何使用 JavaScript 調整網站在不同裝置上的呈現方式 和行為。JavaScript 的典型用法包括自動判定應在網頁中 顯示何種廣告或哪一種解析度的圖片。

本節說明 JavaScript 的不同使用方法，以及這些方法與 Google 建議使用的回應式網頁設計之間的關係。

常見配置

建立適合行動裝置使用的網站時，三種常見的 JavaScript 實作方法如下：

• 適應性 JavaScript：在這項配置中，網址會向所有裝置提供相同的 HTML、CSS 和 JavaScript 內容。在裝置上執行 JavaScript 時， 網站的呈現方式或行為會發生變化。如果網站需要 使用 JavaScript，那麼 Google 建議您使用此配置。.
• 聯合偵測：在這個實作方法中，網站會同時使用 JavaScript 和裝置功能的伺服器端偵測來向不同的裝置 提供不同的內容。
• 動態提供的 JavaScript：在這項配置中，網站會向所有裝置 提供相同的 HTML，但會透過相關網址來提供 JavaScript (會根據裝置的使用者代理程式動態提供不同的 JavaScript 程式碼)。

下文將詳細說明這些配置。

適應性 JavaScript

在這項配置中，網址會向所有裝置提供相同的內容 (HTML、CSS、JavaScript 和圖片)。只有在裝置上執行 JavaScript 時，網站的呈現方式或行為 才會發生改變。這與使用 CSS 媒體查詢的回應式網頁設計具有 類似原理。

例如，假設網頁向所有裝置提供相同的 HTML (其中包括 <script> 元素)， 用以要求提供 JavaScript 的外部網址。所有要求 JavaScript 網址的裝置 都會接收到相同的程式碼。執行時，JavaScript 會偵測裝置 並對網頁進行部分調整，例如加上專為智慧型手機最佳化的 圖片或廣告代碼，而非針對電腦最佳化的 內容。

這項配置與回應式網頁設計緊密相關，我們的演算法可以 自動偵測這項設定。此外，這項配置不需要使用 Vary HTTP 標頭，因為網頁及其資產的網址 不會動態提供內容。鑒於上述優勢， 如果您的網站需要使用 JavaScript，則建議您使用 這項配置。

聯合偵測

聯合偵測設定可讓伺服器與 JavaScript 在用戶端 配合執行，以便偵測裝置的功能並調整 提供的內容。

例如，假設某個網站可根據裝置是電腦或智慧型手機 改變內容的呈現方式。在此例中，網站可以加入 用於偵測螢幕尺寸的 JavaScript，然後將偵測到的數據傳送給伺服器， 由伺服器對要發送給裝置的程式碼進行更新或更改。通常， JavaScript 會將偵測到的裝置功能儲存在 Cookie 中， 供伺服器用來讀取來自同一台裝置的後續造訪。

由於伺服器會向不同的使用者代理程式回傳不同的 HTML， 因此聯合偵測應視為一種動態服務配置。詳情請參閱 動態服務一節。簡而言之，如果網址需要 向不同的使用者代理程式提供不同的 HTML 內容， 網站中必須加上「Vary: User-agent」HTTP 回應標頭。

動態提供的 JavaScript

在這項配置中，伺服器會向所有裝置提供相同的 HTML， 其中包括 <script> 元素。該元素是用於新增外部 JavaScript 檔案， 這個檔案的內容則根據發出要求的使用者代理程式而有所差異。也就是說， JavaScript 程式碼是動態提供的。

在這種情況下，我們建議您向 JavaScript 檔案提供「Vary: User-agent」 HTTP 標頭。這個標頭會向網際網路快取和 Googlebot 表明，JavaScript 可能會 因不同的使用者代理程式而異，而此標頭是供 Googlebot 使用不同的 Googlebot 使用者代理程式檢索 JavaScript 檔案的指標。