dotdot.com — 網站平台現代化
以 headless WordPress 加 Astro 架構重建內容主導的網站，加強技術 SEO 和效能根基，並整合數據分析與推廣追蹤。
概覽
dotdot.com 是一個香港品牌網站，靠推廣活動、WhatsApp 查詢和付款連結銷售。公開網站現在是 Astro 靜態網站，市場推廣團隊則繼續在獨立的後台網域用 WordPress 編輯。在 WordPress 發佈會自動觸發重新建置，團隊保留熟悉的編輯工具，訪客則得到預先生成、載入快速的頁面。
開發範疇
- ▹WordPress（後台網域）作內容管理；公開網域使用 Astro 靜態頁面
- ▹每頁的 Rank Math SEO 欄位在建置時寫入靜態 HTML
- ▹全站轉換事件：WhatsApp、購買、電話、預約及表格操作
- ▹效能優化後頁面大小和 LCP 有實測改善
挑戰
推廣頁面要快，編輯工具不能丟
品牌靠推廣活動運作：新品推出、優惠、活動和文章，客人主要透過 WhatsApp 和付款連結查詢及購買。網站需要一個市場推廣團隊已經熟悉的發佈流程、快速的公開頁面、搜尋曝光，以及可靠地量度哪些推廣真正帶來查詢和購買。
我的角色與職責
由內容模型到部署流程
我主導技術重建，並與客戶及其市場推廣人員進行多輪檢討修改。
- 架構：把 WordPress 編輯後台與公開前端分開，並設計兩者之間的內容流程
- 前端：開發 Astro 頁面、共用組件和響應式版面，逐頁移植現有網站
- 內容模型：以頁面為單位的自訂文章類型和 ACF 欄位，讓文案、價格和版塊都可以在 WordPress 修改
- 交付：附備份和還原方案的建置及部署腳本，並與現有正式 WordPress 嚴格分開
- 量度與效能：下文的轉換事件、追蹤代碼設定和效能優化
架構
WordPress → Astro
內容在每次建置時讀取一次，而不是每次瀏覽都讀取。每個欄位都以建置時的文案作後備，所以即使後台空白或連不上，仍然會建出一模一樣的頁面，而不是壞掉的頁面。
- 01
編輯
市場推廣團隊在 WordPress（獨立後台網域）更新頁面、價格和 SEO 欄位
- 02
發佈
儲存後自動重新建置——約 1–2 分鐘上線
- 03
建置
Astro 在建置時查詢 WPGraphQL，每個欄位都有後備文案
- 04
提供
預先生成的靜態頁面和帶雜湊的資源經 Cloudflare 提供
保留在 WordPress 的內容
技術 SEO
SEO 欄位留在編輯熟悉的地方
公開網站是靜態的，外掛功能只有在建置時被寫進頁面才會生效。我把每頁的 SEO 欄位串接起來，並在 Astro 那邊重建全站層面的部分。
- 每頁欄位：Rank Math 的標題、描述、robots、canonical 和社交分享設定寫入每個靜態頁面
- 全站層面：sitemap 索引和 robots 由公開網站提供；WordPress 後台網域會轉去管理介面，不會被搜尋引擎收錄
- 更快收錄：修好 IndexNow 通知，讓搜尋引擎更快知道內容有更新
- 審核流程：AI 起草的 SEO 建議先進入審核清單，由市場推廣人員批准、修改或拒絕，才會套用
效能優化
優化前後的實測數據
這次優化把 19 MB 的 4K 主頁影片重新編碼為 2.1 MB 的 1080p 版本，並在首次渲染後才開始播放；畫面外的辦公室影片要接近可視範圍才載入；首屏以下的產品圖片改為延遲載入；帶雜湊的 CSS／JS 經 Cloudflare 設定一年不可變快取。HTML 不作快取，所以後台修改會即時出現。
| 指標 | 優化前 | 優化後 | 變化 |
|---|---|---|---|
| 手機 · 傳輸數據量 | 38.48 MB | 9.41 MB | −75.5% |
| 手機 · 最大內容繪製 (LCP) | 1.255 秒 | 1.007 秒 | −19.8% |
| 手機 · 完整載入 | 9.6 秒 | 7.1 秒 | −26.0% |
| 電腦 · 傳輸數據量 | 31.39 MB | 9.07 MB | −71.1% |
| 電腦 · 最大內容繪製 (LCP) | 2.558 秒 | 1.221 秒 | −52.3% |
| 電腦 · 總阻塞時間 (TBT) | 868 毫秒 | 746 毫秒 | −14.1% |
| 累計版面位移 (CLS，兩者) | 0 | 0 | 不變 |
方法：在香港以 Uptrends 進行的合成測試（Chrome；iPhone 12 Pro 4G 及 1600×900 電腦），於 2026 年 9 月 7 日部署前後在測試版網站各測一次。這些是單次實驗室數據，並非實際用戶的 Core Web Vitals，亦沒有聲稱任何 Lighthouse 分數。剩下最大的負擔是約 8 MB 圖片——下一步是提供不同尺寸的圖片及減少字型請求。
量度
轉換事件與推廣歸因
大部分銷售都由撳 WhatsApp、打電話或付款連結開始，單看瀏覽量說明不了甚麼。我為每個重要操作加入一個全站事件，並準備好把它送到各個平台的代碼設定。
- 已在網站實作：WhatsApp、購買、電話、預約、表格、測驗和優惠登記的 dd_conversion 數據層事件，附帶轉換類型、目標、頁面和流量來源
- 為客戶的 Google Tag Manager 容器準備：GA4 事件（包括 view_item 和 begin_checkout）、Meta 標準事件，以及在提供轉換標籤前保持暫停的 Google Ads 轉換代碼
- 審核發現：Meta Pixel 每個 PageView 都計了兩次；已為容器寫好修正方法
- 結帳：經 GoHighLevel 付款連結購買，並設定付款後轉址以便追蹤
取捨與經驗
這個架構的代價
靜態發佈令網站快速又穩定，但每個全站外掛功能——sitemap、轉址、schema——都要在前端刻意重建，內容管理系統不能再自動處理。
新網站與現有的正式 WordPress 共用一部伺服器，所以每次部署都先備份、檢查目標路徑，並保證不碰正式網站。原本的主機無法執行建置，所以建置在其他機器進行。
項目圖集
需要開發、現代化或量度生產級軟件？
聯絡我