Google 已經不看你的桌面版了
從 2023 年 10 月起，Google 已經全面完成行動優先索引（Mobile-First Indexing）的轉換。這意味著什麼？意味著 Google 的爬蟲在抓取和索引你的網站時，看的是你的手機版，不是桌面版。
如果你的手機版網站跟桌面版有差異——比如手機版少了一些內容、少了一些連結、結構不一樣——那 Google 只會看到手機版的內容。桌面版有但手機版沒有的東西，等於不存在。
很多人還沒搞清楚這件事的嚴重性。
根據 Statista 2025 年的數據，全球有 63% 的搜尋流量來自行動裝置。在台灣這個比例更高，根據 SimilarWeb 的台灣區域報告，行動裝置佔網路流量的比例已達 72%。你的使用者在手機上搜尋、在手機上瀏覽，Google 也用手機版來判斷你的排名。
如果你的網站設計還是「先做桌面版，再縮小成手機版」的思維，2026 年的你需要反過來想了。
響應式設計不等於行動友善
很多人以為「我的網站是響應式設計（RWD）」就等於行動友善。這是一個常見的誤解。
響應式設計只是技術手段，它保證了你的網站在不同螢幕尺寸上能正確顯示。但「能正確顯示」和「使用體驗好」是兩回事。
一個「響應式但不友善」的手機版網站可能有以下問題：
文字太小
桌面版的 14px 字體在手機上看起來像螞蟻字。手機版的內文字體至少要 16px，標題至少 20px。Google 也會把文字大小當作行動友善度的評估標準之一。
按鈕太小或太密集
手指不是滑鼠游標。手機上的可點擊元素至少要 48x48 像素，而且元素之間的間距至少要 8px。如果兩個連結靠得太近，使用者很容易誤觸。
內容被裁切或隱藏
有些響應式設計在手機上會把側邊欄的內容完全隱藏，或者把桌面版的水平表格變成需要橫向捲動的格式。如果這些被隱藏或難以操作的內容包含重要的 SEO 關鍵字或內部連結，你的排名就會受影響。
彈出視窗擋住內容
Google 非常不喜歡在手機上擋住內容的插頁式廣告（interstitial）。如果使用者從 Google 搜尋結果點進你的網站，第一個看到的是一個全螢幕的彈出視窗，Google 可能會降低你的排名。
合理的例外包括：法規要求的 Cookie 同意通知、年齡驗證、或者佔螢幕面積很小的橫幅通知。
手機版內容一致性
行動優先索引最核心的原則是：手機版的內容要跟桌面版一致。
以前有些網站為了手機版的「簡潔」，會故意把一些文字內容拿掉。像是產品頁面在桌面版有 500 字的詳細描述，手機版只顯示前 100 字加一個「閱讀更多」按鈕——但那個按鈕其實沒有連到完整內容。
在行動優先索引之下，被隱藏的 400 字等於不存在。如果那 400 字裡包含了你想排名的關鍵字，你就虧了。
檢查項目
- 手機版的文字內容是否跟桌面版完全一致？
- 手機版的圖片是否都有加 alt 屬性？
- 手機版的內部連結是否跟桌面版一樣多？
- 手機版的結構化資料（Schema Markup）是否跟桌面版一致？
- 手機版的 meta title 和 meta description 是否跟桌面版一致？
如果以上任何一項的答案是「不一致」，你需要立刻修正。
Core Web Vitals 與手機體驗
Google 用 Core Web Vitals 來衡量網頁的使用者體驗。這三個指標在行動裝置上特別重要，因為手機的硬體效能和網路環境通常比桌面差。
LCP（Largest Contentful Paint）
頁面最大元素的載入時間。目標是 2.5 秒以內。
在手機上，最大元素通常是首屏的大圖或主標題。如果你的首頁有一張未壓縮的 5MB 背景圖，在 4G 網路下可能要花 8 秒才載入完成。這會嚴重影響 LCP。
設計面的解決方案：
- 手機版用較小尺寸的圖片（透過
srcset或<picture>元素） - 首屏的關鍵圖片用 WebP 格式
- 考慮用 CSS 漸層或 SVG 取代大張的裝飾性圖片
INP（Interaction to Next Paint）
使用者互動（點擊、輸入）到畫面回應的時間。目標是 200 毫秒以內。
手機上的 JavaScript 執行效能通常比桌面慢 3-5 倍。如果你的網站載入了大量的第三方腳本（聊天機器人、追蹤碼、社群分享按鈕），手機上的互動回應會變得很慢。
設計面的解決方案：
- 減少首屏載入的 JavaScript
- 第三方腳本延遲載入（lazy load）
- 避免在手機上使用複雜的動畫效果
CLS（Cumulative Layout Shift）
頁面內容的意外位移。目標是 0.1 以下。
手機上最常見的 CLS 問題是：圖片載入前沒有預留空間，導致文字在圖片載入後突然往下跳。或者廣告欄位在頁面載入過程中突然插入，把正在閱讀的內容推開。
設計面的解決方案：
- 所有圖片和影片都要設定 width 和 height 屬性
- 廣告欄位預留固定的空間
- 避免在已載入的內容上方動態插入新元素
手機版導覽設計的 SEO 影響
網站的導覽（Navigation）是 SEO 的重要元素，因為它提供了內部連結結構，幫助 Google 理解你的網站架構。
很多網站的手機版用漢堡選單（hamburger menu）來收納導覽連結。這本身不是問題——Google 確認過，放在漢堡選單裡的連結也能被爬取和索引。
但有幾個設計決策會影響 SEO：
不要用 JavaScript 動態載入導覽內容
如果你的漢堡選單是點擊後才用 AJAX 去載入連結內容，Google 的爬蟲可能不會觸發這個動作。用 CSS 來控制顯示/隱藏（display: none ↔ display: block），連結內容本身要在 HTML 裡。
保留麵包屑導覽
桌面版有麵包屑（breadcrumb），手機版也應該有。麵包屑不只是使用者體驗的元素，也是 Google 理解網站結構的重要信號。而且 Google 會在搜尋結果中顯示麵包屑路徑。
底部導覽的價值
手機版的底部固定導覽列（bottom navigation bar）越來越流行。像是 Shopee、蝦皮這類電商 App 的底部導覽已經是標準設計。網站也可以採用類似的設計，把 3-5 個最重要的連結放在底部固定位置。
這對 SEO 有間接幫助：它降低了跳出率，增加了頁面瀏覽量，這些都是 Google 會參考的使用者行為信號。
實戰案例：旅行社官網的行動優先改版
一家台灣中型旅行社的官網，桌面版設計得很精美，但手機版的 SEO 表現一直不好。Google Search Console 顯示大量的行動可用性問題，而且自然搜尋流量逐月下降。
問題診斷
用 Google 的行動裝置相容性測試工具檢查後，發現以下問題：
- 手機版隱藏了超過 40% 的文字內容（旅遊行程的詳細說明被摺疊了，而且是用 JavaScript 控制展開，Google 爬蟲看不到）
- 圖片沒有設定尺寸，CLS 分數高達 0.42
- 手機版的頁面載入時間平均 7.8 秒（LCP）
- 手機版少了內部連結——桌面版的側邊欄有「相關行程」的連結，手機版完全沒有
改版方案
- 把所有被隱藏的文字內容改成預設展開（或者用
<details>元素，Google 可以爬取其中的內容） - 所有圖片加上 width 和 height，並使用 WebP 格式
- 圖片使用 lazy loading，但首屏圖片立即載入
- 在手機版的文章底部加上「相關行程」的連結區塊
- 第三方腳本（Facebook Pixel、LINE Tag）改為延遲載入
結果
改版後三個月：
- LCP 從 7.8 秒降到 2.3 秒
- CLS 從 0.42 降到 0.05
- Google Search Console 的行動可用性問題從 127 個降到 0
- 行動搜尋的自然流量增加 45%
- 行動裝置的轉換率提升 28%
最大的教訓是：手機版少的那 40% 內容，包含了很多長尾關鍵字。光是把這些內容恢復到手機版，就讓很多原本排在第二、三頁的關鍵字回到第一頁。
行動優先設計的實作建議
最後整理幾個實作層面的建議：
設計流程要從手機開始
真正的行動優先不是「做完桌面版再調手機版」，而是先設計手機版，再擴展成桌面版。手機螢幕小，強迫你思考什麼內容是真正重要的。
測試要用真實手機
Chrome DevTools 的手機模擬功能很方便，但它模擬不了真實的觸控操作、網路速度和硬體效能。建議至少用一支中階 Android 手機來測試（不要只用最新的 iPhone，那不代表大部分使用者的設備水準）。
表格和圖表要重新設計
桌面版的寬表格在手機上一定會爆掉。不要只是加橫向捲動，而是重新思考這些資訊在手機上要怎麼呈現。把表格改成卡片式、把折線圖改成簡化版、把比較表改成分頁切換——這些都是更好的手機版設計策略。
字體大小和行距
手機版的最小字體不要低於 14px（建議 16px）。行距至少 1.5 倍。段落之間的間距要明確。閱讀體驗好不好，很大程度取決於這些基本的排版設定。
觸控友善的互動設計
按鈕、連結、表單欄位——所有可互動的元素在手機上都要夠大、夠明顯、間距夠寬。使用者不應該需要放大畫面才能點到某個連結。
行動優先索引不是一個你可以選擇忽略的東西。它是 Google 現在評估你網站的唯一方式。你的網站設計如果不以手機為中心，那你在搜尋結果中的表現只會越來越差。反過來說，把手機版做好，等於同時做好了使用者體驗和 SEO——一石二鳥。
