行銷頁健檢器:貼個網址,30 秒看你的活動頁哪裡漏分 封面

快速連結

一句話

貼上你的活動頁 / landing page 網址,30 秒給你一份健檢報告:六大類各自打分,告訴你哪裡漏分,還附上可以直接複製給 AI 的修正 prompt。

做行銷頁最常見的狀況是:頁面看起來沒問題,但分享到 LINE / FB 沒有預覽圖、搜尋引擎跟 AI 抓不到、CTA 藏在最下面、圖片肥到載很久、追蹤碼根本沒裝。這些都不會「報錯」,但每一個都在默默漏掉轉換。這個小工具就是把這些看不見的扣分項一次照出來。

它檢查什麼

貼一個網址,它從六大類去體檢:

  • 分享卡(OG) —— og:title / og:description / og:image 在不在、圖規格對不對。沒有的話,分享出去就是一條沒有預覽圖、標題空白的乾連結。
  • 被找到(SEO / AI) —— title、description、結構化資料這些「讓搜尋引擎跟 AI 看得懂你在賣什麼」的基本盤。
  • 轉換 CTA —— 有沒有明確的行動呼籲、藏得會不會太深。
  • 圖片速度 —— 實際去抓圖片的大小(HEAD request),揪出拖慢首屏的肥圖。
  • 基本體質 —— 頁面的基礎健康項。
  • 追蹤 —— 有沒有裝分析 / 轉換追蹤,不然你連成效都量不到。

每一項不只給「過 / 不過」,還給白話的修法。最好玩的是:每個問題都附一段可以直接複製、貼給 AI 的修正 prompt。例如它抓到你沒有分享圖,就直接給你一句「幫我加 og:image meta,指向一張 1200x630 的分享圖完整網址」—— 你複製貼給 Claude / Codex,它就照著改。健檢完不是丟一堆術語讓你自己想辦法,而是直接把「下一步怎麼修」也準備好。

怎麼做的

架構刻意簡單,兩層:

  • 前端 index.html(GitHub Pages):輸入網址 → 呼叫 Worker → 把回來的 JSON 畫成分數卡。純靜態,沒有後端伺服器要養。
  • 後端 worker/(Cloudflare Worker):抓目標頁的 HTML → 用 HTMLRewriter 解析 → 跑六類純函式檢查 → 對圖片發 HEAD request 抓大小 → 加權算總分 → 回 JSON。含 CORS、每 IP 限流,還有 SSRF 護欄(擋掉指向內網 / loopback 的網址,不讓人拿它當跳板打內部服務)。

把「檢查邏輯」做成純函式(worker/checks.js:吃一份 PageData 回結果)有個好處 —— 它跟「抓網頁、解析 HTML」的 runtime 完全分開,所以可以在 node 端用 vitest 直接單元測試,不用真的去打一個網站。解析層(HTMLRewriter)歸 Worker runtime,檢查層歸純函式,各自獨立。

cd worker
npm install
npm test            # 純函式檢查的單元測試
npx wrangler deploy # 部署 Worker

為什麼做這個

我自己在做行銷頁 / 課程 landing 的時候,反覆在檢查同一份清單:OG 補了沒、分享圖規格對不對、CTA 夠不夠明顯、圖片有沒有壓。與其每次手動查,不如做成一個貼網址就跑的工具 —— 順便也給任何在做活動頁的人用。它本身不賣什麼,就是一個照妖鏡:把你頁面上看不見的漏分項,一次攤開來。

歡迎拿你自己的頁面去測測看,有 bug 或想加的檢查項開 issue。

想支持持續開發? 請我喝杯咖啡 → buymeacoffee.com/yazelin