AO2 GUIDE 19 · 內容行銷
圖片 SEO 規劃 需同時處理視覺任務、產品真實性、替代文字與載入體驗。整理來源、圖說、尺寸及版本，讓圖片幫助客戶理解與選型。
這篇從企業品牌與技術內容的角度，整理圖片用途、替代文字、檔名、尺寸、版本與驗收。以下示例是視覺工作方法，涉及產品規格、圖面與性能時，仍需使用企業已確認的資料。
圖片 SEO 規劃：先替每張圖片指定一個任務
可以先把圖片分成辨識、說明、證據與裝飾。產品主圖協助辨識外觀，應用圖交代使用環境，細節圖說明介面或安裝，核准的測試圖則支持特定敘述。裝飾圖建立氛圍，但不應被當成產品證據，也不需要硬塞大量技術資訊。
一個常見問題，是圖庫裡有許多相似角度，卻缺少客戶真正需要的背面、接點或配置說明。可以先請業務列出客戶反覆詢問的位置與差異，再決定要拍什麼、畫什麼。先明確任務，通常比先增加圖片數量更有用。
若頁面用途還不清楚，可回到 產品頁內容指南 確認選型需要。圖片應與文字一起回答問題，而不是文字寫完後，才從素材庫隨意找一張看起來相關的圖填滿空白。
圖片與周圍文字，要描述同一件事
Google 的圖片文件指出，頁面內容、圖說與替代文字都能提供理解圖片的線索。實作時，請把圖片放在相關段落附近，並用必要的圖說交代它支持哪個說明。不要在談到安裝限制時，放一張無法辨識條件的品牌情境照，讓讀者自行猜測關係。
例如一張介面圖，附近應說明各位置的用途、適用型號與需要確認的配置。若只是示意，就明確標示；若顯示選配件，也要說清楚並非所有產品都包含。圖片本身看起來合理，不代表客戶會得到正確期待。
比較圖也需要相同前提。兩款產品若使用不同拍攝比例或不同配置，視覺上可能放大差異。尺寸比較、流程箭頭與性能圖表，更應使用可核對的資料與一致單位。設計表達不能取代事實確認。
替代文字，先說明與理解有關的內容
替代文字是圖片無法被觀看時的重要說明，也有助於理解圖像主題。它不需要逐一描述所有顏色與背景，而應抓住與當下任務相關的資訊。不要為了 SEO，把產品、品牌與所有熱門詞彙反覆堆在同一個欄位。
| 圖片任務 | 替代文字示例 | 需要留意 |
|---|---|---|
| 辨識產品介面 | 設備背面的電源端子與通訊接口位置 | 核對圖中型號與配置 |
| 說明操作步驟 | 固定支架後再連接電源的安裝順序示意 | 不能取代完整安全文件 |
| 呈現方案差異 | 三種安裝方式的空間需求比較 | 確認單位與相同前提 |
純裝飾圖可以依網站無障礙設計安排，不必替它虛構技術意義。若圖片本身是連結，還要讓使用者知道它會通往什麼內容。替代文字與周圍連結文字應互相配合，不能只留下「圖片一」或「點我」這類無法判斷用途的名稱。
檔名與素材資料，讓團隊知道自己正在使用什麼
檔名可以簡短而有描述性，例如產品、用途或角度，不必包含整篇文章標題。更重要的是素材管理：保留原始檔、核准版本、適用產品、公開範圍與負責人。網站檔名再清楚，也無法代替內部版本管理。
例如同一張照片可能有原始高解析、文章用圖與縮圖，應能追溯它們來自哪一份素材。修改裁切或文字之後，也要保留用途說明，避免下一位同事拿錯版本。若檔案名稱只有「最終版二」，通常很難支持長期交接。
素材與產品知識可以一起整理，方法可見 企業知識交接指南。當產品改版時，團隊才知道哪些圖片、文件與文章需要同步回查，而不是只更新一份型錄。
圖片尺寸與格式，要配合實際呈現位置
首頁主視覺、文章封面、卡片縮圖與產品細節，各自需要不同的解析度與比例。請先確認顯示位置，再產出適合版本。很小的縮圖沒有必要一律載入過大的檔案，重要細節也不應為了壓縮而失去辨識能力。
照片、透明圖、線條圖與圖表的特性不同，應選擇網站能穩定呈現且適合內容的格式。壓縮後請實際檢查邊緣、文字、漸層與產品表面，不只看檔案變小多少。尤其細線圖示與尺寸圖，過度壓縮可能讓關鍵資訊變得模糊。
響應式圖片與載入安排，可以由網站人員依模板處理，再以桌面和手機驗收。若要一起改善載入與版面穩定，可接著看 網站效能與 Core Web Vitals，把圖片優化放回整體使用體驗。
手機裁切，要保住資訊而不只保住構圖
桌面看起來完整的圖片，在手機卡片或窄螢幕中，可能裁掉產品接點、文字或箭頭。請針對實際顯示比例檢查，必要時提供不同構圖。技術圖的優先順序，是保留讀者需要的資訊，不能為了填滿畫面而裁掉限制條件。
文字密集的資訊圖，也要確認是否適合放在手機內文。如果縮小後無法閱讀，可以拆成數張圖，或把關鍵內容改成網頁文字與表格。圖片可以輔助說明，但不應讓重要條件只能透過放大一張長圖才能找到。
圖像中的語言也要配合市場。若英文圖用在中文文章，請確認主要資訊有適合的文字說明；多語版本則核對單位、名稱與適用範圍。可搭配 多語內容整合服務，避免圖文在不同市場各自變動。
產品圖與示意圖，要清楚區分可確認的事實
概念插畫可以表現知識、流程或品牌氣氛，但不能替代真實產品外觀、接口、安裝與測試證據。若需要呈現精確結構，應使用核准圖面、正式素材或經專業確認的繪圖。畫面有科技感，不代表內容就符合產品條件。
若用示意場景說明應用，請交代它是情境示意，並確認不會暗示產品具有未核准的功能。案例照片則要核對公開範圍與文字說明，避免把不同專案的素材拼成同一個真實成果。案例整理可參考 B2B 案例內容指南。
圖片上的認證、標示與數字，同樣需要來源。不要為了讓視覺更有說服力，就自行補上徽章或性能圖。企業可信度的累積，來自圖文都能被核對，而不是讓每張圖片看起來都像完成了一個沒有紀錄的專案。
發布前，用一張視覺工作單一起驗收
工作單可以列出圖片用途、公開版本、顯示位置、替代文字、適用產品與核准人。編輯確認圖文脈絡，產品負責人確認外觀與條件，網站人員檢查比例、載入與手機裁切。各自負責的範圍清楚，才不會每個人都只看畫面是否漂亮。
也要檢查圖片是否真的載入、連結是否正確，以及檔案替換後有沒有沿用不適合的舊標題。若設定結構化資料，相關圖片與頁面內容應保持一致，必要時可依 結構化資料指南 一起核對。
驗收時可以請沒有參與設計的人說明：這張圖讓他理解了什麼、是否知道它是實拍還是示意、能否找出需要的細節。如果答案與原本用途不同，就回到圖說、構圖或文字重新調整。
更新產品時，把圖片引用一起找出來
同一張圖片可能用在產品頁、文章、簡報與多語文件。改版時，除了換掉主圖，也要回查其他引用位置。可以保留素材識別與使用清單，讓團隊知道哪些內容仍顯示舊配置，避免新舊資料同時對外使用。
若圖片需要撤換，先確認替代素材與受影響頁面，再安排更新與快取回查。只在素材庫刪除檔案，可能讓多個頁面留下破圖。內容盤點可依 舊文章更新指南 把圖片與文件一起列入工作。
定期回查不必重做整站設計，可以先抽查重要產品、熱門指南與近期更新內容。維護的是圖片的用途、正確性與可用性，當這三件事穩定，視覺才會長期支持品牌與客戶判斷。
常見問題
每張圖片都要放品牌關鍵字嗎？
不需要。ALT 應描述這張圖在當前段落的用途，品牌只有在辨識上必要時才加入。產品接口圖可說明型號與關鍵位置，流程圖則交代主要關係；純裝飾圖依無障礙設計處理。發布前對照實際圖片，移除不存在的細節和重複堆詞；若圖片是連結，周圍文字應能說明目的。ALT、圖說與正文互相配合，不應只把文章關鍵字貼到每張圖。
圖片壓得越小越好嗎？
不是。先看顯示位置、實際尺寸與圖片任務，再選格式與壓縮程度。照片可容許的細節損失不一定適合尺寸圖、產品接點或文字圖。壓縮後在桌面與手機實際查看文字、細線和必要細節，並檢查響應式版本與載入；若辨識受影響，就調整尺寸或改用網頁文字、表格。比較檔案大小之外，也要確認圖像仍能支持原本的判斷。
一張資訊圖可以取代整篇文字嗎？
通常不宜。關鍵定義、單位、條件和結論應有可閱讀文字，資訊圖輔助呈現關係。若圖片含大量文字，可拆圖並在旁提供重點或表格，讓手機與不同使用方式都能取得資訊。圖片更新時也要同步文字、圖說與來源。驗收時不依賴放大整張長圖，確認讀者能找到必要限制及下一步；資訊圖漂亮不代表文字缺口已被補足。
參考資料
本文為 AO2 獨立編寫的企業實作指南。工作情境與清單為方法示例；平台功能與技術規範請以所列官方文件為準。
