回應式網頁設計

回應式網頁設計 (RWD) 是一種設定,可讓伺服器一律向所有裝置發送相同的 HTML 程式碼,並透過 CSS 調整網頁在裝置上的呈現方式。如果所有 Googlebot 使用者代理程式均獲准檢索網頁及其資產 (CSS、JavaScript 和圖片),則 Google 的演算法應能自動偵測這項設定。

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

TL;DR

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

使用 meta name="viewport"

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

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

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

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

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

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

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

為什麼要使用回應式設計

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

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

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

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 檔案。

傳送您對下列選項的寶貴意見...

這個網頁