常見錯誤

本頁將說明網站管理員設計行動版網站時最常發生的一些錯誤。

JavaScript、CSS 和圖片檔案遭到封鎖

為了讓您的網站以最理想的方式呈現,同時順利編入我們的索引目錄,請一律允許 Googlebot 存取您網站使用的 JavaScript、CSS 和圖片檔案,讓 Googlebot 能夠像一般使用者一樣看到相同的網站內容。如果您網站的 robots.txt 檔案禁止檢索這些資源,我們的演算法將首當其衝,因而無法有效地轉譯您的內容並將其編入索引,連帶導致您的網站排名降低。

  1. 使用 Search Console 中的網址檢查工具,確保 Googlebot 能夠檢索您的 JavaScript、CSS 和圖片檔。這項工具可讓您瞭解 Googlebot 所看到的內容,以及其如何呈現您的內容,也能夠協助您找出網站上存在的許多索引問題並進行修正。

  2. 透過 Search Console 檢查及測試您的 robots.txt

  3. 透過行動裝置相容性測試對您的行動版網頁進行測試,讓我們的系統判斷您的網站是否適合行動裝置使用者瀏覽。

  4. 如果您的行動版網頁使用獨立網址,請務必對行動版和電腦版網址都進行測試,以便確認 Google 可以識別並檢索相關重新導向。

無法播放的內容

有些類型的影片或內容無法在行動裝置上播放,例如 具有授權限制的媒體,或是需要安裝 Flash 或一般行動裝置 不支援的播放器才能呈現的內容。網站的任何網頁上只要有無法播放的內容,就會讓使用者感到不快。

如果使用者瀏覽的網頁上含有行動裝置不支援的內容,使用者將看到類似下方的錯誤訊息:

影片無法播放

這會讓行動裝置使用者感到十分不悅!

我們建議您使用 HTML5 標準標記來加入影片或動畫,而不是使用特殊的影片播放器或是不受支援的格式來提供內容。

對於動畫內容,請使用支援所有網路瀏覽器的 HTML5 動畫。Google Web Designer 可幫助您輕鬆使用 HTML5 建立這類動畫。

  • 使用 HTML5 動畫標準,為所有使用者提供優質體驗。
  • 使用可在所有裝置上播放的影片嵌入內容。
  • 請考慮提供影片字幕記錄,讓使用輔助瀏覽技術或是無法觀看特殊影片格式的使用者也能瞭解您的網站內容。

如需詳細資訊,請參閱 Google Web Fundamentals 中的影片最佳做法

重新導向錯誤

如果您有專門的行動版網址,建議您將行動裝置使用者從各個電腦版網址重新導向到相應的行動版網址。重新導向到其他網頁 (例如一律重新導向首頁) 是錯誤的行為。

範例:

  • 設定電腦版網站伺服器,無論行動裝置使用者原本要求哪個網址,均一律將其重新導向至行動版網站的首頁,即使行動版網站擁有與重新導向的電腦版網頁內容相應的網頁亦然。
  • 電腦版網站的網址是透過動態方式產生,其中包含的網址參數無法正確對應到對等的行動版網址。舉例來說,假如使用者造訪電腦版網站查詢特定日期的火車時刻表,卻被重新導向至行動版網站上的普通時刻表搜尋頁面,可能會對此感到不悅。如果您有對等的行動版網址,建議您正確設定重新導向,以便使用者直接前往要查看的網頁。

  • 電腦版網站只針對部分行動裝置進行重新導向。例如,網站可能只會將 Android 使用者重新導向至行動版網站,而沒有為 iPhone 或 Windows Phone 使用者進行重新導向。

  • 使用 Search Console。如果您是經過驗證的使用者,且 Google 偵測到您的網站上存在將智慧型手機使用者重新導向到首頁的網頁,我們就會傳送訊息給您。

  • 設定伺服器,將智慧型手機使用者重新導向至行動版網站上相對應的網址。

  • 如果您網站上的網頁沒有相對應的行動版網頁,請讓使用者停留在原本的電腦版網頁上,而不要重新導向至行動版首頁。在這種情況下,不做總比做錯好。

  • 嘗試使用回應式網頁設計,為電腦使用者和智慧型手機使用者提供相同的內容。

只有行動裝置上顯示 404 錯誤

對於某些網站而言,當使用者存取某個網址時,可以在電腦上看到正確的網頁內容,但在行動裝置上卻會看到錯誤的內容。

只有行動裝置上顯示 404 錯誤

