針對其他裝置最佳化行動版網站搜尋引擎

平板電腦

思考如何設定專供行動裝置使用者瀏覽的網站時,一般都會考慮到使用平板電腦瀏覽網站的訪客。雖然我們並未針對平板電腦環境建議您如何設計出有利搜尋引擎的網站,但是我們在下面提供了一些訣竅,希望能幫助您架設滿足各類裝置 (電腦、智慧型手機和平板電腦) 使用者需求的網站。

回應式網頁設計

我們通常建議採用回應式網頁設計。換句話說,網站會向所有裝置提供相同的 HTML 程式碼,再以不同的 CSS 樣式規則調整網站介面,為電腦、智慧型手機和平板電腦提供最理想的操作環境。

如要在網站上使用回應式網頁設計,請在多款平板電腦上測試網站是否可以正常運作。畢竟平板電腦和智慧型手機一樣,有多種不同的尺寸和螢幕解析度。

裝置專用內容

網站可根據各種裝置傳回不同的網頁 (例如不同的 HTML、CSS 和 JavaScript)。系統可以使用同一個網址提供這些網頁 (亦即動態服務配置),也可以使用獨立的專屬網址來提供網頁。

如果您的網站針對電腦和智慧型手機的使用者提供不同網頁,但沒有專供平板電腦使用的網頁,以我們的經驗來看,平板電腦使用者通常會比較希望看到電腦版網站,而不是網站的智慧型手機版頁面。

如果您的網站有針對平板電腦最佳化的站點,那麼您可以參考以下指南設定網站:

  • 動態服務:如果採用這項配置,系統會根據使用者代理程式提供不同的 HTML (和 CSS),讓電腦、智慧型手機和平板電腦使用者可透過同一網址瀏覽網站。如同智慧型手機網站建議事項所述,我們強烈建議您使用 Vary HTTP 標頭
  • 獨立的平板電腦專用網址:在這種情況下,我們強烈建議您允許 Googlebot 檢索平板電腦網址,並在各平板電腦專用網址上使用 rel="canonical",以便將這些網址指向相對應的電腦版網址。

功能型手機

對於為智慧型手機使用者提供服務的網站,我們建議盡可能採用回應式網頁設計。然而,由於功能型手機沒有執行 CSS 媒體查詢的功能,因此網站管理員如果希望為功能型手機提供服務,就必須將網站設定為使用動態服務或獨立網址,以便向功能型手機提供內容。

我們也建議為所有支援功能型手機的網頁加入下方說明的 <link rel="alternate" media="handheld"> 標記。

本節將說明上述各項配置的實作方法。

動態服務

設定伺服器,使其採用向其他裝置顯示網頁的相同網址,動態提供針對功能型手機最佳化的內容;這個過程所使用的實作方法,與為智慧型手機提供服務的方法相同。伺服器應包含 Vary: User-Agent HTTP 回應標頭,而您在偵測使用者代理程式時也應留意相關常見問題。此外,請在網頁中加入以下標記:

<link rel="alternate" media="handheld" href="[current page URL]" />
    

獨立網址

網站管理員在透過不同的網址向電腦、智慧型手機和功能型手機使用者提供服務時,可以採用三種支援的配置。這些配置會使用先前介紹過的註解,建立針對功能型手機和智慧型手機最佳化的網站。

專用網址配置

這項配置的設定如下所示:

  • http://www.example.com/page-1 為電腦使用者提供服務
  • http://m.example.com/page-1 為智慧型手機使用者提供服務
  • http://phone.example.com/page-1 為功能型手機使用者提供服務

在這項配置中,我們建議加入下列註解,協助 Google 演算法瞭解以不同裝置為目標的同等網頁之間的關係:

www.example.com/page-1 中加入:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
    <link rel="alternate" media="handheld" href="http://phone.example.com/page-1" />
    

m.example.com/page-1 中加入:

<link rel="canonical" href="http://www.example.com/page-1" />
    

phone.example.com/page-1 中加入:

<link rel="canonical" href="http://www.example.com/page-1" />
    

電腦和行動裝置分別採用不同網址的配置

在這項配置中,網站會透過一個網址向電腦提供服務,並透過另一個網址向所有行動裝置 (即智慧型和功能型手機) 提供服務。例如:

  • http://www.example.com/page-1 為電腦使用者提供服務
  • http://m.example.com/page-1 為智慧型手機和功能型手機的使用者提供服務

在此案例中,http://www.example.com/page-1 中的註解為以下標記:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
    <link rel="alternate" media="handheld" href="http://m.example.com/page-1" />
    

m.example.com 網頁中加入以下標記:

<link rel="canonical" href="http://www.example.com/page-1" />
    

無論網頁的服務對象是功能型手機或智慧型手機,都必須包含 rel="canonical"

伺服器的回應中應包含 HTTP Vary: User-Agent 標頭。這個標頭會向網際網路快取和 Googlebot 發送資訊,表明伺服器回應可能會因不同的使用者代理程式而異,而 Googlebot 也會根據這項資訊進行檢索。

獨立功能型手機網址的配置

在這項配置中,網站會採用回應式網頁設計或動態服務,透過單一網址向電腦和智慧型手機提供服務,並透過另一個網址向功能型手機提供服務。例如:

  • http://www.example.com/page-1 為電腦和智慧型手機的使用者提供服務
  • http://m.example.com/page-1 為功能型手機使用者提供服務

在此案例中,http://www.example.com/page-1 中的註解為以下標記:

<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />
    

http://m.example.com/page-1 中的註解為以下標記:

<link rel="canonical" href="http://www.example.com/page-1" />
    

重新導向與 Vary HTTP 標頭

如果您的網站會自動將造訪電腦版網站的行動裝置訪客重新導向至行動版網站 (反之亦然),請務必將您的伺服器設定為包含 Vary HTTP 標頭

Sitemap

對於使用功能型手機 Sitemap 以及智慧型手機替代網址所適用的 Sitemap,我們的建議維持不變。