第 27 章：行動優先索引與 RWD 響應式設計
第 27 章：行動優先索引與 RWD 響應式設計
什麼是行動優先索引？
行動優先索引（Mobile-First Indexing） 是 Google 自 2018 年起逐步推行的索引策略：Google 主要使用網站的行動版內容進行索引和排名，而非桌面版。
截至 2023 年底，Google 已將 99% 以上的網站 切換為行動優先索引。
這意味著：即使你的使用者在桌面上搜尋，Google 用來判斷排名的內容，仍然是你網站的行動版。
行動優先索引的 SEO 影響
你的網站在行動優先索引下可能遇到的問題
| 問題 | 影響 |
|---|---|
| 行動版缺少桌面版的內容 | 該內容完全不會被 Google 索引和排名 |
| 行動版沒有結構化資料 | 失去 Rich Results 資格 |
| 行動版圖片品質差或沒有 Alt Text | 失去圖片搜尋排名 |
| 行動版 Title/Meta 與桌面版不同 | 以行動版為準（桌面版的優化白做了） |
| 行動版速度慢 | 直接影響排名（速度更新也是以行動版為準） |
行動優先不等於「只索引行動版」
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; }
}
��動版 SEO 七大優化要點
1. 確保內容一致性
桌面版和行動版的內容必須一致。這包括：
– 文字內容（不能「為了行動版精簡」而刪除重要段落）
– 標題層級（H1-H6）
– 結構化資料
– Meta 標籤（Title、Description）
– 內部連結
2. 字體與排版
| 建議 | 說明 |
|---|---|
| 最小字體 16px | iOS 會將小於 16px 的文字自動放大，可能破壞佈局 |
| 行高 1.5-1.8 | 行動裝置小螢幕需要更寬鬆的行間距 |
| 段落不要太長 | 行動版每行 35-45 個中文字為佳 |
3. 點擊目標大小
Google 要求可點擊元素（按鈕、連結）之間有足夠的間距：
| 要求 | 建議 |
|---|---|
| 最小點擊區域 | 48×48px（Google 建議） |
| 元素間距 | 至少 8px（避免誤觸） |
.touch-target {
min-width: 48px;
min-height: 48px;
padding: 12px 16px; /* 確保點擊區域足夠大 */
}
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 訂閱視窗 |
| 小範圍的促銷橫幅 | 使用者必須手動關閉才能看內容的彈窗 |
6. 加速行動頁面（AMP 已非必要）
Google 已不再強制要求 AMP（Accelerated Mobile Pages）來獲得 Top Stories 輪播位。現在，只要你的頁面速度夠快、符合 Core Web Vitals 標準，就可以出現在各種 SERP 功能中。
結論：專注做好 RWD + 速度優化，不需要額外維護 AMP 版本。但如果你已經有 AMP，保留它也不會有害。
7. 測試行動裝置友善度
| 工具 | 用途 |
|---|---|
| Google 行動裝置相容性測試 | 檢查單一頁面是否行動友善 |
| GSC → 體驗 → 行動裝置可用性 | 全站行動問題報告 |
| Chrome DevTools → 裝置模式 | 本地開發時模擬不同裝置 |
| 真實裝置測試 | 在真實手機上瀏覽（最可靠） |
行動優先索引的常見錯誤與修復
| 錯誤 | GSC 報告 | 修復方法 |
|---|---|---|
| 文字太小難以閱讀 | 行動裝置可用性 | 增大字體至 ≥ 16px |
| 可點擊元素太近 | 行動裝置可用性 | 確保點擊區域 ≥ 48px + 間距 ≥ 8px |
| 內容比螢幕寬 | 行動裝置可用性 | 檢查 max-width: 100% 設定 |
| 使用 Flash | 行動裝置可用性 | 完全移除 Flash（2020 年終止支援） |
robots.txt 阻擋資源 |
索引問題 | 允許 Googlebot 抓取 CSS 和 JS |
| 行動版 404 但桌面版正常 | 索引問題 | 確保兩版 URL 結構一致 |
RWD 與獨立行動版（m.example.com）的選擇
| RWD（推薦） | 獨立行動版（不推薦） | |
|---|---|---|
| URL | 同一個 URL | m.example.com |
| 維護成本 | 低（一套代碼） | 高（兩套代碼） |
| 內容一致性 | 自動一致 | 需要手動同步 |
| Google 建議 | ✅ 強烈推薦 | ❌ 不推薦 |
如果你目前使用獨立行動版（
m.example.com），建議逐步遷移到 RWD。遷移過程中要確保：
1. 在兩版之間設置正確的rel="alternate"和rel="canonical"標籤
2. 遷移後設置 301 重定向從m.到主站
行動版 SEO 檢查清單
- [ ] 使用 RWD 響應式設計（非獨立行動版）
- [ ] 行動版與桌面版內容一致
- [ ] 字體大小 ≥ 16px
- [ ] 點擊目標 ≥ 48×48px（含足夠間距）
- [ ] 沒有水平捲動條
- [ ] 圖片使用
max-width: 100%且使用 srcset - [ ] 沒有侵入式彈出視窗
- [ ] 行動版 Core Web Vitals 達標（LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1）
- [ ] 通過 Google 行動裝置相容性測試
- [ ] GSC 中無行動裝置可用性錯誤
重點回顧
- 行動優先索引 = Google 以行動版內容來排名，99% 的網站已切換
- RWD 響應式設計是唯一的正確選擇——一個 URL、一套代碼、內容自動一致
- 行動版必須與桌面版內容一致，否則不一致的部分不會被索引
- 字體 ≥ 16px、點擊目標 ≥ 48px、無水平捲動是行動版的基本三要素
- 侵入式彈窗會被處罰——Cookie 和法律要求的例外
- AMP 已非必要——專注做好 RWD + 速度優化即可
| ← 第 26 章：Core Web Vitals 完整解析 | 回索引 | 第 28 章：Sitemap 製作與提交 → |
延伸閱讀：網站 SEO 學習與操作手冊
0 comments