technine.io
白色拼圖的特寫,中間缺了一塊,露出底下的藍色表面,畫面沒有文字或標誌。

指南

甚麼是 Headless CMS?與傳統 CMS 有何分別

Headless CMS 負責儲存和管理內容,但不負責顯示;網站和 App 透過 API 取得內容後自行呈現。了解它與傳統 CMS 的分別,以及中小企何時適合採用。

更新於

Headless CMS 是一種內容管理系統,用來儲存頁面、文章、產品資料和圖片等內容,但不決定內容的外觀。網站、App 和其他渠道透過 API 取得內容,再按各自的設計顯示。「head」指訪客看到的前端;Headless CMS 把前端與編輯人員工作的後台分開。

傳統 CMS 與 Headless CMS

  • 傳統(耦合式)CMS:內容編輯、版面範本和公開網站都在同一個系統內。典型的 WordPress 式網站就是這樣運作:編輯撰寫頁面,佈景主題決定版面,再由 CMS 生成頁面。
  • Headless CMS:CMS 只管理內容,並透過 API 提供內容。另一個獨立的前端,例如網站、手機 App 或資訊亭螢幕,向 CMS 索取內容,並自行處理版面和設計。
  • 混合做法:部分傳統 CMS 亦提供 API,部分 Headless 產品則加入預覽或頁面編輯工具,比較時應看實際功能。

內容如何由 CMS 送到螢幕

編輯人員以結構化欄位建立內容,例如一項產品分為名稱、簡介、價格、圖片和類別,而不是寫成一整頁。前端向 CMS 的 API 索取所需內容,再把每個欄位放進自己的設計。不少網站會預先生成頁面,在內容更新時重新生成,通常由 CMS 發出的 Webhook 觸發,再經 CDN 提供給訪客。

內容不綁定版面,同一項內容可以出現在網站、手機 App 或 PWA 內,也可以透過系統整合送到其他系統。

多語言內容

以英文、繁體中文和簡體中文發佈內容的企業,可以把每種語言儲存為同一項內容的不同版本,各有標題、內文、網址 slug 和 SEO 欄位。選擇時應了解:缺少翻譯時如何處理、替代文字能否按語言設定,以及編輯人員能否看到哪些語言仍未完成。

好處

  • 設計較自由。前端不受佈景主題範本限制。
  • 多個渠道共用一個內容來源。網站和 App 可以使用同一批內容,更新一次即可。
  • 效能上有更多選擇。預先生成並快取的頁面有助提升速度,但實際效果視乎前端的建構方式。
  • 前後分開。公開網站不會直接暴露編輯系統,日後亦可只重建其中一方。

缺點

  • 需要開發人員。前端要有人建立和維護;新增頁面類型通常要經開發。
  • 預覽和編輯較麻煩。編輯人員在表格中填寫,而非直接在頁面上修改;要看草稿的實際效果,須在 CMS 與前端之間設定預覽。
  • 建置成本較高。內容模型、前端、預覽和部署都需要規劃和建立。
  • 涉及的部分較多。CMS、前端和寄存服務可能來自不同供應商,各有自己的方案和限制。

中小企何時適合,何時不適合

如果內容要在多於一個渠道出現、網站需要佈景主題做不到的設計、多種語言要保持同步,或網站本身是較大型 Web App 的一部分,Headless CMS 通常較合適。前提是有持續的開發支援。

如果只是一年更新幾次的簡單公司網站、推出後沒有開發人員跟進,或編輯人員希望自行拖放調整版面,Headless CMS 未必值得。維護得當的傳統 CMS 或網上建站平台可能更簡單。另可參閱整網頁前必須知道的 5 個概念。

以下為說明用例子:一間培訓中心在網站和會員 App 上顯示課程資料。職員只需在 Headless CMS 修改一次課程日期,兩邊便會同步顯示。

選擇 Headless CMS 前的檢查清單

  • 現在和未來幾年,哪些渠道會使用這些內容?
  • 有哪些內容類型,每種需要甚麼欄位?
  • 需要多少種語言?每種語言由誰審批?
  • 編輯人員是否需要視覺預覽?修改會如何在 Staging 環境測試?
  • 推出後由誰維護前端?
  • CMS 方案的限制涵蓋甚麼(用戶數目、API 請求、儲存空間)?日後能否匯出內容?
  • 是否需要連接預約、付款或 CRM 系統?
  • 前端應該是網站、Web App 還是手機 App?可參閱Web App 與手機 App 的比較。

可參閱我們的網站及 Web App 開發服務,或手機 App、Web App 及微信小程序開發頁面。

常見問題

Headless CMS 是否比 WordPress 好?

不能一概而論。簡單網站由編輯人員自行管理,傳統做法通常較快;Headless 做法對設計和渠道有更大控制權,但需要開發支援。

WordPress 可以用作 Headless CMS 嗎?

可以。WordPress 內置 REST API,獨立的前端可以透過它取得內容,但會失去部分佈景主題功能,前端亦要自行建立。

Headless 網站對 SEO 有利嗎?

視乎前端。搜尋引擎看的是它收到的頁面,所以前端必須輸出正確的標題、描述和語言標記,並讓頁面快速載入。

現有網站可以轉用 Headless CMS 嗎?

通常可以,但要當作一個項目處理:內容要對應到新欄位,網址要保留或設定轉址,前端亦要重建。

諮詢WhatsApp