| 6 | 字體大小 | 所有文字 ≥ 16px（開發者工具測量） | ☐ | | 7 | 無橫向滾動 | 整個頁面不需左右拖拉 | ☐ | | 8 | 圖片不溢出 | 確認所有圖片在螢幕範圍內 | ☐ | | 9 | 表單可用 | 輸入欄位不需左右拖拉 | ☐ | | 10 | navigationGuard | 後台編輯頁離開時彈出確認框（頁面+新分頁都測） | ☐ |
8.3 桌面版檢查
| # | 檢查項目 | 方法 | 通過 |
|---|---|---|---|
| 1 | nav sticky | 捲動頁面，確認導航列固定在頂部 | ☐ |
| 2 | 對比表 | 確認是 <table> 格式，非手機卡片 | ☐ |
| 3 | hover 光暈 | 0_0_20px_rgba(主色,0.15) + duration-[1200ms] | ☐ |
| 4 | 所有 hover | 每個可點擊元素 hover 有過渡動畫 | ☐ |
| 5 | 暗色模式 | 切換暗色模式，區塊背景正確（非黑色） | ☐ |
| 6 | 圖片比例 | 確認照片無變形 | ☐ |
8.4 後台 CMS 檢查
| # | 檢查項目 | 說明 | 通過 |
|---|---|---|---|
| 1 | OAuth 登入 | /api/auth → 302 導向 GitHub | ☐ |
| 2 | Token 登入 | 用 Token 可正常進後台 | ☐ |
| 3 | 看得到內容 | 後台左側選單顯示所有 collection | ☐ |
| 4 | 新增文章 | 新增一篇測試文 → 發布 → 前台出現 | ☐ |
| 5 | 編輯文章 | 修改既有文章 → 發布 → 前台更新 | ☐ |
| 6 | 刪除文章 | 刪除測試文 → 前台消失 | ☐ |
| 7 | 上傳圖片 | 上傳一張圖片 → 出現在媒體庫 | ☐ |
| 8 | navigationGuard | 點「新建/編輯」→ 輸入內容 → 按 F5 → 是否彈確認框 | ☐ |
8.5 OAuth 檢查
| # | 檢查 | 指令 | 通過 |
|---|---|---|---|
| 1 | Worker 有部署 | Cloudflare Workers & Pages → oauth-worker | ☐ |
| 2 | 環境變數 | env.GITHUB_CLIENT_ID、env.GITHUB_CLIENT_SECRET、env.REDIRECT_URI | ☐ |
| 3 | 回呼路徑 | REDIRECT_URI = https://你的網域/api/auth/callback | ☐ |
| 4 | Routes 路徑 | https://你的網域/api/* → oauth-worker | ☐ |
8.6 交付清單（給客戶前最後確認）
| # | 項目 | 通過 |
|---|---|---|
| 1 | 網域可正常訪問 | ☐ |
| 2 | 後台網址可登入（https://網域/admin/） | ☐ |
| 3 | 把後台帳號/密碼存到客戶的 1Password 或 KeePass | ☐ |
| 4 | 後台使用說明頁（/admin-guide）可訪問且正確 | ☐ |
| 5 | 聯絡表單寄得到客戶信箱 | ☐ |
| 6 | OAuth 憑證屬於客戶（非共用） | ☐ |
| 7 | 告知客戶後台操作方式（新增/編輯/刪除） | ☐ |
| 8 | 告知客戶 30 天保固範圍（不包含新功能開發） | ☐ |
| 9 | 保固聯絡方式（Email / LINE / Telegram） | ☐ |
保固聲明模板： 「網站交付後提供 30 天技術保固，包含：部署異常修復、後台無法登入、頁面異常掛掉。不包含：新功能開發、內容填寫、SEO 優化。超過 30 天後依維護方案計費。」
[[#table-of-contents|← 回目錄]]
第 9 章：上線後營運
👤 你：決策營運方向、追蹤數據 — 🤖 AI：解讀 GA4 數據、提供 SEO 建議、產出監控告警
9.1 SEO 技術面：確保 Google 能找到你
每篇文章的 meta 公式（直接在 Sveltia CMS 填）
| 欄位 | 寫法 | 範例 |
|---|---|---|
| title | [關鍵字] - [站名]，40-55 字 | 「2026 京都賞楓自由行攻略 - 銘的旅誌」 |
| description | 含 1 次關鍵字，120-155 字 | 「完整京都賞楓路線、花費、交通，附 2026 最新紅葉情報。」 |
| cover image | 1200×630 封面圖 | og-cover.webp |
| h1 標題 | 含 1 次關鍵字 | <h1>京都賞楓自由行攻略</h1> |
| 第一段 | 開頭 100 字含關鍵字 | 「每年 11 月，京都清水寺周邊進入…」 |
不要做的事（會扣分或除名）
| ❌ 不要 | 後果 |
|---|---|
| 標題塞滿關鍵字（keyword stuffing） | Google 會降排名 |
| 直接抄襲別人整篇文章 | 重複內容會被隱藏或除名 |
| 白色字體隱藏關鍵字 | 黑帽 SEO，站點可能被除名 |
| 文章內互連農場（PBN） | Google 已能偵測，無效且危險 |
Google Search Console 提交（上線後 24 小時內必做）
① 打開 https://search.google.com/search-console
② 選「網址前置字元」→ 輸入 https://你的網域
③ DNS 驗證（最穩定）：
Cloudflare → 你的網域 → DNS → Records → 新增
類型: TXT 名稱: @ 內容: google-site-verification=xxxxxxxxxx
④ 等 1-2 分鐘 → 點驗證按鈕
⑤ 左側選單 → Sitemap → 輸入 sitemap-index.xml → 提交
⑥ 等 2-3 天 Google 開始爬取
9.2 SEO 策略面：讓客戶自己找到關鍵字
客戶不需要花錢請 SEO 顧問。教他們三步驟：
① Google 搜尋框 → 打字 → 看自動建議 → 這些就是真人搜的字
② 競品網站 → F12 開發工具 → <title> 標籤 → 看在打什麼關鍵字
③ 問 ChatGPT：「我是[XX行業]，台灣客戶會用什麼關鍵字在 Google 找我？
給我 10 個長尾關鍵字，不要品牌名」
④ Search Console → 成效報表 → 看到哪些字已經帶流量 → 繼續寫這些主題
地方服務業加碼：Google 我的商家
餐廳、民宿、SPA、咖啡廳、工作室 → 去 business.google.com 建立商家檔案。在 Layout.astro 的 JSON-LD 加入經緯度後，Google 地圖會自動串聯網站。
關於「多久會排上去？」的誠實回答：
| 時間 | 會發生什麼 |
|---|---|
| 1-2 週 | Google 發現你的網站（搜 site:你的網域 確認） |
| 1-3 個月 | 開始有零星搜尋流量（長尾關鍵字先） |
| 3-6 個月 | 穩定排名（條件：持續發文、內容原創、沒有黑帽） |
| 6 個月+ | 關鍵字排名逐漸提升 |
如果有人跟你說「保證一個月排上第一頁」，他在騙你。 Google 不保證排名，只保證收錄（透過 sitemap）。
9.3 GA4 流量追蹤
取得 GA4 追蹤碼
① 打開 https://analytics.google.com
② 左下 ⚙️（管理）→ 資料串流 → 新增串流 → 網站
③ 輸入網域，點「建立串流」
④ 複製「評估 ID」（格式 G-XXXXXXXXXX）
⑤ 貼入 src/layouts/Layout.astro 的 <head>
<!-- Google Analytics 4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
30 天後回去看的三個數字
| 指標 | 在哪看 | 健康值 |
|---|---|---|
| 日均瀏覽次數 | GA4 → 報表 → 生命週期 → 流量開發 | > 10 |
| 哪些頁面最熱門 | GA4 → 報表 → 生命週期 → 參與 → 網頁和畫面 | — |
| 跳出率 | GA4 → 同上 | < 70% |
9.4 Lighthouse 效能檢查
每次部署後跑一次，確保效能沒退化：
① Chrome DevTools（F12）→ Lighthouse 頁籤
② Mode: Navigation
③ 勾選 Desktop 和 Mobile 各跑一遍
| 指標 | 目標 | Astro 靜態站正常表現 |
|---|---|---|
| Performance | ≥ 90 | 95-100 |
| Accessibility | ≥ 95 | 100 |
| Best Practices | ≥ 90 | 100 |
| SEO | = 100 | 100 |
常見扣分原因與對策：
| 扣分原因 | 解法 |
|---|---|
| 圖片過大（WebP > 200KB） | 後台重傳較小尺寸，或等 Actions 自動壓縮 |
圖片沒設 width / height | <img width="800" height="600" ...> |
| 字體未 preload | 加 <link rel="preload" href="/fonts/..." as="font" crossorigin> |
| 第三方 script 阻塞 | Astro 靜態站幾乎沒這個問題 |
9.5 多語系方案預告
目前模板不支援多語系。如果客戶需要：
| 方案 | 複雜度 | 適合場景 |
|---|---|---|
| 開兩個 repo（中文站 + 英文站） | 低 | 內容少的小站 |
Astro i18n routing（/zh/、/en/） | 中 | 內容多、需要前後台雙語 |
| 部落格文章用 AI 逐篇翻譯 | 低 | 先用手動檔著 |
建議等客戶真的有需求和預算再做，不要預先過度設計。
9.6 客戶關懷與長期維護
每季客戶關懷 SOP
每 3 個月，發一封關懷信給所有客戶。目的是：確認網站正常 + 提醒更新內容 + 自然引出追加需求。
主旨：[客戶站名] 網站第 X 季健檢報告
Hi [客戶名]，
本季網站健檢報告：
✅ 網站正常上線中，SSL 憑證自動更新
✅ 後台可正常登入與編輯
✅ Google 收錄頁數：[N] 頁（Search Console 可查）
小建議：如果你這季有新作品/新文章，現在更新會讓 Google
更常來爬你的網站，搜尋排名會更好。