技術 SEO
手機友善度與點擊目標尺寸審查工具
Google 喺 2023 年已經停用咗自家嘅 Mobile-Friendly Test。貼上你頁面嘅 HTML(如果 CSS 唔係 inline 就一齊貼埋),呢個工具就會做七項真正嘅檢查:viewport meta、固定桌面闊度佈局、易讀字體大小、估算嘅點擊目標尺寸、過時插件標籤,同埋 WCAG 色彩對比度。
需要 CSS 嘅檢查(佈局闊度、字體大小、點擊目標、對比度)如果喺 HTML 同呢個欄都搵唔到 CSS,就會跳過或者標示做「數據唔夠」。
呢個係靜態規則審查——唔會好似真手機咁樣渲染個頁面,所以點擊目標同佈局嘅結果係根據你 CSS 嘅接近估算,唔係像素級精準測量。
呢個工具檢查啲乜嘢
七項對真正手機訪客同 Google 手機優先索引都好緊要嘅檢查:正確而唔會阻擋縮放嘅 viewport 標籤;冇硬編碼嘅桌面闊度佈局;冇細到睇唔清嘅文字;連結同按鈕有舒適嘅點擊目標尺寸;冇死咗嘅 Flash/Java/marquee 標記;仲有符合 WCAG 嘅文字對比度。貼上完整頁面 HTML(用 View Source 都得),如果 CSS 喺外部樣式表就一齊貼埋。
每項檢查點樣運作
呢度冇嘢係靠估嘅——每個發現都嚟自解析你貼嘅 HTML(DOM)同 CSS(真正嘅規則解析器,會攤開 @media 區塊),然後套用同 Google 同 WCAG 公佈一樣嘅門檻。
Viewport meta 標籤
檢查個標籤存唔存在、有冇用 width=device-width 同 initial-scale=1、有冇阻擋雙指縮放(user-scalable=no 或者 maximum-scale 細過 2,呢個係 WCAG 1.4.4 唔合格)。
固定桌面闊度佈局
掃描你嘅 CSS,搵結構性選擇器(body、.wrapper、.container、#page 等等)有冇硬編碼 601px 或以上嘅 width 或者 min-width——呢個係佈局從來冇做過響應式嘅經典跡象。
易讀字體大小
標示低過 12px 嘅 font-size 聲明,呢個係喺手機屏幕上舒服閱讀、唔使雙指縮放嘅常用最低值。
點擊目標尺寸
根據 font-size、line-height 同 padding(或者明確嘅 width/height)估算連結、按鈕同 role="button" 元素嘅渲染高度,再同 Google Lighthouse 同 WCAG 2.5.5 嘅約 44-48px 指引比較。
過時插件內容
標示 <applet>、<marquee>、<blink>,同埋任何指向 Flash(.swf)嘅 <embed>/<object>——呢啲喺而家任何手機瀏覽器都跑唔到。
色彩對比度(WCAG)
對於同時設定文字顏色同背景顏色嘅任何 CSS 規則,計算真正嘅 WCAG 相對光度對比度,再同 4.5:1(大字/粗體字就 3:1)嘅 AA 最低標準比較。
響應式斷點
計算你 CSS 入面嘅 @media 規則數量,作為佈局有冇適應細屏幕嘅參考信號——只係作參考用,因為流動佈局就算冇任何 media query 都可能係響應式㗎。
常見問題
點解 Google 會停咗 Mobile-Friendly Test?
Google 喺 2023 年 12 月關咗獨立嘅 Mobile-Friendly Test 工具,將手機友善度檢查併入咗 Search Console 更大範圍嘅報告入面,唔再有一個快速嘅單頁檢測工具。呢個工具就用一個免登入、基於規則、可以對任何貼上嘅 HTML 即刻運行嘅審查,嚟填補呢個空缺。
點解要分開貼 CSS?
大部分真實頁面都係由外部樣式表(<link rel="stylesheet">)載入 CSS,呢個工具冇辦法單憑貼上嘅 HTML 就幫你攞到嗰啲內容。貼咗嗰個樣式表嘅內容落 CSS 欄,佈局、字體大小、點擊目標同對比度嘅檢查就會全部針對佢運行。
點樣先算係好嘅點擊目標尺寸?
按照 Google Lighthouse 同 WCAG 2.5.5(Target Size)標準,大約要 44-48 CSS 像素高同闊。細過呢個數,真手指喺真屏幕上就會明顯較常掂錯附近嘅連結。
呢個點擊目標估算準唔準㗎?
唔準——呢個係根據你聲明嘅 font-size、line-height 同 padding(或者明確嘅 width/height)得出嘅可靠估算,唔係真實瀏覽器渲染。將接近 44-48px 界線嘅結果當做「要喺真機度驗證」,遠低過呢個數嘅就當係明顯唔合格。
呢個工具會唔會將我嘅 HTML 或者 CSS 傳去邊度?
你貼上嘅 HTML/CSS 會經 HTTPS 傳一次去我哋伺服器,運行解析器(要咁樣先可以令同一套規則引擎對所有人都一致運行),請求完成之後就唔會再儲存。