「可維護」是這個服務的核心承諾——不是丟完就爛，而是客戶能自己改、你能快速迭代、技術不會成為業務的包袱。
技術棧選擇矩陣
不同客戶需要不同的可維護策略。選擇技術棧前，先問：這個客戶多久會更新內容？更新的人是誰？
| 場景 | 推薦技術棧 | 可維護特性 | 限制 |
|---|---|---|---|
| 客戶幾乎不改內容（純展示） | Framer、Webflow（靜態） | 平台管理、自動更新 | 客戶修改版型需你介入 |
| 客戶定期改文字/圖片 | Webflow CMS、Framer CMS | 可視化編輯，非技術友善 | 平台費用 39/月 |
| 客戶需要完全掌控 | WordPress + 輕量主題 | 最大彈性，無平台鎖定 | 最高維護負擔（安全更新） |
| 技術客戶、開發者 | Next.js + Contentful/Notion | 高度自訂，Headless CMS | 需要技術人員介入 |
| 純 landing page、不改內容 | Astro、11ty 靜態站 | 極輕量、免費託管（Cloudflare/Vercel） | 無視覺化編輯 |
2025–2026 的觀察：Framer 在搜尋熱度上已超越 Webflow（SEMrush 數據）；Webflow 有 65.8 萬+ 線上網站，CMS 生態更成熟。兩者都是合理的主力選擇，根據客戶行業和維護需求決定。
⚠️ 框架標示：「哪個工具最好」沒有客觀答案，完全取決於客戶的使用場景、技術能力和預算。任何推薦工具的人如果不先問這些問題，是在說不完整的話。
可維護的定義（四個維度）
1. 客戶可自己更新內容
最低標準：客戶可以自己改文字、換圖片、更新聯絡資訊——不需要找你或任何技術人員。
怎麼做到：
- Webflow/Framer CMS：可視化編輯介面，非技術用戶能用
- WordPress：如果客戶願意學習，Gutenberg 編輯器夠直覺
- 交接教學文件：截圖步驟 + 短影片，降低學習門檻
不可接受的情況：客戶每次改一個電話號碼都需要寄 email 給你——除非這是付費維護月費的項目。
2. 你能快速迭代
可維護性對你的意義：6 個月後客戶想加一個新頁面，你能在 2 小時內完成，而不是重新熟悉代碼。
怎麼做到：
- 組件化設計（Figma 組件、Webflow Symbol、React 組件）——改一個地方、全站更新
- 清楚的 CSS 命名慣例（不要用
.div-123這種隨機 class） - 部署自動化（Vercel/Cloudflare Pages，push 即部署，不需要手動 FTP）
3. 效能達標（Core Web Vitals）
Google 從 2023 年起以 Core Web Vitals 作為搜尋排名因子——效能不好直接影響 SEO。
基線要求：
- LCP（Largest Contentful Paint）≤ 2.5 秒
- CLS（Cumulative Layout Shift）≤ 0.1
- FID/INP ≤ 200ms
怎麼達標：
- 圖片全部壓縮 + 使用 WebP/AVIF 格式
- 字型：只載入用到的字重，使用
font-display: swap - 避免阻塞渲染的 JavaScript（defer / async）
- 使用 CDN（Cloudflare、Vercel Edge Network）
工具：Google PageSpeed Insights（免費）、Lighthouse CLI 自動化測試。
4. 無障礙基線（Accessibility）
ADA 網站訴訟從 2017 年的 800 件增長到 2024 年的 4,000+ 件（可佐證事實）。WCAG 2.1/2.2 Level AA 是法律標準（美國 ADA、歐盟 EAA）。
最重要的 5 個 SEO 與無障礙重疊點（做好同時達到兩個目標）：
- Heading 層級：H1 只有一個，H2/H3 邏輯順序——搜尋引擎和螢幕閱讀器都依賴這個
- 圖片 alt text：所有功能性圖片都有描述性 alt text
- 連結描述性文字：「了解更多」改成「了解 [你的服務名稱] 更多」
- 鍵盤可導航：所有互動元素可用 Tab 鍵到達
- 色彩對比：文字和背景對比度 ≥ 4.5:1（WCAG AA 標準）
SEO 基本盤（每個案子必做）
這不是 SEO 顧問的工作範疇，但這些是基本盤——不做就是故意傷害客戶：
| 項目 | 工具/方法 | 難度 |
|---|---|---|
| Title tag（< 60 字元，含主關鍵字） | 手動設定 | 低 |
| Meta description（< 155 字元） | 手動設定 | 低 |
| Open Graph 標籤（社群分享預覽） | 手動或 CMS 設定 | 低 |
| 結構化資料（LocalBusiness schema） | JSON-LD | 中 |
| Google Search Console 提交 | 後台操作 | 低 |
| Sitemap.xml | 自動生成（Webflow/Next.js 內建） | 低 |
| robots.txt | 確認未阻擋爬蟲 | 低 |
| 手機友善確認 | Google Mobile-Friendly Test | 低 |
LocalBusiness schema 對在地小商務特別重要——直接影響 Google 本地搜尋的顯示（電話、地址、營業時間）。
「真實可維護」vs「交完收工」的對比
| 維度 | 交完收工 | 真實可維護 |
|---|---|---|
| 客戶改電話號碼 | 需要找你 | 自己在 CMS 改 |
| 6 個月後加一頁 | 幾乎要重做 | 套用現有組件，2 小時完成 |
| SSL 過期 | 需要手動續期 | 自動（Cloudflare/Vercel 內建） |
| 效能 6 個月後 | 未知 | 有監控，知道什麼時候要調整 |
| 遇到問題 | 客戶不知道找誰 | 有你，且你知道這個網站的狀態 |
延伸
- 交付工作流如何整合技術實作 → 交付工作流
- SDD 規格如何引導技術決策 → Problem Framing ＋ SDD
- 回到全景 → 小商務落地客製化網站服務首頁