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

平板電腦

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

回應式網頁設計

我們通常建議採用回應式網頁設計。換句話說,網站會向所有裝置 提供相同的 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" />

重新導向和 HTTP Vary 標頭

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

Sitemap

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

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

這個網頁