分享一個 agent friendly 的 B2B 公司官網架構

上禮拜正式開始在新公司的工作，被交付的第一個任務是研究看看有沒有辦法改善公司官網的 SEO。

取得必要權限後開始請 Opus 5 調查，發現官網是一個部署在自架主機上的單頁式應用（SPA），使用者切換頁面時透過 JavaScript 向主機要資料。這帶來兩個問題：一是主機或網路只要有狀況，頁面就渲染不出內容；二是每頁沒有獨立的 metadata。這個架構有它適合的使用環境，但剛好不太適合著重 SEO 表現的 B2B 公司官網。

於是開始著手跟 Opus 5 / Fable 5 討論適合的替代架構。最後邊討論邊做出來的架構大概是長這樣：

前端靜態頁面：

使用 Astro 框架的靜態網站
Repo 放在 Github 上面，然後串接 Cloudflare Pages，前端程式碼若有更新就會自動部署上線。
UI 方面則是請 Opus 透過 Playwright 進入舊站後逐頁截圖，再搭配原本的程式碼去復刻出來。
訪客瀏覽網頁的流量不再經過自架主機，全部走 Cloudflare

內容管理系統：

搭配的是 Headless 的 Strapi 這個架構，部署在自架主機上，設定一個單獨的子網域。
透過 Cloudflare Tunnel 讓主機對外連線，不需要開對外埠或固定公網 IP。
透過 Cloudflare Access 做身分驗證與授權，限制可登入的 IP 網段與帳號。
圖檔、PDF、影片等等則是放在 Cloudflare R2。
另外做了一個內部測試站（同樣用 Access 擋住），用 Docker 跑另一個 Astro dev server，後台編輯後可以即時看到結果
測試站上稿確認沒問題後，可以再按一個客製的「上線正式站」按鈕，觸發一連串自動流程，build 過程走專屬通道跟 Strapi 拿資料，交給 Astro 生成靜態網頁，然後部署上線。

SEO 改善方面：

把舊站的網址路徑全部進行 301 轉址。
完整補上缺漏的 sitemap.xml, robots.txt, canonical, JSON-LD 等資料。
全站圖片改為 webp 格式，圖片影片也依瀏覽尺寸分別縮小轉檔。

這個架構上線後，除了安全性提升之外，載入速度變得比原本快非常多，簡單用瀏覽器的 Lighthouse 跑分後幾乎接近滿分。而且該有的 metadata 全都好好補上了。我了解這只是基本項目，但也是個好的開始。

而且這整套方案幾乎不用額外訂閱費用：

Cloudflare Pages, Access, R2 的免費額度對我們來說都很夠用。
主機是唯一要錢的部分，若不想自架主機也可以考慮直接用 Strapi 的付費版本，或者是其他類似的 Headless CMS。

維護方面，Astro, Cloudflare 與 Strapi 都是 agent 非常熟的架構，要改後台欄位、前端頁面搭配、開 API endpoints、或者設定各種 Cloudflare 的東西，幾乎都靠 agent 就能完成。

如果你剛好有類似的需求，或者公司官網也是比較偏向靜態展示素材、沒有複雜功能的架構，歡迎把上述菜單丟給你的 agent 討論看看！