手機與電腦看到的不是同一頁:行動版內容一致性比對的七步驟教學
行動版與桌機版內容不一致,要用「同一網址、兩種裝置、逐段對照」的方式找出來。做法是先抓兩個版本的原始碼與畫面,再比對文字、標題、連結、結構化資料與圖片說明五類內容,把手機少掉的部分補回同一份 HTML。下面是七個步驟,一個下午可以做完一個頁型。
這篇是操作教學,不談理論。你需要一台電腦、一支手機、一份試算表。所有工具都免費,不用寫程式。文中的頁面例子都是示範情境,用來說明步驟,不代表任何真實網站。
為什麼要用步驟對照,而不是憑感覺看?
多數人檢查手機版的方式,是拿手機滑一遍,覺得「東西都在」。問題是眼睛會騙人。收合的段落、分頁籤裡的文字、延遲載入的評論區,滑過去時看起來都在,但它們可能根本沒有出現在手機版的原始碼裡。
Google 以行動版內容作為建立索引的主要依據,官方在搜尋引擎最佳化入門指南裡也提醒網站要讓手機與桌機呈現相同的重要內容。手機版少了什麼,搜尋引擎就可能當作這一頁沒有。所以檢查要看原始碼與渲染結果,不能只看畫面。
步驟化的好處有三個:
- 每次檢查結果可以比較,下次改版後能看出哪裡又跑掉
- 工程師拿到的是具體清單,不是「手機版怪怪的」這種描述
- 老闆或行銷主管看得懂進度,知道還剩幾項沒修
步驟一:選頁型,不要選頁面
網站有幾百頁,不可能一頁一頁對。正確做法是先分頁型。同一個版型產生的頁面,落差通常也一樣。修好版型,整批頁面一起好。
一般中小企業網站常見的頁型如下:
| 頁型 | 代表頁數量 | 常見落差位置 |
|---|---|---|
| 首頁 | 一頁 | 輪播圖的文字、頁尾的服務清單 |
| 服務或商品分類頁 | 挑一到兩頁 | 分類說明文字、篩選器下方的介紹 |
| 服務或商品內頁 | 挑三頁 | 規格表、常見問題、評價區 |
| 文章頁 | 挑三頁 | 側欄的延伸閱讀、作者介紹 |
| 聯絡與門市頁 | 一頁 | 地圖下方的地址文字、營業資訊 |
每個頁型挑代表頁時,挑流量最高的一頁,再挑一頁內容最長的。內容長的頁面最容易被手機版截掉。
步驟二:抓兩份原始碼並存成文字檔
打開電腦版 Chrome,進入要檢查的頁面,按右鍵選「檢視網頁原始碼」,全選後貼到一個文字檔,命名為「頁名_桌機」。
接著按 F12 打開開發人員工具,點左上角的手機圖示切換成行動裝置模擬,選一個常見機型,重新整理頁面。這時再到 Elements 分頁,在最上層的 html 標籤按右鍵複製外部 HTML,存成「頁名_手機」。
這裡有個重點:第一份是伺服器送出的原始碼,第二份是瀏覽器執行完腳本後的結果。兩份都要留。若網站用響應式設計,兩份原始碼應該幾乎一樣,差在樣式。若網站用動態供應或獨立手機網域,差異會很大,這正是要找的地方。
步驟三:用 Search Console 看 Google 實際抓到的版本
自己的瀏覽器看到的,不一定等於 Google 爬蟲看到的。到 Search Console 的網址審查工具,貼上網址,執行即時測試,再點「查看已測試的網頁」,複製 HTML。
這一份存成「頁名_爬蟲」。現在你手上有三份檔案。三份放在一起,就能分辨問題出在哪一層:
- 桌機有、手機沒有、爬蟲也沒有:手機版版型漏放,要改版型
- 桌機有、手機有、爬蟲沒有:腳本執行或資源被封鎖,要查載入方式
- 三份都有,但手機畫面看不到:多半是收合或分頁籤,通常沒問題,確認文字在原始碼裡就好
步驟四:五類內容逐項對照
把三份檔案放進試算表,一列一個檢查項目。不要整份比對,逐類比對比較快,也比較不會漏。
第一類:正文文字
在桌機檔案裡找出頁面上最重要的三段文字,各複製一句獨特的句子,到手機與爬蟲檔案裡用搜尋找。找不到就記下來。示範情境中,一個服務內頁的「收費方式」段落只寫在桌機版的側欄,手機版的側欄整塊被隱藏且沒有輸出,這種就是要補的。
第二類:標題層級
數一數三份檔案各有幾個 h1、h2、h3。手機版常為了節省空間把小標題改成粗體段落,標題層級就消失了。標題是讀者與搜尋引擎理解段落主題的線索,數量對不上就要查。
第三類:內部連結
桌機版的側欄、頁尾、麵包屑常有大量內部連結。手機版若把側欄拿掉,這些連結也一起消失。用搜尋找 href 的數量,差距超過三成就值得細看是哪些連結不見。
第四類:結構化資料
搜尋 application/ld+json,確認兩個版本都有,而且內容一樣。Google 結構化資料說明要求標記要對應頁面上可見的內容。手機版若刪掉了評價區,評價的標記也要跟著處理,否則標記與內容就對不起來。
第五類:圖片替代文字與說明
搜尋 alt 的數量與內容。手機版常換成較小的圖檔,工程師換圖時順手把替代文字留空,這很常見。
步驟五:把落差寫成工程師看得懂的工單
找到落差後,不要寫「手機版少東西」。每一筆落差寫成一列,包含五個欄位:
| 欄位 | 寫法示範 |
|---|---|
| 頁型 | 服務內頁 |
| 代表網址 | 填入實際網址 |
| 落差內容 | 桌機側欄「收費方式」段落在手機版原始碼中不存在 |
| 判定層級 | 版型漏放(桌機有、手機沒有、爬蟲沒有) |
| 建議修法 | 段落改放主欄,手機以收合方式呈現,文字保留在 HTML 中 |
判定層級這一欄最重要。它直接告訴工程師要改版型、改腳本,還是不用改。
步驟六:修法的優先順序怎麼排?
不是每個落差都一樣急。排序看兩件事:這段內容跟搜尋有沒有關係,以及受影響的頁數有多少。
- 第一優先:正文段落或標題缺失,且出現在整個頁型。一次修好影響最多頁
- 第二優先:結構化資料兩版不一致。可能讓複合式搜尋結果失去資格
- 第三優先:內部連結大量缺失。影響爬蟲找到深層頁面
- 第四優先:替代文字缺失。影響圖片搜尋與無障礙
- 可以延後:純裝飾性的元素,例如桌機版的背景圖或動畫
修法有一個原則:讓文字留在同一份 HTML,用樣式決定怎麼顯示。手機版可以收合、可以放到頁面下方,但不要刪掉。這比維護兩套內容便宜,也比較不會再出錯。
步驟七:修完後怎麼驗收?
修完不要只看手機畫面。重跑步驟二到四,用同一份試算表,在每一列旁邊加一欄「修正後」,填入是或否。
接著回到 Search Console,用網址審查要求重新建立索引。這一步只是請 Google 再來看,不保證排名變化,也不保證何時處理。
驗收時要留兩樣東西:修正後的三份檔案,以及完成的試算表。下次網站改版或換佈景主題時,拿出來重跑一次就知道有沒有退步。示範情境中,一個網站在換佈景主題後,原本修好的常見問題區又從手機版消失,就是靠舊試算表在一小時內發現。
如果你想把這個檢查放進上線流程,可以搭配網站上線前的四十項技術檢查表一起使用。想先理解哪些落差最傷排名,可以讀行動版與桌機版不一致的六個降權落差。
適用與不適用的情況
這套七步驟比較適合以下網站:
- 用動態供應或獨立手機網域的網站,落差通常最大
- 響應式網站但用了大量隱藏區塊、分頁籤或延遲載入
- 剛換過佈景主題、頁面建構工具或電商平台的網站
- 自然流量的手機占比高,但手機版跳出率明顯偏高的網站
不太需要做的情況:
- 純靜態、版面單純的一頁式網站,兩版內容本來就一樣
- 網站還沒有被建立索引,先處理索引問題比較急
- 頁面數量很少,直接請工程師逐頁目視確認更快
這套方法也有限制。它找得出內容有沒有,但看不出內容好不好。手機版若字太小、按鈕太擠,那是使用體驗問題,要另外檢查。另外,Search Console 的即時測試有時會因資源載入逾時而少抓內容,遇到結果怪異時,隔一段時間再測一次,不要一次就下結論。
