行動版網站和行動版內容優先索引系統的最佳做法

Google 是以智慧型手機代理程式檢索過的行動版網站內容做為建立索引和排名的依據。這就是所謂的行動版內容優先索引系統。

雖然您不必提供行動版網頁也能在 Google 搜尋結果中顯示內容，我們仍強烈建議建立行動版網頁。 這些最佳做法通常適用於行動版網站，就定義來說，是適用於行動版內容優先索引系統。

為了確保您的使用者能獲得最佳體驗，請採用本指南詳細介紹的最佳做法。

建立適合透過行動裝置瀏覽的網站

如果尚未建立適合透過行動裝置瀏覽的網站，建議您開始著手建立，讓使用行動裝置造訪您網站的使用者能夠享有流暢的瀏覽體驗。下列三種設定選項可供您建立適合透過行動裝置瀏覽的網站：

  • 回應式網頁設計：讓網頁不受使用者的裝置影響 (例如電腦、平板電腦、行動裝置、非視覺瀏覽器)，可在同樣的網址上提供相同的 HTML 程式碼，卻又能根據螢幕尺寸，以不同的方式轉譯顯示內容。Google 建議使用回應式網頁設計，因為這是最容易實作和維護的設計樣式。
  • 動態提供內容：無論使用者透過何種裝置瀏覽網頁，該網頁一律使用相同的網址。這項設定需要探查式 user-agent和 Vary: user-agent HTTP 回應標頭，才能為各種裝置提供不同的 HTML 版本。
  • 獨立網址：為每個裝置提供不同的 HTML，並對不同網址提供不同的 HTML。如同動態服務，這項設定需要使用 user-agent 和 Vary HTTP 標頭，才能將使用者重新導向至裝置適用的網站版本。

本指南的內容僅適用於動態提供內容和獨立的網址設定。在回應式設計中，行動版和電腦版網頁的內容和中繼資料都相同。

確認 Google 可存取及轉譯您的內容

請確認 Google 可以存取及轉譯您的行動版網頁內容和資源。

  • 在行動版和電腦版網站上使用相同的 robots meta 標記。 如果您在行動版網站上使用不同的 robots meta 標記，尤其是 noindex 或 nofollow，那麼當網站啟用行動版內容優先索引系統後，Google 可能會無法檢索網頁和建立索引。
  • 請勿仰賴使用者互動來延遲載入主要內容。如果內容必須在使用者進行互動 (例如滑動、點選或輸入) 後才能載入，Google 就不會載入這些內容。請確認 Google 可以查看延遲載入的內容。
  • 允許 Google 檢索您的資源。有些資源會在行動版網站和電腦版網站上使用不同的網址。如要讓 Google 檢索網址，請勿使用 disallow 規則封鎖網址。

確認行動版網站的內容與電腦版網站相同

儘管電腦版和行動版網頁的內容相同，只要兩者的 DOM 或版面配置不一樣，就可能導致 Google 對於內容的理解有所出入。不過，在電腦版和行動版中使用相同內容，可以確保兩種版本都能對相同關鍵字進行排名。

  • 確認行動版和電腦版網站含有同樣的內容。如果您的行動版網站提供的內容比電腦版網站少，請考慮更新行動版網站，提供和電腦版網站等量的主要內容，您可以為行動裝置設計不同的設計，讓使用者能獲得最佳體驗 (例如將內容移至適當的折疊頁面或分頁)；只要確保網站上的內容都和電腦版網站相同即可，因為網站索引都來自行動版網站。
  • 比照電腦版網站的做法，在行動版網站上使用同樣明確而有意義的標頭。

檢查結構化資料

如果您的網站有結構化資料，則必須確保兩個版本的網站都納入這份資料。以下是需要檢查的一些具體事項：

  • 確認行動版和電腦版網站含有相同的結構化資料。 如果您必須確定要優先加入行動版網站的內容類型，請先使用 Breadcrumb、Product 和 VideoObject 結構化資料。
  • 在結構化資料中使用正確的網址，並確認行動版網站結構化資料中的網址已更新為行動版網址。
  • 如果您使用資料螢光筆，請在行動版網站上訓練這項工具。使用資料螢光筆提供結構化資料後，請定期檢查資料螢光筆資訊主頁是否顯示擷取錯誤。

