Blogger 處理行動版時的各種疑難雜症﹍FAQ 整理

在「Lazy Load 圖片延遲載入 」留言 #6，+Ala Go 提出了一個觀點：「我的行動版即使使用"網頁版"，載入也頗快的，就用"網頁版"頂著先」。

根據與他的一系列對話，以及其他讀者的相關提問，覺得可以將處理 Blogger 行動版時，各種可能的狀況與疑問整理一下，做成一篇 FAQ 問答，查閱起來比較方便。

(圖片出處: pixabay.com)

Q1：是否可以使用網頁版當作行動版？

這的確是部分 Blogger 站長的選項，且 WFU 也遇過要求先用網頁版官網充當行動版網站的案子，主要是預算考量，待流量上升後再製作行動版。

不過 Google 已經調整了搜尋演算法，這樣的做法會讓搜尋結果受到不好的影響。同時，拿網頁版充當行動版，還有很多不良的後果，需要審慎考慮這件事。

會關閉行動版的 Blogger 站長，通常是使用了自適應(RWD)範本，才能讓網頁在行動裝置正常顯示，且可通過 Google 的行動裝置測試。

另外需要提醒的是，也許我們自己的手機硬體效能不錯，所以覺得就算使用網頁版，在手機載入的速度也頗快。然而一方面可能是常瀏覽的網站有被快取(cache)，一方面不是每個訪客的手機硬體都是最新的規格，因此很可能忽略了其他人手機開啟網頁的速度。

Q2：Google 調整演算法的影響？

可參考官方發佈的消息「Rolling out the mobile-friendly update」，這次的演算法主要針對行動搜尋，首先要確認我們的網站是否通過了 Google 的「行動裝置相容性測試」，可到這個網址進行測試：

• https://www.google.com/webmasters/tools/mobile-friendly/

如果沒有在 Blogger 後台關閉行動版的話，那麼絕對能通過測試沒有問題。若是關閉了行動版、又沒使用 RWD 範本，自然不會通過測試，那麼行動搜尋的結果就會很糟，進而影響行動裝置的流量。

Q3：網頁版充當行動版不良的後果？

除了影響行動搜尋的結果，首先我們來看一下「行動裝置相容性測試」失敗的 "模擬畫面"：



如上圖紅框，關閉行動版會造成的影響就是 Google 標示的這其中兩點：

• 文字太小，不易閱讀
• 連結之間距離太近

很顯然這些都是基於「使用者友善的閱讀體驗」考量，為了讓訪客易於操作、閱覽我們的行動版網站頁面，開啟 Blogger 行動版是 Google 鼓勵並推動的方向。

Q4：使用行動範本，內文無法正常顯示？

Ala 另外還表示：「官方行動範本/自訂，都 ... 太簡潔/無法正常顯示（內文也沒出來），令人一度很困擾」。過去 WFU 使用官方行動範本時，也常出現這樣的情形。

由於本站分享大量的工具及程式碼，自然常常在文章中穿插許多 js code。我的經驗是，某些 js 的確會讓官方行動範本處理時出錯，導致內容全部消失。

但是哪些 js 會出錯、哪些不會出錯，很難給個 SOP 式的答案。如果讀者也出現類似情形的話，我也只能給予跟 Ala 一樣的答案：「在內容消失的區塊範圍，逐一清除 js 進行 debug，來找出哪個 js 是罪魁禍首」。

Q5：行動版如何 debug 有問題的 js？

喜歡修改範本的讀者，一定在範本中裝了不少 js 工具，說不定有些不用後沒移除乾淨，或有些沒安裝好，加上沒有做好「範本版本控制」的話，可能會覺得網頁怪怪的，但又不知如何 debug。

這裡順帶提供一個快速 debug 的流程：

• 先備份範本，記錄一下範本中確定需要的 js 及位置。
• 如果要 debug 文章區塊(包含留言區塊)的話，在後台範本 → 編輯 HTML → 將迷你組件範本回覆為預設值 → 勾選「Blog1」→ 還原所選小工具

這樣文章區塊就整個清乾淨了，接下來把之前記錄的 js 一個個裝回去，這樣會是清掉 bug 比較快速的流程。

以此類推，如果要 debug 別的區塊，那麼就勾選其他區塊的工具來還原即可。

Q6：行動版無法顯示安裝的小工具？

「Google+留言框及留言提醒功能」的留言 #5 詢問「我的網站有使用Google+留言板，可是行動版網頁卻顯示不出來
請問要怎麼做調整呢？」。

實際上不光是這個工具，本站所寫的其他小工具，在行動版都不一定能顯示出來。可參考「Blogger 自訂行動版範本實作 (2)」→「六、文章區塊」→「1. 正規作法」，行動版文章區塊的內容是獨立出來的，跟範本中的網頁版分屬不同區塊。

在網頁版安裝的工具，可以出現在網頁版文章區塊；但同樣的工具如果要出現在行動版範本文章區塊，那麼自然得修改行動版範本的文章區塊才行。

Q7：行動版製作的實例參考？

除了「Blogger 自訂行動版範本實作」三篇系列文，還可參考我的「行動版懶人 RWD」心得，裡面也有其他網站的實作範例。

更多 Blogger 行動版技巧：