行動優先索引與 RWD 響應式設計
行動優先索引（Mobile-First Indexing） 是 Google 自 2018 年起逐步推行的索引策略：Google 主要使用網站的行動版內容進行索引和排名，而非桌面版。
什麼是行動優先索引？
行動優先索引（Mobile-First Indexing） 是 Google 自 2018 年起逐步推行的索引策略：Google 主要使用網站的行動版內容進行索引和排名，而非桌面版。
截至 2023 年底，Google 已將 99% 以上的網站 切換為行動優先索引。
這意味著：即使你的使用者在桌面上搜尋，Google 用來判斷排名的內容，仍然是你網站的行動版。
香港：行動優先唔係選擇，係現實
| 香港數據／現象 | 含意 |
|---|---|
| 香港智能手機滲透率極高，流動上網幾乎全民化 | Google 基本上係用你嘅手機版去排名 |
| 香港搜尋有七成以上來自手機 | 桌面版做得幾靚都好，Google 同客人睇嘅都係手機版 |
| 香港人常用 WhatsApp、IG、Facebook 開連結（in-app browser） | 你嘅頁面喺 WhatsApp / IG 內置瀏覽器入面嘅表現，直接影響轉換 |
| 香港網店、餐飲、地產、補習競爭激烈 | 手機體驗差一截，對手就贏咗半條街 |
香港情境：一間銅鑼灣餐廳嘅網站，桌面版有完整餐牌、訂位表單、分店資料；但手機版為咗「簡潔」刪走咗餐牌細節，只放「請致電查詢」。結果 Google 用嚟排名嘅係手機版——餐牌內容完全冇被索引，「銅鑼灣 意大利菜 餐牌」呢類字自然排唔上。
行動優先索引的 SEO 影響
你的網站在行動優先索引下可能遇到的問題
| 問題 | 影響 |
|---|---|
| 行動版缺少桌面版的內容 | 該內容完全不會被 Google 索引和排名 |
| 行動版沒有結構化資料 | 失去 Rich Results 資格（HK$ 價錢、評分、地址唔會顯示） |
| 行動版圖片品質差或沒有 Alt Text | 失去圖片搜尋排名 |
| 行動版 Title/Meta 與桌面版不同 | 以行動版為準（桌面版的優化白做了） |
| 行動版速度慢 | 直接影響排名（速度更新也是以行動版為準） |
| 手機版刪走咗價錢表（HK$） | 香港人最想知嘅資訊冇被索引，轉換暴跌 |
| WhatsApp / IG 內置瀏覽器顯示異常 | 香港人最常用嘅開連結方式壞咗，等於冇流量 |
行動優先不等於「只索引行動版」
Google 仍然會抓取桌面版，但如果行動版和桌面版的內容不同，行動版優先。這就是為什麼「響應式設計」被強烈推薦——它確保兩個版本內容一致。
RWD 響應式網頁設計（Responsive Web Design）
RWD 的三大技術支柱
| 支柱 | 說明 | 關鍵 CSS 屬性 |
|---|---|---|
| 流動網格 | 使用相對單位（%、vw）而非固定像素 | width: 100%、max-width |
| 彈性圖片 | 圖片隨容器縮放 | max-width: 100%、srcset |
| 媒體查詢 | 根據螢幕尺寸應用不同樣式 | @media |
媒體查詢的常用斷點
/* 小型手機 */
@media (max-width: 480px) { ... }
/* 大型手機 / 小型平板 */
@media (max-width: 768px) { ... }
/* 平板 / 小型筆電 */
@media (max-width: 1024px) { ... }
/* 桌面（可選，通常是預設樣式） */
@media (min-width: 1025px) { ... }
行動優先的 CSS 寫法：先寫行動版樣式（預設），再用
min-width媒體查詢為較大螢幕添加樣式。
/* 行動版（預設） */
.container { padding: 16px; }
.hero-title { font-size: 1.5rem; }
/* 平板以上 */
@media (min-width: 768px) {
.container { padding: 32px; }
.hero-title { font-size: 2rem; }
}
/* 桌面 */
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
.hero-title { font-size: 2.5rem; }
}
香港斷點補充：香港常見機型係 iPhone（375 / 390 / 430px 寬）同 Android（360 / 412px），所以 360px 一定要測。另外唔少香港用家會用平板（iPad）睇樓盤、餐牌，768-1024px 嗰段唔好忽略。
行動版 SEO 七大優化要點
1. 確保內容一致性
桌面版和行動版的內容必須一致。這包括：
- 文字內容（不能「為了行動版精簡」而刪除重要段落）
- 價錢表（HK$ 收費表一定要喺手機版完整顯示，唔好收埋喺「桌面版專用」表格入面）
- 標題層級（H1-H6）
- 結構化資料
- Meta 標籤（Title、Description）
- 內部連結（包括 18 區頁連結）
2. 字體與排版
| 建議 | 說明 |
|---|---|
| 最小字體 16px | iOS 會將小於 16px 的文字自動放大，可能破壞佈局 |
| 行高 1.5-1.8 | 行動裝置小螢幕需要更寬鬆的行間距 |
| 段落不要太長 | 行動版每行 35-45 個中文字為佳 |
| 繁中字體選擇 | 用 system-ui, -apple-system, "PingFang HK", "Noto Sans HK" 系統字體堆疊，避免載入巨型中文字體檔拖慢 LCP |
3. 點擊目標大小
Google 要求可點擊元素（按鈕、連結）之間有足夠的間距：
| 要求 | 建議 |
|---|---|
| 最小點擊區域 | 48×48px（Google 建議） |
| 元素間距 | 至少 8px（避免誤觸） |
.touch-target {
min-width: 48px;
min-height: 48px;
padding: 12px 16px; /* 確保點擊區域足夠大 */
}
香港情境：香港人常用嘅 CTA 係「WhatsApp 查詢」「立即致電」「加入購物車」。呢啲掣一定要大到用手指撳得中，尤其係喺港鐵單手揸住手機嗰陣。
4. 不要使用橫向捲動
行動版頁面不應出現水平捲動條。常見原因：
- 固定寬度元素 > 視窗寬度
- 未設定
max-width: 100%的圖片或影片 - 過大的表格（香港價錢表、比較表特別常見）
/* 防止溢出 */
img, video, iframe, table {
max-width: 100%;
height: auto;
}
/* 讓表格在手機上可以水平捲動 */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
5. 彈出視窗（Popups / Interstitials）
Google 會處罰那些在行動版上使用侵入式插頁廣告的網站。
| ⭕ 可以接受的 | ❌ 會被處罰的 |
|---|---|
| Cookie 同意橫幅（小範圍） | 整頁彈窗廣告（遮蓋主要內容） |
| 年齡驗證彈窗（法律要求） | 進入頁面就彈出的 Email 訂閱視窗 |
| 小範圍的促銷橫幅 | 使用者必須手動關閉才能看內容的彈窗 |
香港合規補充：香港網站收集個人資料要遵守 PDPO《個人資料（私隱）條例》，Cookie 同意橫幅同私隱政策連結係基本配置。記住：Cookie banner 可以用，但要細範圍、唔好遮住主要內容，否則一樣會被 Google 當侵入式處理。
6. 加速行動頁面（AMP 已非必要）
Google 已不再強制要求 AMP（Accelerated Mobile Pages）來獲得 Top Stories 輪播位。現在，只要你的頁面速度夠快、符合 Core Web Vitals 標準，就可以出現在各種 SERP 功能中。
結論：專注做好 RWD + 速度優化，不需要額外維護 AMP 版本。但如果你已經有 AMP，保留它也不會有害。
7. 測試行動裝置友善度
| 工具 | 用途 |
|---|---|
| Google 行動裝置相容性測試 | 檢查單一頁面是否行動友善 |
| GSC → 體驗 → 行動裝置可用性 | 全站行動問題報告 |
| Chrome DevTools → 裝置模式 | 本地開發時模擬不同裝置 |
| 真實裝置測試 | 在真實手機上瀏覽（最可靠） |
| WhatsApp / IG 內置瀏覽器測試 | 香港必測：WhatsApp 同 IG 嘅 in-app browser（iOS 用 WKWebView、Android 用 Chrome Custom Tabs）渲染同 Chrome 有差異 |
| iOS Safari 實機測試 | 香港 iPhone 滲透率高，Safari 行為（例如自動放大字體）要實測 |
行動優先索引的常見錯誤與修復
| 錯誤 | GSC 報告 | 修復方法 |
|---|---|---|
| 文字太小難以閱讀 | 行動裝置可用性 | 增大字體至 ≥ 16px |
| 可點擊元素太近 | 行動裝置可用性 | 確保點擊區域 ≥ 48px + 間距 ≥ 8px |
| 內容比螢幕寬 | 行動裝置可用性 | 檢查 max-width: 100% 設定（尤其係價錢表） |
| 使用 Flash | 行動裝置可用性 | 完全移除 Flash（2020 年終止支援） |
robots.txt 阻擋資源 |
索引問題 | 允許 Googlebot 抓取 CSS 和 JS |
| 行動版 404 但桌面版正常 | 索引問題 | 確保兩版 URL 結構一致 |
| 手機版收埋咗 HK$ 價錢表 | 索引問題（內容唔見咗） | 價錢表用手機可讀格式（表格 + 横向捲動） |
| 手機版用摺疊（accordion）收起 FAQ | 通常 OK，但要確保 HTML 入面有 | 內容要喺 HTML 原始碼入面，唔好靠 JS 先生成 |
RWD 與獨立行動版（m.example.com）的選擇
| RWD（推薦） | 獨立行動版（不推薦） | |
|---|---|---|
| URL | 同一個 URL | m.example.com |
| 維護成本 | 低（一套代碼） | 高（兩套代碼） |
| 內容一致性 | 自動一致 | 需要手動同步 |
| Google 建議 | ✅ 強烈推薦 | ❌ 不推薦 |
如果你目前使用獨立行動版（
m.example.com），建議逐步遷移到 RWD。遷移過程中要確保：
- 在兩版之間設置正確的
rel="alternate"和rel="canonical"標籤- 遷移後設置 301 重定向從
m.到主站- 同步更新 hreflang（如係雙語站）、Sitemap、GBP 上嘅連結
行動版 SEO 檢查清單
- 使用 RWD 響應式設計（非獨立行動版）
- 行動版與桌面版內容一致（特別係 HK$ 價錢表同服務範圍）
- 字體大小 ≥ 16px（繁中用系統字體堆疊）
- 點擊目標 ≥ 48×48px（含足夠間距），WhatsApp / 致電 CTA 特別留意
- 沒有水平捲動條（表格要有
overflow-x: auto） - 圖片使用
max-width: 100%且使用 srcset - 沒有侵入式彈出視窗（Cookie banner 要細範圍）
- 行動版 Core Web Vitals 達標（LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1）
- 通過 Google 行動裝置相容性測試
- 已喺 WhatsApp / IG 內置瀏覽器測試（香港人最常用）
- 已喺 iOS Safari 實機測試（香港 iPhone 滲透率高）
- 360px 寬度螢幕有測（Android 常見機型）
- GSC 中無行動裝置可用性錯誤
重點回顧
- 行動優先索引 = Google 以行動版內容來排名，99% 的網站已切換
- RWD 響應式設計是唯一的正確選擇——一個 URL、一套代碼、內容自動一致
- 行動版必須與桌面版內容一致，否則不一致的部分不會被索引（香港最常見係手機版刪走價錢表）
- 字體 ≥ 16px、點擊目標 ≥ 48px、無水平捲動是行動版的基本三要素
- 侵入式彈窗會被處罰——Cookie（PDPO 合規）和法律要求的例外
- AMP 已非必要——專注做好 RWD + 速度優化即可
- 香港必測 in-app browser：WhatsApp、IG 內置瀏覽器 + iOS Safari 實機
| ← 第 26 章：Core Web Vitals 完整解析 | 回索引 | 第 28 章：Sitemap 製作與提交 → |