在行動版和電腦版網站加入相同的中繼資料

請確保行動版和電腦版網站上的 title元素和中繼說明保持一致。

檢查廣告刊登位置

別讓廣告對您的行動版網頁排名造成負面影響。在行動裝置上顯示廣告時，請遵循廣告體驗提升標準。舉例來說，如果在行動裝置上，網頁頂端廣告占用太多畫面，對使用者體驗就會造成負面影響。

檢查影像內容

檢查圖片

請確認行動版網站上的圖片符合圖片最佳做法。我們特別建議採取以下做法：

  • 提供高畫質圖片。請勿在行動版網站上使用尺寸太小或解析度較低的圖片。
  • 採用支援的圖片格式。請勿使用系統不支援的格式或標記。舉例來說，雖然 Goolge 支援可擴充向量圖形 (SVG) 格式的圖片，但如果 .jpg 圖片放在內嵌 SVG 中的 <image> 標記內，我們的系統就無法為其建立索引。
  • 請勿使用每次網頁載入圖片時都會變更的網址。如果您的資源使用會不斷改變的網址，Google 便無法妥善處理您的資源及建立相關索引。
  • 確認行動版和電腦版網站上的圖片有相同的替代文字。請比照電腦版網站的做法，為行動版網站上的圖片提供描述性替代文字。
  • 確認行動版網頁擁有和電腦版網頁同樣優質的內容。 比照電腦版網站的做法，在行動版網站上使用與圖片相關的相同描述性標題、說明文字、檔案名稱和其他文字。

檢查影片

請確認行動版網站上的影片符合影片最佳做法。我們特別建議採取以下做法：

  • 請勿使用每次網頁載入影片時都會變更的網址。 如果您的資源使用會不斷改變的網址，Google 便無法妥善處理您的資源及建立相關索引。
  • 採用支援的影片格式，並將影片放在支援的標記中。系統會透過 <video>、<embed> 或 <object> 等 HTML 標記來識別網頁上的影片。
  • 在行動版和電腦版網站上使用相同的影片結構化資料。詳情請參閱檢查結構化資料一節。
  • 將影片置於網頁上的顯眼位置，讓使用者透過行動裝置瀏覽網頁時能輕鬆找到影片。舉例來說，如果使用者必須在行動版網頁向下捲動很久才能找到影片，就可能導致影片排名降低。

獨立網址的其他最佳做法

如果您網站的電腦版和行動版網頁 (後者又稱為 m. 網頁) 有各自獨立的網址，建議您另外採用下列最佳做法：

  • 確認電腦版和行動版網站的錯誤網頁狀態一致。如果某個網頁在電腦版網站上提供正常內容，在行動版網站中卻顯示錯誤網頁，那麼這個網頁就無法編入索引。
  • 確認行動版網頁中沒有網址片段。所謂的片段網址，就是指網址最末端以 # 為開頭的部分。在大部分情況下，系統無法為網址片段建立索引；當您的網域啟用行動版內容優先索引系統後，含有這類網址的網頁將不會出現在索引中。
  • 確認提供各種不同內容的電腦版網頁都有對應的行動版網頁。如果多個不同網址在行動裝置上會重新導向至同一網址 (例如首頁)，當網域啟用行動版內容優先索引系統後，這些網頁都無法編入索引。
  • 在 Search Console 驗證電腦版和行動版網站，確保您能夠存取這兩個版本的資料和訊息。因為 Google 將網站轉移至行動版內容優先索引系統時，網站可能會發生資料異動。

  • 檢查個別網址的 hreflang 連結。如果您使用 rel=hreflang link 元素來提供國際版網站，請分別為行動版和電腦版網址建立連結。行動版網址的 hreflang 必須指向行動版網址，電腦版網址的 hreflang 也必須指向電腦版網址。

    在以下 hreflang 示例中，網站首頁為行動版和電腦版提供了不同網址。

    行動版

    在本示例中，行動版網站的網址是 https://m.example.com/。

    <link rel="canonical" href="https://example.com/">
