どこかで、きっと、また。
官網翻新重做案。前台以 Razor 作為 SSR 方案並搭配 .NET，重點放在 SEO、UI/UX 與品牌呈現細節；後台以 Angular 管理內容上下架、文章、廣告、預覽與排序等動態資料。
- ROLE
- 前端開發工程師
- CLIENT
- Content Platform
- YEAR
- 2023–2024
- SEO
- 100
- SCOPE
- 前後台
- SHARE
- OG Validated
Overview專案概述
前台以 Razor 作為 SSR 呈現方案，搭配 .NET 與 JavaScript 完成官網內容展示、互動效果與 RWD，並針對 SEO、字體、間距、顏色、ARIA、Meta Tag、分享預覽與載入策略做細節調整。
後台採 Angular 架構，負責內容上下架、文章新增/編輯/刪除/查詢、預覽、排序、廣告等管理模組，處理動態切換與資料狀態一致性。
TECH STACK使用技術
FEATURES產品功能
RWD 響應式設計
SEO / Lighthouse 最佳化
Open Graph 分享設定
文章 / 標籤 / 廣告後台管理
Screens產品畫面
01/ 02
首頁Home
My Contribution我負責的事
- 01調整圖片延遲載入、ARIA 標籤、RWD 與字體載入策略；留存的單次 Lighthouse 檢測中，效能為 95、SEO 為 100。
- 02實作 Facebook、Twitter、LINE 分享用 Open Graph / Meta Tag，並通過外部檢測工具驗證。
- 03完成後台文章模組的狀態切換、草稿回復、分頁與預覽流程，提升內容管理效率。
Problems & Decisions問題與決策
前台以 Razor + .NET 輸出主要內容與 Meta 資訊，並調整載入、分享預覽與品牌視覺；後台以 Angular 處理內容管理、上下架與多模組操作。
CHALLENGES過程中處理的問題
- 01
圖片與字體載入策略優化，降低初始渲染負擔。
- 02
跨平台分享 Meta Tag 設定與外部檢測工具驗證。Case 01
- 03
文章狀態、分頁與預覽流程之間的資料一致性處理。Case 02
CASE 01
前台 SSR 與 SEO 呈現
- Finding
- 公開官網需要被搜尋引擎、社群爬蟲與外部驗證工具正確讀取，HTML 結構、Meta、分享預覽與載入策略都會影響最終呈現。
- Decision
- 以前端切版與互動配合 Razor + .NET SSR，讓主要內容與 Meta 資訊在伺服器端輸出，再補上 JavaScript 互動、RWD 與載入細節。
- Result
- 完成官網前台翻新，調整 SEO、分享資訊、ARIA 與載入策略。留存的 Lighthouse 檢測畫面中，效能為 95、SEO 為 100，並以外部工具驗證分享預覽。
Lighthouse — Case 01 結果的佐證 CASE 02
內容生命週期一致性
- Finding
- 後台同時處理文章、廣告、排序、預覽、上下架與草稿回復；狀態若分散在頁面流程中，預覽內容與正式內容容易出現落差。
- Decision
- 用 Angular 模組處理編輯、預覽、排序與上下架，集中管理文章狀態與草稿回復。
- Result
- 完成新增、編輯、預覽、排序、上下架與草稿回復功能，讓內容管理者在同一套後台流程中操作。
NEXT PROJECT下一個專案
Eventa
AI Ticketing Platform
日常中小型活動票務平台，結合活動報名、主辦管理、AI 推薦、QR 驗票與自動化部署。
