網頁設計作品集：12 個真實案例

律師事務所企業網站：把專業信任變成可搜尋的內容

挑戰。客戶原有網站建於已停止支援的舊系統，手機版完全不能用，全站只有五頁而且每頁不足兩百字。所有業務來自舊客戶轉介，網上詢盤接近零。搜尋自己的服務範圍（例如公司秘書服務、商業合約審閱）完全找不到自己。

做法。把「服務範圍」由一頁拆成八頁，每頁針對一個具體法律服務並覆蓋該服務的常見疑問；為每位律師建立獨立介紹頁，列出資歷、專業領域與可核實的執業資訊，強化 E-E-A-T 訊號；重建 H1 至 H3 層級，把用戶實際會搜尋的問句直接寫成 H3；加入 Organization、LegalService、BreadcrumbList 與 FAQPage 結構化資料；為舊網站的所有 URL 設定 301 轉址保住既有權重。

成果。索引頁數由 5 頁增至 34 頁，Search Console 的自然搜尋印象數在六個月內持續上升，網上表單與電話點擊成為新客來源之一。技術面 LCP 由改版前的 5 秒以上壓至 2.5 秒門檻內。這類項目的關鍵領悟是：專業服務公司缺的不是設計，而是把腦裡的專業知識寫成可被搜尋的頁面。相關服務見網頁設計服務與律師樓網頁設計方案。

時尚零售網店：用 WooCommerce 換走月費與抽成

挑戰。客戶原本用自助建站平台開網店，每月付月費加交易抽成，但 URL 結構固定、無法自訂 schema、部落格功能形同虛設，導致完全無法靠內容做 SEO。產品數量增長後，後台管理與庫存同步也開始吃力。

做法。搬遷至 WooCommerce，自訂主題而非套用萬用模板；重整產品分類邏輯，讓每個分類頁本身就能承接一組關鍵字並配上原創分類文案；為所有產品部署 Product 與 AggregateOffer 結構化資料；整合本地付款方式包括信用卡、FPS 轉數快與 PayMe；建立會員系統與積分回購機制；搬遷時逐條對照舊 URL 做 301 轉址。

成果。取消了平台交易抽成，長期成本結構明顯改善；分類頁開始為長尾產品關鍵字帶來自然流量；結帳步數由四步縮至兩步，行動裝置的結帳完成率上升。要留意的取捨是：WooCommerce 把維護責任轉回自己身上，所以我們同時安排了年度維護方案處理核心更新、安全掃描與每日備份。平台選擇的完整比較見WordPress、Shopify、SHOPLINE 對照表。

教育中心 SEO 優化：先修技術，再寫內容

挑戰。客戶已經自己寫了大量文章，但幾乎沒有一篇有排名。檢查後發現三個致命問題：測試環境的 noindex 標籤上線時忘記移除、導致近半數頁面根本未被索引；同一批課程內容換個地區名做了十幾頁，被判定為重複內容；所有文章都是孤立頁面，沒有任何內部連結指向。

做法。第一個月只做技術修正——移除錯誤的 noindex、整併重複的地區頁並用 canonical 指向主版本、重建 sitemap.xml 並提交。第二個月建立主題群集：以「課程科目」為支柱頁，把家長會搜尋的資訊型問題（考試安排、升學銜接、選科建議）寫成集群文章，每篇用描述性錨文字連回對應課程頁。第三個月起用 Search Console 篩選排名 8 至 20 位的查詢，針對性補內鏈。

成果。索引覆蓋率在第一個月就大幅改善，這是整個項目回報最高的一步——完全沒有寫新內容，純粹修好技術問題。之後三個月，資訊型文章開始把家長流量導向課程頁，課程頁的詢盤量隨之上升。這個案例最值得記住的一點是：內容寫得再多，如果卡在索引，全部都是零。做法細節見技術 SEO 檢查清單與內部連結策略。

美容療程推廣頁：Landing Page 與廣告訊息對齊

挑戰。客戶投放 Facebook 及 Instagram 廣告，但落地頁是公司首頁。用戶點擊「首次體驗優惠」廣告後看到的是完整的公司介紹與六種服務，找不到廣告提到的優惠，跳出率極高，廣告花費完全浪費。

做法。為每組廣告建立獨立 Landing Page，移除導覽選單以消除分散注意的出口；首屏文案與廣告文案逐字呼應，讓用戶三秒內確認來對地方；把表單欄位由七個減至三個（稱呼、WhatsApp、想做的療程）；在療程說明旁邊放真實前後對比與價格區間，而非「請聯絡我們查詢」；部署 Meta Pixel 加 Conversions API 雙軌追蹤並用同一 event_id 去重；WhatsApp 按鈕改為點擊即帶入預填訊息，讓客戶不用自己打字。

成果。落地頁跳出率明顯下降，同一廣告預算帶來的預約數上升，單次預約成本下降。伺服器端追蹤補回了被瀏覽器限制擋掉的轉換事件，令 Meta 的出價演算法學習樣本更完整。要注意的是價格透明度這一項在香港市場的效果特別明顯——即使只寫區間，詢盤質素都會改善。相關服務見Facebook 廣告代理服務與Meta Pixel 與 CAPI 設定。

餐飲品牌本地 SEO：三個訊號裡只能控制兩個

挑戰。客戶餐廳位置不錯，但在 Google 地圖上幾乎搜不到。商家檔案由前員工建立，類別設定錯誤、營業時間過期、地址寫法與網站不一致，評價長期無人回覆。菜單只有一張 JPG 圖片，搜尋引擎完全讀不到菜式名稱。

做法。取回商家檔案管理權，重設主要類別與次要類別（這是本地相關性最重要的單一因素）；統一 NAP，連「號」與「樓」的寫法都與網站及所有外部平台對齊；把菜單由圖片改為可索引的 HTML 文字並加入 Menu 與 LocalBusiness 結構化資料；逐條回覆歷史評價並建立日常回覆流程；定期上傳實拍菜式與環境相片；在網站上為所在地區建立有實質內容的頁面，寫該區客群、交通與泊車資訊。

成果。本地搜尋與地圖的曝光量顯著上升，菜式名稱開始為長尾搜尋帶來流量。本地 SEO 的三組訊號是相關性、距離與知名度，距離改不了，所以全部力氣都應該放在相關性與知名度上。完整做法見本地 SEO 與 Google Business Profile 設定。

裝修公司報價落地頁：用互動工具換聯絡資料

挑戰。裝修行業的詢盤特點是「客戶想知價，但公司唔想公開價」。結果雙方僵持：網站只寫「歡迎查詢報價」，客戶不願意在毫無價格概念下留電話，詢盤量長期偏低，而且來的多數不符預算。

做法。建立互動報價計算機——用戶選擇單位面積、房間數、裝修程度與材料等級，即時得出一個價格區間。看到區間後才出現留下聯絡方式的步驟，以取得詳細分項報價。過程中每一步的選擇都以 GA4 事件記錄，並用參數保存選項組合。同時把計算機的邏輯與常見組合寫成可索引的靜態內容，讓「三房裝修 費用」這類搜尋能找到這一頁。

成果。詢盤量上升，更重要的是詢盤質素改善——預算明顯不匹配的訪客會在看到區間後自行離開，銷售不再花時間在不會成交的個案上。同時累積的選項數據直接告訴客戶市場需求集中在哪個裝修等級。這種「先給價值，後要資料」的結構，比任何 CTA 文案優化都有效。相關內容見CRO 轉換率優化與Landing Page 設計服務。