UCAMC
← 回到 Blog
WordPress約 3 分鐘閱讀

WordPress 圖片替換 QA：把 Alt、尺寸與回滾證據留在發布紀錄

Updated 2026/08/29Leon
分類WordPress網站經營SEO
標籤#WordPress Media Library#圖片 SEO#Alt Text#Open Graph#內容維運#QA
WordPress 圖片替換 QA cover，顯示媒體庫圖片卡片、Alt 文字、尺寸、OG 預覽與回滾證據面板

WordPress 文章換圖看起來很簡單：打開媒體庫、上傳新圖、替換文章裡的圖片。但在長期經營的內容站裡，圖片不是裝飾品，而是 SEO、社群分享、品牌一致性與可回滾維護的一部分。若只記得「換過圖」，卻沒有留下原圖 URL、Alt 文字、尺寸、CDN 回應與 Open Graph 輸出，下一次排查破圖或分享卡片錯誤時就會很難追。

我會把圖片替換當成一次小型變更管理：先觀察，再修改，最後驗證與保留回滾資訊。這篇是一份可放進維護紀錄的 WordPress 圖片替換 QA 流程。

先記錄原圖，不要一上來就覆蓋

替換前先留下原圖證據，尤其是已經被搜尋引擎、社群平台或其他文章引用過的圖片。最少要記錄四件事：文章 URL、原圖 URL、媒體庫附件 ID、目前 Alt / caption。

Before replacement
- post url: https://example.com/article-slug/
- attachment id: 12345
- image url: https://example.com/wp-content/uploads/2026/08/old-cover.jpg
- alt: WordPress media library screenshot with cache warning
- caption: optional, currently shown below image
- usage: hero image, inline section image, og:image candidate

如果圖片是客戶案例、舊活動 Banner、工具截圖或教學步驟圖，更要避免直接覆蓋檔案。比較安全的做法是新增新檔、更新文章引用，並保留原圖在媒體庫或備份位置，直到確認沒有頁面仍需要它。

Alt 文字要跟著新圖重寫

很多圖片替換失敗不是因為檔案壞掉，而是 Alt 文字仍在描述舊圖。新圖如果從「後台截圖」換成「流程圖」，Alt 仍寫舊截圖，就會讓無障礙與圖片 SEO 都變得不準確。

我會把 Alt 寫成「圖片內容 + 文章情境」，而不是塞關鍵字。

Alt text review
- old alt: WordPress cache plugin screenshot
- new image meaning: media replacement QA evidence board
- new alt: WordPress 圖片替換 QA 流程圖，包含 Alt、尺寸、OG 預覽與回滾紀錄
- keyword stuffing: no
- describes visible content: yes

若文章中有多張相似圖片，Alt 還要能區分它們。例如「媒體庫列表截圖」與「前台文章 featured image 預覽」就不應該使用同一段 Alt。

檢查尺寸與裁切，不只看後台縮圖

WordPress 後台縮圖可能看起來正常，但前台 Hero、Blog 卡片或社群分享圖會使用不同尺寸。替換圖片後，我會記錄新圖原始尺寸、前台顯示比例與是否被裁掉重點文字。

Dimension check
- original image: 1600x900
- expected ratio: 16:9
- hero render: object-fit cover, key subject centered
- blog card render: no important text cropped
- mobile render: subject still visible at 390px width

若圖片含有文字，尤其要在手機預覽確認文字沒有被卡片裁切。能不用小字就不要用小字；技術文章 cover 最重要的是讓讀者一眼知道主題，而不是把整份 checklist 塞進圖片裡。

用 curl 分開檢查原圖與 CDN 變形圖

如果網站有 CDN、圖片最佳化外掛或 WebP/AVIF 轉換，必須分開檢查原始上傳 URL 與前台實際載入 URL。不要只相信媒體庫能打開。

curl -I https://example.com/wp-content/uploads/2026/08/new-cover.png
curl -I "https://cdn.example.com/image/resize/example-new-cover.webp"

我會在紀錄裡保存狀態碼與 content-type，而不是只寫「圖片正常」。

Image response evidence
- raw image: 200 image/png
- transformed image: 200 image/webp
- cache status: HIT after first load
- content-length: present
- unexpected redirect: no

若轉換圖回 404，但原圖是 200，通常要先查圖片最佳化外掛、CDN purge 或尺寸生成，而不是立刻把文章內容改來改去。

OG image 要用社群分享角度驗收

文章內圖片正常，不代表 Open Graph 圖片也更新了。很多 WordPress SEO 外掛會把 featured image、手動 OG image、舊快取與預設站台圖混在一起。替換重要文章 cover 後，我會檢查頁面原始碼或 SEO 外掛輸出。

Open Graph check
- og:image points to new cover: yes
- twitter:image points to new cover: yes
- image width/height metadata: present if plugin supports it
- cache refreshed: yes
- social debugger re-scrape needed: note

如果社群平台仍抓到舊圖，要把它當成快取問題記錄清楚：網站 HTML 是否已經更新？CDN 是否仍回舊 HTML？Facebook / X / Slack 是否需要重新抓取？不要只重傳更多圖片，否則媒體庫會越來越混亂。

前台預覽要看文章頁、列表卡片與相關文章

圖片替換的最後一步不是「更新」按鈕，而是前台視覺驗收。至少看三個位置：文章頁主圖、Blog / archive 列表卡片、相關文章或首頁導流卡片。

Frontend preview
- article hero image: visible, correct topic
- blog card image: visible, no crop issue
- related post card: visible, no stretched ratio
- mobile preview: no horizontal overflow
- lazy-load placeholder: replaced after image loads

這裡也要留意「圖文是否對題」。如果文章在講 WordPress 圖片替換 QA，卻沿用一張泛用 AI Agent 或抽象程式碼圖，即使技術上沒有破圖，也會降低品牌可信度。

回滾資料要能快速找到

圖片替換通常不是高風險部署，但仍應保留能回復的最小資訊：舊圖 URL、舊 Alt、替換時間、修改者、需要回滾時改回哪個附件 ID。

Rollback record
- changed at: 2026-08-29 09:10 Asia/Taipei
- changed by: content operator
- old attachment id: 12345
- new attachment id: 67890
- old alt retained: yes
- rollback action:
  set featured image back to 12345
  and restore old inline image URL

這份紀錄可以放在專案管理工具、Notion、repo 的內容維護筆記或文章更新記錄裡。重點是：三個月後有人問「為什麼這張圖換掉？」時，不需要靠記憶回答。

我的最小 QA 清單

真正可執行的版本可以很短。每次替換重要文章圖片時，我會保留這份紀錄：

WordPress image replacement QA
- before evidence saved: post url, old image url, attachment id, alt
- new image uploaded: filename, dimensions, attachment id
- alt / caption updated: yes
- raw image response: 200 image/*
- CDN/transformed image response: 200 image/* or not used
- article preview: pass
- blog/archive card preview: pass
- og:image / twitter:image: points to new image
- rollback path: old attachment id retained

圖片替換不需要變成大型流程，但它值得被看成一次正式內容變更。當 Alt、尺寸、OG、CDN 與回滾證據都留得清楚，網站經營者就能放心更新視覺品質，而不是每次換圖都擔心 SEO 或快取留下隱性問題。