[筆記]解決Google Search Console的行動裝置可用性問題

Google行動裝置可用性
自從把Blog搬到WordPress後,Google網站管理員中的”行動裝置可用性”就一直顯示有錯誤,
然而用手機打開顯示錯誤的網址一切正常、和用電腦瀏覽並沒有什麼特別差異,
管理頁面亦顯示網站索引和Googlebot都能抓取網站內容,
想說會否伺服器太慢的關係,PageSpeed Insights測試結果卻是超過80分的”Good”,
比以前放在Pixnet還要快…..尤其目前這邊使用的主題Twenty Seventeen,
還是採用響應式設計(Responsive web design)、能適應不同裝置的佈景,
相較於以前還要跳到行動裝置專用頁面,怎麼看都是現在的網站可用性比較高啊…..

在”行動裝置可用性”頁面中顯示錯誤的主要有三點:
內容寬度超出螢幕顯示範圍, 可點選的元素之間距離太近, 使用不相容的外掛程式
分別為”內容寬度超出螢幕顯示範圍”、”可點選的元素之間距離太近”,
以及”使用不相容的外掛程式”;最後一點似乎肇因於有頁面嵌入Flash媒體,
改換其他格式就能通過檢查,不過”寬度超出範圍”和”元素距離太近”…..
我實在是想破頭也搞不懂該怎麼解決,因為在手機上看起來就是沒問題哪 “orz
所幸個人為了找答案有仔細閱讀Google官方的Search Console說明,
方才總算於”行動裝置相容性測試工具“一章找到解答:
…..
如果測試工具無法載入網頁使用的所有資源,就會顯示警告訊息。
這裡的資源指的是頁面所包含的外部資源,例如圖片、CSS 或指令碼檔案。
發生這種情況的可能原因如下:

‧資源未在合理的時間內載入完成。在這種情況下,請嘗試再執行一次測試。
如果還是發生同樣的問題,您可以考慮改由別處代管資源,
或是嘗試找出相關主機沒有回應的原因,並設法解決。

‧資源未出現在指定位置 (404 錯誤)。請修正資源網址。
‧未登入的使用者無法存取資源。由於測試工具是以匿名使用者身分存取網頁,
因此,請確保匿名使用者能存取該網頁的所有資源。

‧Robots.txt 檔案禁止 Googlebot 存取資源。
如果牽涉到的是重要資源 (如下所示),而且是屬於您自己網站上的資源,
建議您解除封鎖這些資源,讓 Googlebot 能順利存取。
如果是屬於其他網站上的資源,建議您與該網站的管理員聯絡,請對方解除封鎖。

解除封鎖重要資源
如果遭到封鎖的是重要資源,可能會嚴重影響 Google 對該頁面的解讀。
舉例來說,如果有一張大型圖片遭到封鎖,儘管頁面看似適合透過行動裝置瀏覽,
實際上卻可能不是如此;如果遭到封鎖的是 CSS 檔案,
則可能會導致網頁套用不正確的字型樣式 (例如字體太小,不適合在行動裝置上閱讀)。
這類情況會影響到行動裝置可用性得分和 Google 檢索您網頁的能力,
因此您必須確保 robots.txt 檔案不會禁止 Googlebot 存取重要資源,
並允許一般使用者存取重要資源。

…..
提交新文章後用Google模擬器預覽頁面,確實”Googlebot”和”訪客所看到”兩視窗總顯示不同,
google search console
還以為這是Googlebot為了提升效率才自動省略CSS和Javascript不爬,
看了解說才發現…..原來是因為網頁樣式檔全被封鎖、bot只能看到結構跑掉的網頁,
方才導致內容解讀會出現”內容寬度”與”元素距離”的問題 XD
雖然一個符合通用設計的網頁,做到”關閉所有樣式檔後仍能清楚越閱讀”乃是基本,
不過對像既然是Googlebot,那就無需為它考慮那麼多─想看CSS就看吧!

參考Kern Media的”How to Write a Robots.txt File…It’s an Art!“一文後,
個人便到後台著手修改Robot.txt內容,在保留原先Disallow部分的情況下,
額外新增加一些允許讀取樣式檔的規則:
Allow: /*.js*
Allow: /*.css*
Allow: /wp-content/*.js*
Allow: /wp-content/*.css*
Allow: /wp-includes/*.js*
Allow: /wp-includes/*.css*
Allow: /wp-content/plugins/*.css*
Allow: /wp-content/plugins/*.js*
Allow: /wp-content/plugins/*ajax*
Allow: /wp-content/themes/*.css*
Allow: /wp-content/themes/*.js*
Allow: /wp-content/themes/*ajax*
Allow: /wp-content/plugins/*/images/
Allow: /wp-content/uploads/
Disallow: /xmlrpc.php
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wp-content/plugins/
Disallow: /wp-content/themes/
Disallow: /wp-content/
Disallow: /client-portal/

修改完畢後回到Google網站管理員並於”robots.txt 測試工具”中提交新檔案,
幾分鐘後更新完成,再測試一次行動裝置可用性:
Google行動裝置可用性
雖然我無法控制的外部元件(例如Pinterest)仍拒絕存取,導致有”網頁載入問題”,
不過總算是成功通過檢查、顯示為”適合透過行動裝置瀏覽”了!
放行CSS、AJAX和JS檔後,Google模擬器也回到應有樣貌:
Google模擬器
使用Google Search Console這麼多年,我到現在才曉得兩邊可以看起來一樣 XD
以前在Pixnet沒有辦法自訂Robot.txt,別說放行被封鎖的樣式表,
整個Robot.txt炸掉一個多月也拿他沒辦法…..這次的經驗也真是個好教訓,
既然都搬到WordPress了,可不能再像以前一樣以為自己什麼都無法處裡,
上上下下到處都是可以自訂的地方,還得多加留意、努力學習了呢 ww

迴響: 2 則迴響

文章分類:電腦相關

標籤: , , , ,

在〈[筆記]解決Google Search Console的行動裝置可用性問題〉中有 2 則留言

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料