前端視覺回歸檢查清單｜內容網站首頁、Blog 與文章頁維護

內容網站每天都會新增文章、調整分類、補 metadata，版面卻不一定會在 build 失敗時才出問題。有些問題比較像「品牌質感慢慢走樣」：首頁最新文章卡片太擠、Blog 列表標籤換行不好看、文章頁圖片 alt text 變成空白、行動版 CTA 被擠到很後面。

這份清單整理 UCAMC 類型技術 Blog 可以每天或每次發佈後快速跑過的前端視覺回歸項目。重點不是做大型 redesign，而是用小步驟確保網站長期看起來穩定、專業、可閱讀。

1. 先確認三個主要入口

每次新增內容後，至少打開這三個頁面：

首頁 /：確認 Hero、最新文章與分類入口仍然清楚。
Blog 列表 /blog：確認新文章出現在上方，摘要與分類不會擠成一團。
新文章 root-level /{slug}：確認標題、日期、分類、標籤、封面圖與內文段落都正常。

UCAMC 的文章 canonical URL 是 root-level /{slug}，/blog 只是列表頁。因此巡檢重點要放在真正的文章網址，而不是把 /blog/{slug} 當成必須存在的文章頁。

2. 首頁 Hero 要像入口，不要像資訊堆疊

首頁 Hero 通常最容易在每日更新中累積雜訊。檢查時可以問：

主標題是否仍能在桌機與手機上自然換行？
主要 CTA 是否比次要 CTA 更明顯？
最新文章卡片是否只提供一個清楚的下一步，而不是塞入太多 mini-list？
分類或焦點連結是否像導覽，而不是像報表數字？

如果 Hero 同時出現太多「最新」、「導讀」、「更多文章」、「分類統計」，讀者反而不知道要點哪裡。比較好的做法是把 Hero 保持成入口，把完整列表留給下方區塊。

3. Blog 列表要檢查可掃讀性

Blog 列表不是單純把文章印出來。它應該讓讀者快速理解：這篇文章談什麼、屬於哪個主題、是否值得點進去。

建議檢查：

第一張卡片是否是最新非草稿文章。
標題是否可讀，沒有被過長英文或路徑撐破。
excerpt 是否像摘要，而不是截到一半的程式碼或裸露網址。
分類與 tag 是否維持一致的大小與間距。
CTA 文案是否穩定，例如「閱讀文章」而不是每張卡片都不同。

若摘要出現大量 https://、測試 placeholder 或 Markdown 殘留符號，應該回到文章 frontmatter 補乾淨的 excerpt。

4. 文章頁要同時檢查內容與品牌

文章頁通過 build 不代表呈現品質足夠。發佈後至少確認：

h1 與 SEO title 的主題一致，但不要完全像關鍵字堆疊。
日期、Updated 資訊與作者顯示清楚。
封面圖可載入，且 alt text 能描述圖片用途。
內文的小標、清單、連結、inline code 沒有破版。
內部連結使用 root-level 文章路徑，例如 /nextjs-content-site-health-check-template。

如果文章包含檢查清單或工作流程，最好把每一節都寫成讀者可直接執行的步驟，而不是只有概念描述。

5. 行動版先看「順序」再看細節

手機版最重要的不只是元素有沒有縮小，而是閱讀順序是否正確。可以用 390px 左右寬度快速確認：

Logo 與導覽沒有水平溢出。
Hero 主標與主 CTA 在輔助資訊前出現。
最新文章卡片不會左右滑動。
圖片寬度不超出文章容器。
footer 與次要資訊不會擠壓主要內容。

如果手機版要滑很久才看到主要 CTA，通常不是 CSS bug，而是內容層級需要重新排序。

6. 把視覺巡檢接到技術驗證

視覺檢查應該和技術驗證一起跑，而不是分開做。每次發佈後可以用這組最小流程：

npm run lint
npm run build
npm run start -- --hostname 127.0.0.1 --port 3000

接著用 curl 或瀏覽器檢查：

/ 回傳 200。
/blog 回傳 200。
新文章 /{slug} 回傳 200。
/sitemap.xml 包含新文章 canonical URL。
/robots.txt 指向 sitemap。
舊 WordPress ID-prefixed URL 301 到 root-level URL。

這樣可以同時涵蓋 type/lint、production build、route、SEO 與實際畫面。

7. 可複製的每日巡檢表

下面這份短表可以貼到任務或 issue 裡重複使用：

[ ] 首頁 Hero 主標、CTA、最新文章卡片正常
[ ] /blog 第一篇是最新文章，摘要與分類可讀
[ ] 新文章 /{slug} 標題、日期、分類、封面圖、內文正常
[ ] 手機版無水平溢出，CTA 出現順序合理
[ ] sitemap.xml 包含新文章，robots.txt 指向 sitemap
[ ] legacy ID-prefixed URL 301 到 root-level canonical
[ ] 沒有 placeholder、裸露測試 URL、壞圖或空 alt

延伸閱讀

如果你正在維護 Next.js 內容站，可以接著看：

小結

前端視覺回歸不是只有大型團隊才需要。對長期經營的技術 Blog 來說，每天新增一點內容、調整一點版面，都可能改變讀者對品牌的第一印象。把首頁、Blog、文章頁、行動版與 SEO 路徑固定成清單，能讓網站在持續更新中保持一致，而不是等問題累積到需要重做時才處理。

前端視覺回歸檢查清單：讓首頁、Blog 與文章頁保持專業一致