<link rel="alternate" hreflang="es" href="https://m.example.com/es/">
<link rel="alternate" hreflang="fr" href="https://m.example.com/fr/">
<link rel="alternate" hreflang="de" href="https://m.example.com/de/">
<link rel="alternate" hreflang="th" href="https://m.example.com/th/">

    電腦版

    在本示例中，電腦版網站的網址是 https://example.com/。

    <link rel="canonical" href="https://example.com/">
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/">
<link rel="alternate" hreflang="es" href="https://example.com/es/">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/">
<link rel="alternate" hreflang="de" href="https://example.com/de/">
<link rel="alternate" hreflang="th" href="https://example.com/th/">
  • Google 對行動版網站的檢索頻率可能會增加，因此請確保行動版網站有能力應對這個情況。
  • 確認行動版和電腦版網站的 robots.txt 規則都能如預期般運作。您可以透過 robots.txt 檔案指定要讓 Google 檢索網站的哪些部分。在大部分情況下，請在行動版和電腦版網站上使用同樣的 robots.txt 規則。

  • 在行動版和電腦版網站之間使用正確的 rel=canonical 和 rel=alternate link 元素。電腦版網址一律為標準網址，而行動版網址則是該網址的替代網址。

    以下是個別網址網站設定的 rel=canonical 和 rel=alternate 示例。

    行動版

    在本示例中，行動版網站的網址是 https://m.example.com/ 且包含 link 元素，指向電腦版網址做為標準網址。

    <link rel="canonical" href="https://example.com/">

    電腦版

    在本示例中，電腦版網站的網址是 https://example.com/，其中含有 link 元素，指向自己做為標準網址，後面接著另一個 link 元素，指向行動版網址做為此網址的替代版本。

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

疑難排解

以下清單將列出最常見的錯誤，這些錯誤可能導致網站無法啟用行動版內容優先索引系統，或者在網站啟用行動版內容優先索引系統後造成排名下降。如果您的網站尚未啟用行動版內容優先索引系統、您在網站啟用行動版內容優先索引系統後發現排名下降，或者您在 Search Console 中收到訊息，請查看常見錯誤清單，並解決您可能遇到的錯誤：

錯誤

缺少結構化資料

 問題發生原因：行動版網頁缺少電腦版網頁的部分結構化資料標記。

修正問題

  1. 確認行動版和電腦版網站都有結構化資料。
  2. 確認行動版和電腦版網站含有相同的結構化資料。
  3. 在結構化資料中使用正確的網址，並確認行動版網站結構化資料中的網址已更新為正確網址。
  4. 檢查結構化資料的擷取錯誤。使用資料螢光筆提供結構化資料後，請定期檢查資料螢光筆資訊主頁是否顯示擷取錯誤。
  5. 使用網址檢查工具，確認可在轉譯頁面 (Google 所見頁面) 中看見該內容。

網頁有 noindex 標記

 問題發生原因：系統因 noindex 標記無法為行動版網頁建立索引。

修正問題： 在行動版和電腦版網站上使用相同的 robots meta 標記。請勿在行動版網頁上使用 noindex 標記，因為當網站啟用行動版內容優先索引系統後，Google 不會為擁有該標記的網頁建立索引。

缺少圖片

 問題發生原因：行動版網頁並未包含電腦版網頁的所有重要圖片。

修正問題

  1. 確認行動版和電腦版網站含有同樣的內容。如果您的行動版網站並未包含所有電腦版網站內容，請考慮更新行動版網站，以便提供和電腦版網站相同的主要內容。系統只會利用行動版網站上顯示的內容建立索引。
  2. 在行動版和電腦版網站上使用相同的 robots meta 標記。請勿在行動版網頁上使用 nofollow 標記，因為當網站啟用行動版內容優先索引系統後，Google 不會在擁有該標記的網頁上檢索圖片，也不會為其建立索引。
  3. 使用支援的圖片格式和標記。舉例來說，雖然 Goolge 支援可擴充向量圖形 (SVG) 格式的圖片，但如果 .jpg 圖片放在內嵌 SVG 中的 <image> 標記內，我們的系統就無法為其建立索引。
  4. 請勿仰賴使用者互動來延遲載入主要內容。如果內容必須在使用者進行互動 (例如滑動、點選或輸入) 後才能載入，Google 就不會載入這些內容。請確認 Google 可以查看延遲載入的內容。

圖片遭到封鎖

 問題發生原因：行動版網頁上的重要圖片已遭 robots.txt 封鎖。

修正問題：允許 Google 檢索您的資源。有些圖片會在行動版網站和電腦版網站上使用不同網址，如要讓 Google 檢索您的網址，請勿使用 disallow 規則封鎖網址。

