如何制做智能手機進行優化的網站（1）

發布時間：2017.01.13 瀏覽: 次

智能手機，Google支持三種配置：

1、采用響應性網頁設計的網站，也就是使用同一組網址在所有設備上顯示相應內容的網站，其中各網址會為所有設備提供相同的HTML，且僅使用CSS來調整網頁在設備上的呈現方式。這是Google推薦的配置。

2、通過同一組網址向所有設備動態提供相應內容的網站，但各網址會根據用戶代理是桌面設備還是移動設備而分別提供不同的HTML（和CSS）。

3、具有單獨的移動版網址和桌面版網址的網站。

下面我將介紹如何實現上述各種配置。

響應性網頁設計

采用這種設置（響應性網頁設計）時，服務器始終會向所有設備發送相同的HTML代碼，并且系統會通過CSS來更改網頁在使用媒體查詢的設備上的呈現方式。如果所有的Googlebot用戶代理都可以抓取網頁資源（CSS、JavaScript以及圖片），那么我們的算法應能自動檢測此設置。

對于智能手機，我們推薦使用以下CSS媒體查詢：@media only screen and (max-width: 640px) {...}

以上所示的最大寬度值640像素只是一個示例，而不是強制性的要求。我們的算法會尋找可合理預期的最大寬度值來指代智能手機屏幕分辨率，而且我們會嘗試監控典型的移動網站使用的值，以便將來對我們的算法進行相應的更新。

至于如何指定媒體查詢，Google支持相應標準允許的在代碼中使用使用媒體查詢的各種方式。每種實現方式都各有利弊，您可以選擇一種最適合您的網站和用戶的方式。一般來說，如果您的網站可以在最新版的瀏覽器（如 Google Chrome 瀏覽器或 Apple Mobile Safari）中運行，那么該網站就可以使用我們的算法。

為什么要使用響應性設計？

推薦使用響應性網頁設計是因為它有許多優勢：

1、針對同一份內容使用單一網址不僅可讓用戶更輕松地與該內容進行互動、分享并鏈接到該內容，而且有助于Google的算法為該內容分配索引屬性。

2、無需重定向即可將用戶定向到已針對設備進行優化的視圖，從而可縮短加載時間。此外，基于用戶代理的重定向不僅容易出錯，而且會使網站的用戶體驗大打折扣

3、為您的網站和Google的抓取工具節省資源。對于采用響應性網頁設計的網頁，任何Googlebot用戶代理只需抓取這些網頁一次（與使用不同的用戶代理時抓取多次的情況相反），即可檢索到相應內容。提高抓取效率可間接協助Google將更多的網站內容編入索引，并確保抓取的內容是最新的。

抓取要求：

請勿使用robots.txt或以其他方式阻止任何Googlebot抓取網頁資源（CSS、JavaScript以及圖片）。能夠完全訪問這些外部文件有助于我們的算法檢測網站的響應性網頁設計配置，并對其進行適當處理。

通過同一網址動態提供不同的HTML

采用這種設置（動態提供內容）時，服務器會根據請求相應網頁的用戶代理通過同一網址提供不同的HTML（和CSS）。采用這種設置時，網站針對移動用戶代理對HTML進行的更改不會立即生效（移動內容處于“隱藏”狀態），因此，我們建議服務器發送一個提示，以便要求針對智能手機的Googlebot也應抓取相應網頁，從而發現移動內容。此提示是使用Vary HTTP標頭實現的。

Vary HTTP標頭

Vary HTTP標頭具有非常重要且實用的作用：

1、它會向ISP和其他位置使用的緩存服務器表明：在決定是否通過緩存來提供網頁時它們應考慮用戶代理。如果您沒有使用Vary HTTP標頭，緩存可能會錯誤地向移動設備用戶提供桌面版HTML網頁的緩存（反之亦然）。

2、它有助于Googlebot更快速地發現針對移動設備進行優化的內容，這是因為有效的Vary HTTP標頭是我們可以用來抓取以下網址的信號之一：提供針對移動設備進行優化的內容的網址。

Vary HTTP標頭是服務器對請求做出的響應的一部分，如下所示：