內容圖片對題巡檢｜封面、Alt、OG image 與 Blog 卡片 QA 證據

長期經營內容站時，圖片很容易變成「先找一張能用的」：舊文章沿用泛用科技圖、Blog 卡片看起來沒有破圖、Open Graph 也有圖片，於是就被視為完成。但讀者看到的是整體可信度。若文章在講 WordPress 圖片替換，封面卻像 AI Agent 抽象插圖；文章在講短片分鏡，縮圖卻是普通程式碼畫面，內容品牌會慢慢失焦。

我會把圖片對題巡檢當成內容營運的一部分，而不是美術收尾。目標不是每次重畫全站圖片，而是針對最新文章、首頁可見文章、缺圖文章與明顯不符的舊文，留下可驗證的判斷證據：圖片為什麼適合、Alt 是否描述畫面、OG image 是否同步、Blog 卡片是否真的顯示。

先定義文章主題，不要從圖片庫反推

巡檢前先用一句話寫下文章真正要被讀者記住的主題。這句話會決定封面需要傳達什麼，而不是讓現有圖片庫決定文章看起來像什麼。

Article topic record
- slug: wordpress-image-replacement-alt-dimension-qa
- reader job: replace WordPress article images
- risk: avoid breaking SEO or rollback evidence
- visual concept: media library card, Alt text,
  dimension check, OG preview, rollback note
- avoid: generic AI robot, unrelated code editor,
  abstract cloud image

如果這段寫不清楚，通常代表文章標題、摘要或分類也可能需要整理。先把內容定位講清楚，再判斷圖片。

把圖片欄位視為一組，而不是只補 coverImage

在 UCAMC 這類 Markdown 內容站裡，圖片至少會影響三個位置：文章頁主圖、Blog 列表卡片、社群分享圖。只補一個欄位，可能讓畫面看起來正常，metadata 卻仍然使用舊圖或沒有 Alt。

我會一次檢查這組 frontmatter：

coverImage: "/images/blog/article-topic-cover.png"
coverAlt: "圖片內容與文章情境的具體描述"
featuredImage: "/images/blog/article-topic-cover.png"
draft: false

coverAlt 不應只寫文章標題，也不應塞關鍵字。比較好的寫法是描述畫面內容與文章情境，例如「顯示內容庫卡片、封面縮圖、Alt 文字、OG 預覽與放大鏡稽核面板」。讀者、螢幕閱讀器與未來維護者都能知道這張圖為什麼在這篇文章裡。

用四個畫面驗收圖片是否真的對題

圖片對題不是只看原圖檔。實際上線前，我會至少看四個位置。

Image relevance QA
- raw image: 200 image/png or image/jpeg
- article page: featured image visible and topic-matched
- blog listing card: crop keeps the important subject visible
- social metadata: og:image / twitter:image point to the same intended asset

若 Blog 卡片裁掉了圖片中的關鍵文字，即使原圖很漂亮也不算通過。若文章頁是新封面，但 og:image 仍指向舊圖，社群分享時會繼續傳遞錯誤印象。這些都要在巡檢紀錄裡分開寫清楚。

什麼時候該生成新圖

不是每篇舊文章都需要新圖。如果舊 Cloudinary 圖片與主題高度相符、狀態碼正常、裁切也合理，保留它通常比重畫更好。真正需要產生新圖的情況包括：

文章沒有 coverImage、featuredImage 或 coverAlt。
現有圖片是泛用科技圖，無法看出文章主題。
圖片講的是舊工具或舊事件，與整理後的文章定位不一致。
首頁或 Blog 列表可見文章的圖片品質明顯拖累品牌感。
社群分享圖與文章主題不一致，會讓點擊前的期待錯位。

生成新圖時，我會把 prompt 寫成「文章主題 + 需要出現的視覺元素 + UCAMC 品牌氣質 + 避免項目」。避免只寫「tech blog cover」，否則很容易得到好看但不對題的泛用圖。

巡檢紀錄要能讓下一次接手

圖片巡檢最有價值的部分，是讓下一次維護者不用重新猜測。每次替換或確認圖片時，留下簡短紀錄即可。

Content image audit note
- checked at: 2026-08-30 09:10 Asia/Taipei
- article: content-image-topic-relevance-audit
- decision: generated a topic-specific UCAMC technical cover
- image response: 200 image/png
- article page: cover visible, no horizontal overflow
- blog card: first card shows correct image and title
- rollback: previous image none; keep generated file in public/images/blog/

這份紀錄不需要很長，但要能回答三個問題：為什麼換？換成什麼？怎麼知道它正常？

不要把「沒有破圖」誤當成品牌完成

很多內容站的圖片問題不是 404，而是「看起來都差不多」。技術 Blog 若每篇都用抽象雲端、程式碼、機器人與儀表板，短期可以維持整齊，長期卻會讓讀者分不出 WordPress、前端、SEO、短片動畫與漫畫製作的差異。

圖片對題巡檢的重點，是讓每篇文章的封面成為內容的入口：WordPress 文章看得出後台、媒體庫、快取或權限；前端文章看得出版面、DevTools、互動狀態；短片與漫畫文章看得出分鏡、字幕、輸出版本；SEO 文章看得出 sitemap、canonical、OG 與 route 證據。

一次處理少量，但要持續輪替

每日維護不需要一次替全站重做圖片。比較可持續的節奏，是每次處理幾篇優先文章：最新文章、首頁 Hero 文章、Blog 第一屏、缺 metadata 的文章、明顯圖文不符的文章。完成後記錄下一批候選，讓巡檢變成長期營運節奏。

這樣做的好處是，內容庫會逐步變得更專業，而不是靠一次大型改版。每篇文章的封面、Alt、OG 與列表卡片都能對上主題，UCAMC 才會像一個持續整理、持續驗證的技術內容品牌，而不是只把舊文章搬到新架構裡。

內容圖片對題巡檢：把封面、Alt 與 OG 圖留成可驗證證據