物理治療所官網

專案背景

客戶是一間新開業的物理治療所，需要一個能讓潛在患者快速了解服務內容、並在 Google 搜尋中被找到的官方網站。

核心需求：SEO 友善、行動裝置優先、引導患者進行預約看診。

技術選擇

Next.js + Static Export

選用 Next.js 的靜態輸出（next export）模式，部署至 Vercel。靜態頁面載入速度快，對 Core Web Vitals 分數有直接幫助，同時省去 server 維護成本。

MDX 管理內容

服務介紹、醫師簡介等文字內容以 MDX 撰寫，日後可以直接編輯 Markdown 更新內容，無需觸碰元件程式碼。

Framer Motion

頁面滾動時的淡入動畫使用 Framer Motion 的 whileInView，讓使用者滾動到各段落時有視覺引導，降低資訊量大時的閱讀疲乏感。

<motion.div
  initial={{ opacity: 0, y: 20 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
  transition={{ duration: 0.5 }}
>
  {children}
</motion.div>

SEO 優化策略

結構化資料（Schema.org）

加入 LocalBusiness 與 MedicalBusiness schema，幫助 Google 理解這是一間在地醫療機構，有助於出現在地圖搜尋結果。

Open Graph 與 Twitter Card

每個頁面設定對應的 OG 圖片與描述，確保在社群媒體分享時呈現正確的預覽卡片。

圖片優化

所有圖片轉換為 WebP 格式並設定 sizes 屬性，讓瀏覽器依裝置寬度載入適合尺寸，減少不必要的頻寬消耗。

成果

以下為 Vercel Analytics 過去 30 天數據：

Bounce Rate 偏高符合診所類網站的使用情境——多數訪客直接搜尋診所名稱，進站後找到地址、電話或看診時間便離開，屬於目的型瀏覽，不代表內容失敗。重要的是 Visitors 數量顯示網站已有穩定的自然搜尋曝光，SEO 策略發揮效果。