模組一｜內容獲客系統
第一個模組負責讓 Google 和 AI 搜尋引擎主動把陌生人帶到你面前。
讓 Google 找到你，讓 AI 搜尋引擎引用你，讓訪客留下 Email
模組一能做到什麼
SEO Blog
→ 每篇文章都有獨立 URL、Meta description、結構化 H1/H2
→ 透過 Publish 指令從 IDOL Wiki 自動生成並發布
→ Google 索引 → 流量進來
GEO Wiki
→ 結構化 Q&A 格式，附 JSON-LD schema markup
→ Perplexity / ChatGPT Search 引用你的觀點
→ AI 搜尋引擎時代的流量入口
Lead Magnet
→ 一份免費資源（PDF / Checklist / 範本）
→ 訪客留 Email 才能下載
→ 每個訪客都進入你的 Email 培育漏斗
Email 訂閱
→ Resend API 接收訂閱
→ 免費方案：3000 封/月，每天 100 封
→ 新訂閱者自動收到歡迎信
最佳實務
SEO Blog 用 Payload CMS 管理內容，不寫死在程式碼裡。
每篇文章存在 Payload 資料庫，透過 API 讀取。 發布新文章 = 在後台新增一筆資料，網站自動更新。 不需要每次 deploy，不需要改程式碼。
GEO Wiki 要有 JSON-LD schema markup。
Google 和 AI 搜尋引擎都讀 structured data。 FAQ schema 讓 Perplexity 知道這是可引用的問答格式。 沒有 schema markup = GEO 優化只做了一半。
Lead Magnet 的下載連結要透過 API 產生，不能直接暴露 URL。
如果直接放 PDF 的靜態 URL，訪客不填 Email 也能下載。 正確做法：填 Email → API 驗證 → 生成限時下載連結 → 寄信 + 回傳連結。
Resend 是目前最適合 OPC 的發信服務。
免費方案夠用，API 簡單，Next.js 整合一流。 不需要 Mailchimp、不需要 ConvertKit，就用 Resend 出發。
前置條件
□ Next.js + Payload CMS 專案已建立並部署到 Vercel
□ Resend 帳號（免費）：https://resend.com
→ 建立 API Key，記下來
→ 驗證你的發信網域（或用 Resend 提供的測試網域）
□ 已有 Lead Magnet 檔案（PDF 或任何格式）
→ 沒有的話先用佔位符，之後替換
□ IDOL Wiki 已建立（Claude Code 生成 Blog 時會讀取 voice.md 和 beliefs.md）
Claude Code 指令
我的專案是 Next.js App Router + Payload CMS 3.x + Tailwind CSS + TypeScript。
專案已部署到 Vercel，資料庫使用 Postgres。
請幫我建立模組一：內容獲客系統，包含以下四個功能：
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【A】SEO Blog 系統
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
在 Payload CMS 建立 Blog collection：
欄位：
- title（text，必填）
- slug（text，必填，自動從 title 生成，唯一）
- excerpt（textarea，150 字以內，用於 Meta description 和列表預覽）
- content（richText，使用 Payload 內建 Lexical editor）
- coverImage（upload，關聯 media collection）
- category（text，例如：AI工具 / 創業心法 / 案例分享）
- tags（array of text）
- publishedAt（date）
- status（select：draft / published）
- seo（group）：
- metaTitle（text）
- metaDescription（text，150 字以內）
- ogImage（upload）
在 Next.js 建立以下頁面：
/blog（列表頁）
→ 顯示所有 status=published 的文章
→ 顯示：封面圖 / 標題 / excerpt / 分類 / 日期
→ 支援分類篩選
→ 每頁 12 篇，有分頁
/blog/[slug]（文章頁）
→ 顯示完整文章內容
→ Meta title = seo.metaTitle 或 title
→ Meta description = seo.metaDescription 或 excerpt
→ OG image = seo.ogImage 或 coverImage
→ JSON-LD schema：Article type
→ 文章底部：相關文章（同分類的最新 3 篇）+ Email 訂閱 CTA
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【B】GEO Wiki 系統
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
在 Payload CMS 建立 GeoWiki collection：
欄位：
- question（text，必填，例如：「什麼是 AI 一人公司？」）
- slug（text，必填，自動生成）
- shortAnswer（textarea，100 字以內，AI 搜尋引擎引用的核心答案）
- fullAnswer（richText，完整說明，包含 What / Why / How 三段結構）
- topic（text，大主題分類，例如：AI創業 / AIOPC / Agent工具）
- relatedQuestions（array of text，3–5 個相關問題的 slug）
- publishedAt（date）
- status（select：draft / published）
在 Next.js 建立以下頁面：
/geo-wiki（列表頁）
→ 按 topic 分組顯示所有已發布條目
→ 每個條目顯示：問題 + shortAnswer 前 50 字
/geo-wiki/[slug]（條目頁）
→ 顯示完整問答
→ JSON-LD schema：FAQPage type（這是 GEO 優化的核心）
格式：
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "問題文字",
"acceptedAnswer": {
"@type": "Answer",
"text": "shortAnswer 文字"
}
}]
}
→ 頁面底部：相關問題連結（從 relatedQuestions 查詢）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【C】Lead Magnet 系統
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
在 Payload CMS 建立 LeadMagnet collection：
欄位：
- title（text，資源名稱）
- description（textarea）
- file（upload，關聯 media collection，access control 設為 private）
- isActive（boolean，控制是否開放下載）
建立 API route：POST /api/lead-magnet/[id]/download
→ 接收：{ email: string, name: string }
→ 驗證：email 格式、LeadMagnet isActive
→ 執行：
1. 將訂閱者加入 Resend audience
2. 發送歡迎 Email（包含下載連結）
3. 下載連結使用 Payload 的 signed URL 或 redirect 到 media URL
→ 回傳：{ success: true, message: "下載連結已寄到你的信箱" }
建立 /lead-magnet 頁面：
→ 顯示資源說明
→ 一個 Email + 姓名的表單
→ 送出後呼叫 API，顯示成功訊息
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【D】Email 訂閱系統
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
安裝 Resend：npm install resend
在 .env.local 加入：
RESEND_API_KEY=re_xxxxxxxxxxxx
RESEND_AUDIENCE_ID=xxxxxxxx（從 Resend dashboard 建立 audience 後取得）
FROM_EMAIL=newsletter@你的網域.com
建立 API route：POST /api/subscribe
→ 接收：{ email: string, name?: string }
→ 用 Resend SDK 將訂閱者加入 audience
→ 發送歡迎信：
主旨：「歡迎加入，這是你訂閱的第一封信」
內容：簡短自我介紹 + 說明接下來會收到什麼 + 一個有用的資源連結
→ 回傳：{ success: true }
建立可複用的 NewsletterForm 元件：
→ 輸入框（email）+ 按鈕
→ 送出中 loading 狀態
→ 成功 / 失敗訊息
→ 這個元件要在 Blog 文章頁底部、首頁、Lead Magnet 頁面都用到
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
技術規格：
- 所有頁面使用 Tailwind CSS 撰寫，不引入其他 UI library
- 所有 Payload query 使用 Local API（不是 REST API）
- 圖片使用 Next.js Image 元件，開啟 blur placeholder
- 所有頁面要有正確的 generateMetadata 函數
- 完成後告訴我每個功能的測試方式