做技術 SEO 這二十年,我最常被問的一句話是:「無障礙跟排名到底有沒有關係?」我的回答通常會讓對方愣一下,因為兩者不是同一件事,卻共用同一批訊號。螢幕閱讀器讀不懂的頁面,搜尋引擎的爬蟲多半也讀得很吃力;標題階層亂跳、alt 空著、aria 指向不存在的元素,這些在無障礙檢測工具裡是紅字,在爬蟲眼裡則是語意破洞。這篇我用一家工業儲存廠商的實際檢測結果當底,拆給你看每一個問題該怎麼判斷、該不該修、修的順序怎麼排。
1. 我怎麼判斷一個標題問題該不該花時間修
標題結構是頁面語意的骨架。爬蟲靠它理解「這一段在講什麼、從屬於哪個大主題」,螢幕閱讀器的使用者則靠它跳著讀。骨架歪了,兩邊都會誤解。但不是每個標題問題都值得立刻動手,我會先看它是「純語意瑕疵」還是「會誤導理解」。
1.1 只有一個換行的空標題,比你想的更常見
那家廠商的首頁裡藏了一個 <h3><br></h3>,裡面沒有任何文字,只有一個換行符。檢測工具直接判定為空標題。這種寫法幾乎都是前端為了「撐出一段空白距離」順手拿標題標籤來墊,結果爬蟲看到一個被標記為重點的區塊卻空無一物,語意上是矛盾的。我的做法很直接:有內容就補上真實文字,沒內容就換成 div 或用 CSS 的 margin 處理間距,不要讓標題標籤去做排版的工作。
1.2 從 h1 直接跳到 h3,爬蟲會怎麼補這個洞
同一個首頁還有兩處跳級:h1 之後直接接 h3,以及 h2 後面突然冒出 h6(那是一則放日期的小標)。搜尋引擎不會因為你跳了一級就當掉,它會嘗試自己補回中間的層級,但補出來的結構未必是你要的意思。我在實務上看過一個案例,頁面把所有次要資訊都塞進 h6,結果爬蟲把整頁的重點權重都稀釋掉,主要產品線的段落反而沒被當成重點。正確的階層是逐級往下:h1 到 h2 到 h3,中間不跳號。
1.3 標題標籤不是拿來調字級的
上面兩個問題的共同根源,是把標題當成字級控制器。想要小一點的字就用 h6,想要一段留白就用空 h3。這在視覺上或許看不出差別,但語意層完全亂了。字級交給 CSS,標題只表達「這是第幾層的主題」,這條界線一旦守住,大部分階層問題根本不會發生。
2. aria 屬性寫錯,為什麼比不寫更傷
很多人以為加了 aria 屬性就等於「有做無障礙」,但 aria 是一套需要前後對應的契約,寫錯的 aria 會主動誤導輔助技術,比完全不寫還糟。那家廠商的頁面就同時踩到兩種:一種是明確的錯誤,一種是可優化的冗餘。
2.1 指向不存在 ID 的 aria-labelledby 是明確錯誤
頁面裡有一個彈窗容器,它的 aria-labelledby 指向 exampleModalCenterTitle 這個 ID,但整個頁面裡根本沒有這個 ID 的元素。這是明確的錯誤,不是風格問題。螢幕閱讀器要唸出彈窗標題時,會找不到對應內容,使用者聽到的是一個沒有名稱的對話框。修法有兩條:要嘛補上一個帶對應 ID 的標題元素,例如 <h5 id="exampleModalCenterTitle">;要嘛直接把這個錯誤的 aria-labelledby 移掉。我偏好前者,因為彈窗本來就該有標題。
2.2 有 aria-labelledby 卻沒有正確 role 的區塊
另一種是語言選單和一般彈窗的容器,用了 aria-labelledby 卻沒有搭配合適的 role。這不算明確錯誤,但屬於冗餘:輔助技術拿到一個標籤關聯,卻不知道這個容器是什麼角色。我的判斷標準是先問「這個容器真的需要被命名嗎」,需要就補上正確的 role(選單用 menu、彈窗用 dialog),不需要就把 aria-labelledby 拿掉,別留著半套。
2.3 我驗收 aria 的三個順序
我在實務上驗收 aria 有固定順序,可以幫你少走冤枉路。第一,先確認每個 aria-labelledby 和 aria-describedby 指到的 ID 都真實存在,這一步用瀏覽器搜尋 ID 就能抓出來。第二,確認有 aria 關聯的容器都掛了對應的 role。第三,才去看語意合不合理。順序反過來做,你會在細節裡卡住,卻放過最嚴重的斷鏈。
3. 圖片的 alt 與尺寸,兩件常被一起漏掉的事
圖片問題在檢測報告裡通常分散在不同項目,但根源往往是同一套上稿流程沒把關。那家廠商的首頁有圖片缺 alt,也有圖片的尺寸屬性寫法錯誤,我習慣把這兩件一起收,因為它們都發生在「圖片被放上頁面」的那一刻。
3.1 缺 alt 的圖,搜尋引擎與螢幕閱讀器都讀不到
首頁有一張產品影片的圖片沒有 alt 屬性。alt 是圖片的文字替身,搜尋引擎靠它理解圖片內容、決定要不要收進圖片搜尋;視障使用者則靠它知道這張圖在講什麼。少了 alt,這張圖對兩邊都是空白。我給客戶的原則是:凡是後台能上稿的圖片欄位,都要有 alt 填寫的地方,而且 alt 要描述圖片實際內容,不是塞關鍵字。像那張影片縮圖,合理的 alt 就是描述它是產品影片的示意畫面,而不是硬塞一串產品型號。
3.2 width 與 height 寫成 80px 為什麼是錯的
另一張聯絡我們的圖示,尺寸屬性寫成 width="80px" height="80px"。HTML 的 width 和 height 屬性只接受純數字,單位是像素但不能寫出 px。寫了 px 在寬鬆的瀏覽器裡會被忽略、退回預設行為,在嚴格模式下會被當成無效值。正確寫法是 width="80" height="80"。這個屬性除了正確性,還有一個實際好處:瀏覽器在圖片載入前就知道它要佔多大空間,能預留位置,減少頁面載入時的版面跳動。單位寫錯,這個好處就拿不到。
3.3 我給客戶的圖片交付清單
我的做法是把圖片驗收做成一張清單交給前端,免得每次上稿都重犯。下面這張表是我實際在用的版本,你可以直接拿去對照。
| 檢查項目 | 錯誤示範 | 正確做法 | 影響面 |
|---|---|---|---|
| alt 屬性 | 完全省略,或塞一串型號 | 描述圖片實際內容的短句 | 圖片搜尋、無障礙 |
| 尺寸單位 | width=”80px” | width=”80″ | 相容性、版面穩定 |
| 裝飾性圖片 | 給一段無意義 alt | alt 留空字串,交給 CSS 背景 | 螢幕閱讀器體驗 |
| 尺寸屬性缺漏 | 只給 src,不給寬高 | 補上寬高,讓瀏覽器預留空間 | 載入時的版面跳動 |
4. 只給爬蟲看、對使用者隱藏的內容,風險比效益高
最後這個問題和前面幾個性質不同,它不是疏忽,而是刻意為之的手法,而且是我會第一優先請客戶拿掉的。那家廠商的首頁有一個帶特定 class 的隱藏 h1,只對爬蟲顯示、對使用者隱藏,另外還有一個同樣手法的隱藏區塊。
4.1 隱藏 h1 為什麼是紅線
對搜尋引擎和使用者呈現不同內容,是各大搜尋引擎品質規範明令禁止的行為。就算你藏的內容本身沒問題,只要被判定為「刻意只給爬蟲看」,就有被降級的風險。h1 應該是頁面上看得見、也最重要的那個標題,把它藏起來只給爬蟲,等於自己踩線。我的處理是把隱藏 class 移除,讓 h1 正常顯示;如果版面上放不下一個大標題,那就重新設計版面,而不是把它藏起來。
4.2 那些「不影響 SEO」的隱藏區塊要不要一起清
另一個隱藏區塊放的是一段案例分類文字,單看它對排名的直接影響很小。但我的建議還是清掉:爬蟲對頁面語意的分析一直在演進,今天無害的隱藏 class,難保哪天被納入判斷。與其留著說不清的灰色地帶,不如趁改版一次收乾淨。
5. 常見問題
5.1 標題階層跳級真的會影響排名嗎?
直接的排名扣分通常不明顯,但它會稀釋頁面重點的傳達,讓爬蟲更難判斷哪一段是核心內容。對競爭激烈的關鍵字,這種語意清晰度的差距會被放大。我的立場是:它不是致命傷,卻是低成本就能修好的基本功,沒有理由放著。
5.2 alt 文字應該寫多長、要不要放關鍵字?
以能準確描述圖片內容為原則,通常一句話就夠,不必寫成一整段。關鍵字如果自然出現在描述裡沒問題,但刻意堆疊會被視為濫用,反而扣分。純裝飾用的圖片,alt 留空字串即可,讓螢幕閱讀器直接略過。
5.3 aria 屬性一定要加嗎,不加會怎樣?
原生 HTML 元素本身多半自帶語意,像按鈕、連結、表單欄位,這些用對標籤就不太需要額外 aria。aria 是補原生語意不足時才用的工具。與其到處亂加,不如先確認有沒有用對原生標籤。錯誤的 aria 會主動誤導輔助技術,這種情況下不加反而比較好。
5.4 width 和 height 屬性和 CSS 的寬高有衝突嗎?
不衝突,兩者分工不同。HTML 屬性給瀏覽器一個載入前的尺寸提示,用來預留空間、減少版面跳動;CSS 負責實際的顯示尺寸與響應式縮放。標準做法是兩邊都給,HTML 屬性寫純數字的原始像素值,CSS 再用 max-width 之類的規則做彈性調整。
5.5 無障礙做好了,對搜尋引擎的實際幫助有多大?
兩者不是同一個評分系統,但共享很多底層訊號。清楚的標題結構、完整的 alt、正確的語意標籤,同時服務螢幕閱讀器和爬蟲。我在實務上看過把無障礙基礎補齊後,頁面在圖片搜尋和語意理解上一起變好。把它當成內容品質的一環,而不是額外負擔,收益會比較實在。