驗收頁面時，常看到主視覺很華麗，標題、標語與賣點卻全被畫進圖裡，字體自由、層次豐富，負責人也滿意。問題在於，檢索與生成系統通常讀不進那些像素裡的字，最關鍵的主張等於被藏起來。

向業主說明這點，多數人的第一反應是懷疑。多模態模型確實進展很快，不過搜尋服務在大規模建索引時，仍主要依靠替代文字，因為逐張辨識像素的負擔，往往是讀一段文字的數百倍。

這裡要找的平衡是：畫面維持精緻，同時讓系統讀懂圖像想傳達的意思。在網站製作流程中，圖像與替代文字最容易被跳過，對能否被引用的影響卻最大。

系統讀圖時，實際拿到什麼？

當爬蟲或模型遇到一張圖，優先取得的通常是這些欄位：

它較容易讀到：

• 檔名（site-structure.webp）
• 替代文字（描述畫面）
• 尺寸（用來估計視覺權重）
• 旁邊的標題與段落

它很難直接讀到（或代價很高）：

• 像素構成的畫面本身
• 被烘進圖檔的文案
• 色彩、構圖與品牌氣質

如果標記只剩 ，系統大概只能猜這裡有個叫 cover 的檔案，資訊就到此為止。

六項讓圖像更易被讀懂的設計準則

準則一：關鍵主張必須是 HTML 文字

這是最要緊的一條：畫進圖裡的字，機器等於沒看見。主視覺上的資歷、定位或口號若只存在於像素，搜尋與生成回答都收不到這些句子。

傳統產業官網特別容易這樣做：把沿革與獲獎做成華麗首屏，上線之後，搜尋結果與生成式摘要都抓不到那些賣點。

比較穩的做法，是把文案放回標記裡：

 
 
可被機器閱讀的智慧型網站
 
累積眾多企業專案，原始碼完整移交
 查看服務範圍 
 

視覺仍可以很華麗，但每句主張都是真文字，系統一眼就能讀。

準則二：有意義的圖都要寫替代文字

沒有替代文字的圖像，系統常常直接跳過。寫法可以這樣對照：

撰寫時可以抓住幾點：

• 描述畫面真正呈現的內容，不要把關鍵字塞滿
• 中文約三十到五十字，用自然句子
• 帶一到兩個關鍵詞即可，不必刻意
• 圖內若已有文字，替代文字應涵蓋那些字句

準則三：裝飾圖留下空的 alt

背景紋樣、分隔線、小圖示這類不含資訊的圖，應使用空替代文字：

這等於告訴檢索系統與讀屏軟體可以略過。不要寫成 alt='裝飾圖'，那只是白白消耗解析資源。

準則四：檔名本身要有意義

檔名也算一種訊號。權重不如替代文字，但累積起來仍有幫助：

詞與詞用連字號分開，全部小寫，名稱要能說明內容。

準則五：重要圖像補上 ImageObject

商品照、文章主圖、團隊肖像等關鍵圖像，可補上結構化標記（完整作法可另見 結構化資料實務說明）：

商品圖可掛在 Product.image，文章主圖可掛在 Article.image，系統就能分辨每張圖的角色。

準則六：用 figure 搭配 figcaption

需要加註的圖像，用 figure 包起來：