圖片畫質不佳

 問題發生原因：行動版網頁上的重要圖片尺寸太小或解析度太低。

修正問題：提供高畫質圖片。請勿在行動版網站上使用尺寸太小或解析度較低的圖片。

缺少替代文字

 問題發生原因：行動版網頁上的重要圖片缺少替代文字。

修正問題：比照電腦版網站的做法，在行動版網站上針對圖片使用同樣的替代文字。

缺少網頁標題

 問題發生原因：行動版網頁缺少標題。

修正問題：確認行動版和電腦版網站上的標題和中繼說明皆為一致。

缺少中繼說明

 問題發生原因：某個行動版網頁缺少中繼說明。

修正問題：確認行動版和電腦版網站上的標題和中繼說明皆為一致。

行動網址顯示的是錯誤網頁

 問題發生原因：行動版網頁顯示的是錯誤網頁。

修正問題：確認電腦版網站與行動版網站的錯誤網頁狀態相同。如果某個網頁在電腦版網站上提供正常內容，在行動版網站中卻顯示錯誤網頁，那麼這個網頁就無法編入索引。

行動網址含有錨定標記片段

 問題發生原因：行動網址包含錨定標記片段；Google 無法為內含片段的網址建立索引。

修正問題：確認行動版網頁不含片段網址。在大部分情況下，系統都無法為網址片段建立索引，且在網域啟用行動版內容優先索引系統後，含有這類網址的網頁將無法編入索引。

行動版網頁遭到 robots.txt 封鎖

 問題發生原因：行動版網頁已遭 robots.txt 規則封鎖。

修正問題：確認行動版和電腦版網站的 robots.txt 規則和 robots meta 標記都能如您預期般運作。請在這兩種版本的網站上使用相同 robots.txt 規則。

重複的行動版網頁目標

 問題發生原因：多個電腦版網頁重新導向至相同的行動版網頁。

修正問題：確認提供不同內容的電腦版網頁都有相符的行動版本。如果多個不同網址在行動裝置上重新導向至同一網址，當網域啟用行動版內容優先索引系統後，這些網頁都無法編入索引。

電腦版網站重新導向至行動版首頁

 問題發生原因：電腦版網站的多數或所有網頁皆重新導向至行動版網站首頁。

修正問題：確認電腦版網頁有對等的行動版本。如果多個不同網址在行動裝置上重新導向至行動版首頁，當網域改用行動版內容優先索引系統後，這些網頁都無法編入索引。

網頁品質問題

 問題發生原因：行動版網頁有關於廣告、內容缺漏、標題或網頁圖片描述性元素的問題。

修正問題：

  1. 別讓廣告對您的行動版網頁排名造成負面影響。在行動裝置上顯示廣告時，請遵循廣告體驗提升標準。
  2. 確認行動版和電腦版網站含有同樣的內容。如果您的行動版網站並未包含所有電腦版網站內容，請考慮更新行動版網站，以便提供和電腦版網站相同的主要內容。系統只會利用行動版網站上顯示的內容建立索引。
  3. 務必比照電腦版網站的做法，在行動版網站上使用既明確又有意義的相同標頭。
  4. 在行動版網站上使用與圖片相關的標題、說明文字、檔案名稱和其他文字，這些內容應與電腦版網站相同。

影片問題

 問題發生原因：行動版網頁上的影片採用不支援的格式、位於難以找到的位置、缺少中繼說明或載入速度緩慢。

修正問題：

  1. 使用支援的影片格式，並將影片放在支援的標記中。系統會透過 <video>、<embed> 或 <object> 等 HTML 標記來識別網頁上的影片。
  2. 請勿仰賴使用者互動來延遲載入主要內容。如果內容必須在使用者進行互動 (例如滑動、點選或輸入) 後才能載入，Google 就不會載入這些內容。請確保 Google 可以查看延遲載入的內容。
  3. 將影片置於使用者容易在行動版網站上找到的位置。舉例來說，如果使用者必須在行動版網頁向下捲動很久才能找到影片，就可能導致影片排名降低。

主機負載問題

 問題發生原因：部分主機的主機負載不足。

修正問題：Google 對行動版網站的檢索頻率可能會增加，因此請確保行動版網站有能力應對這個情況。