如果您偵測到使用者透過行動裝置造訪電腦版網頁,且適合行動裝置瀏覽的相對應網頁位於不同網址時,請將使用者重新導向至 404 網頁或 Soft 404 網頁。此外,請確認適用於行動裝置的網頁本身並非錯誤網頁。

正確重新導向
  • 使用 Search Console。如果您是經過驗證的網站使用者,我們會透過訊息中心傳送通知給您。

  • 如果您使用另外的網址建立了行動版網站,請對伺服器進行設定,將智慧型手機使用者重新導向到行動版網站上相對應的網址。

  • 如果您選擇動態提供內容,請務必正確設定偵測使用者代理程式的配置方式

  • 如果您網站上的網頁沒有相對應的智慧型手機版網頁,請讓使用者停留在電腦版網頁上。讓使用者看到自己所尋找的內容,總比向他們顯示錯誤訊息要好得多了。

  • 儘可能使用回應式網頁設計。這種配置可讓您為各種裝置的使用者提供相同的內容。

避免使用插頁式廣告

許多網站都會顯示插頁廣告或重疊畫面,造成使用者在瀏覽網頁時,有局部或全部內容被遮住。一般而言,這些插頁廣告的目的是為了向行動裝置使用者宣傳該網站的自家應用程式、郵寄清單申請表或廣告,但也同時帶來了不良的使用體驗。最糟的情況甚至會有設計不良的插頁廣告讓使用者難以關閉,因而不便查看網頁上的實際內容。由於行動裝置的螢幕空間有限,因此無論何種插頁廣告,都會造成負面的使用體驗。

應用程式下載插頁廣告

許多網站管理員會在行動版網站上向訪客宣傳自家企業的原生應用程式。如果在宣傳時不夠謹慎,可能會導致索引問題,或是在訪客使用網站時造成不少困擾。

避免使用插頁式廣告
插頁廣告阻止使用者完成工作。
應用程式橫幅廣告
橫幅讓使用者順利完成工作,同時達到宣傳應用程式的目的。
  • 使用嵌入網頁內容的簡單橫幅廣告來宣傳應用程式。您可以透過下列方式實作橫幅廣告:

如果網站需要使用個別行動版網址向使用者提供服務,常見的做法之一就是提供指向電腦最佳化版本網頁的連結,並且在電腦版網頁上提供指向行動版網頁的連結。這種做法時常發生的錯誤是將連結指向不相關的網頁,例如行動版網頁的連結指向電腦版網站的首頁。

  • 檢查您的連結,確保各個連結指向正確的對應網頁。

行動網頁載入速度緩慢

請務必設法讓您的行動版網站能快速載入,這點相當重要。如果使用者必須等待很長的時間才能看到網站內容,可能會造成他們的不悅。

使用 Google PageSpeed Insights (尤其是「速度」的子區段) 找出網頁上可能導致載入速度變慢的問題,然後儘可能解決標記為「必須修正」的問題。

如需詳細資訊,請參閱:

正確設定檢視點

由於網站訪客使用的裝置各異且螢幕大小也各有不同,因此您必須使用檢視點中繼標記為網頁指定檢視點。這個標記可以指示瀏覽器如何調整網頁的大小,並且配合裝置縮放網頁。以下是兩個常見問題:

  • 使用固定寬度檢視點。這會讓網頁無法根據裝置尺寸 (現在越來越多樣化了) 調整大小。瞭解詳情
  • 設定不切實際的最小寬度檢視點,導致小型裝置使用者必須橫向捲動才能瀏覽網頁內容。如果網頁在 CSS 宣告中使用了絕對值,或者使用需特定瀏覽器寬度 (例如 980 像素) 才能達到最佳顯示效果的圖片,就會發生這種情況。如要修正這個錯誤,請務必確認網頁在 CSS 元素上使用相對寬度和位置值,且圖片可以縮放。瞭解詳情

小字型

避免設定太小的字型,導致網頁內容在行動裝置上不易辨識,迫使訪客必須「以雙指撥動縮放」才能看清楚。請先指定網頁的檢視點,然後為檢視點中的字型大小設定適當的值。如要瞭解更多關於字型的最佳做法,請參閱使用 易讀的字型大小

觸控元素距離太近

避免讓觸控元素 (例如按鈕和連結) 之間的距離太近,導致行動裝置使用者在使用手指輕觸要選取的元素時,會同時輕觸到鄰近的元素。如要修正這些錯誤,請務必將按鈕和連結調整為適合行動裝置訪客使用的大小和間隔。詳情請參閱適當調整輕觸目標的大小

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

這個網頁