某企業原本已有一個使用多年的官方網站，但網站內容分散、手機版操作不便，部分資訊也已經過時。
企業希望重新製作網站，除了改善外觀，也希望能自行更新最新消息、產品服務與案例內容，不必每次修改文字都找原廠商處理。
本次網站製作的重點，不是單純更換版型，而是重新整理網站架構、內容管理方式、手機版體驗與後續維護方式。
案例重點：網站製作不只是把畫面做得更漂亮，而是要讓企業未來能持續更新、方便管理，也能讓搜尋引擎理解網站內容。
原網站遇到的問題
企業原本的網站仍可開啟，但在實際使用與維護上存在不少問題。
- 網站版面較舊，手機瀏覽時文字與圖片容易超出畫面。
- 首頁資訊過多，使用者不容易快速找到服務內容。
- 產品與服務全部集中在同一頁。
- 沒有最新消息與案例分享功能。
- 企業無法自行修改主要內容。
- 聯絡表單偶爾無法正常寄送。
- 網站沒有完整的 SEO Title 與 Description。
- 網址結構不清楚，部分頁面使用無意義參數。
- 沒有 sitemap.xml 與完整的 Search Console 設定。
- 網域、主機與網站權限沒有整理成清單。
如果只更換首頁圖片與配色，這些問題仍然會存在，因此本次先從網站架構與管理需求重新規劃。
企業提出的網站製作需求
初步討論後，企業希望新網站具備以下功能：
- 企業形象首頁。
- 公司介紹。
- 產品與服務分類。
- 產品或服務詳細頁。
- 最新消息。
- 案例分享。
- 聯絡表單。
- 手機版響應式設計。
- 可自行管理內容的後台。
- 每頁可設定 SEO 資訊。
- Google Analytics 與 Search Console。
- 後續可擴充多語系與其他功能。
由於企業未來仍會增加服務與案例，因此網站不能只做成固定 HTML 頁面，必須保留後台與擴充能力。
1）先整理網站目標與使用者
網站製作前，先確認網站最主要的目標。
本次企業網站的主要目標包括：
- 讓潛在客戶了解公司與服務內容。
- 提供產品與案例資訊。
- 讓客戶可以快速聯絡與詢價。
- 增加自然搜尋曝光。
- 建立比舊網站更專業的企業形象。
同時也確認網站主要使用者可能從手機、Google 搜尋、社群連結或名片 QR Code 進入，因此首頁不能只依照桌面版設計。
2）重新規劃網站架構
舊網站把大量資訊放在同一頁，造成內容過長，也不利於搜尋引擎理解每個服務主題。
重新規劃後，網站主要架構調整為：
- 首頁。
- 關於我們。
- 服務總覽。
- 各項獨立服務頁。
- 最新消息。
- 案例分享。
- 常見問題。
- 聯絡我們。
每個主要服務都有獨立網址與內容，不再全部塞進同一個服務頁。
規劃原則：每個重要主題都應有獨立頁面，使用者比較容易閱讀，搜尋引擎也較容易判斷頁面內容。
3）建立首頁內容層級
首頁不是把所有內容全部放上去，而是負責快速介紹企業、服務重點與下一步操作。
本次首頁依序安排：
- 主要標題與企業核心服務。
- 服務分類。
- 企業優勢。
- 近期案例。
- 最新消息。
- 常見問題。
- 聯絡行動按鈕。
首頁主標題使用明確的服務內容，而不是只放公司口號。
同時保留品牌標語，但不讓品牌文字取代主要 SEO 標題。
4）製作 RWD 響應式網頁
新網站採用 RWD 響應式設計，讓同一套網站可以依照桌面、平板與手機畫面自動調整。
手機版主要改善項目包括：
- 導覽選單改為收合式選單。
- 文字大小與行距重新調整。
- 按鈕加大，避免難以點擊。
- 圖片依畫面寬度縮放。
- 表格與內容區塊避免超出螢幕。
- 聯絡按鈕放在容易操作的位置。
- 減少手機版不必要的動畫。
完成後分別使用不同尺寸的手機與瀏覽器測試，而不是只在桌面瀏覽器縮小視窗。
5）建立可自行管理的網站後台
企業希望未來能自行更新內容，因此後台管理功能依實際需求設計。
可管理內容包括：
- 最新消息。
- 案例分享。
- 產品與服務內容。
- 首頁輪播或主視覺。
- 聯絡資訊。
- SEO Title。
- SEO Description。
- 文章封面圖片。
- 發布狀態與排序。
後台沒有加入過多不必要功能，避免操作複雜，也降低後續維護成本。
對於不適合由一般管理者修改的版型與系統設定，則保留在程式層級，避免誤操作造成網站異常。
6）重新整理產品與服務內容
舊網站的服務內容大多只有簡短文字，無法回答客戶常見問題。
新網站的每個服務頁加入：
- 服務說明。
- 適用對象。
- 常見需求。
- 執行流程。
- 交付內容。
- 常見問題。
- 聯絡與詢價按鈕。
內容不只介紹「提供什麼服務」，也說明「什麼情況適合」、「處理方式」與「客戶需要準備哪些資料」。
7）改善聯絡表單與詢價流程
舊網站的聯絡表單欄位過多，而且寄信結果不穩定。
新表單只保留必要欄位：
- 姓名或公司名稱。
- 聯絡方式。
- 需求類型。
- 問題描述。
- 附件或補充資料。
同時加入：
- 前端欄位驗證。
- 後端資料驗證。
- 垃圾訊息防護。
- 寄送成功與失敗提示。
- 表單寄送紀錄。
避免發生使用者以為已送出，但企業實際沒有收到通知的情況。
8）建立網站 SEO 基礎設定
網站上線前，針對每個主要頁面建立獨立 SEO 資訊。
處理項目包括：
- 每頁獨立 Title。
- 每頁 Meta Description。
- 正確的 H1 與 H2 結構。
- Canonical 標籤。
- Open Graph 分享資訊。
- 圖片 alt 文字。
- robots.txt。
- sitemap.xml。
- 結構化資料。
- Google Search Console。
- Google Analytics。
同時確認正式網址只保留一種版本，避免 HTTP、HTTPS、www 與非 www 產生重複內容。
9）改善網站速度與圖片載入
企業提供的原始圖片尺寸較大，如果直接上傳，容易造成首頁載入緩慢。
處理方式包括：
- 依實際顯示尺寸壓縮圖片。
- 轉換適合的圖片格式。
- 非首屏圖片使用延遲載入。
- 減少不必要的 JavaScript。
- 合併或整理 CSS。
- 設定瀏覽器快取。
- 避免首頁使用過大的背景影片。
網站速度不是只看單一分數，也實際測試首頁、服務頁、文章頁與手機網路環境。
10）整理網域、主機與權限歸屬
網站製作完成後，企業保有重要帳號與最高管理權限。
交付內容包括：
- 網域管理權限。
- DNS 或 Cloudflare 權限。
- 主機與控制面板權限。
- 網站後台管理員。
- 資料庫資訊。
- Google Analytics。
- Google Search Console。
- 網站程式與資料庫備份。
- 基本操作與維護說明。
避免未來更換維護人員時，因帳號全部掌握在原廠商手中而無法交接。
網站上線前的測試項目
網站製作完成後，依照功能逐項測試：
- 桌面版、平板與手機版。
- 主要瀏覽器。
- 導覽選單與站內連結。
- 聯絡表單。
- 後台新增、修改與刪除。
- 圖片上傳。
- 最新消息與案例發布。
- SEO Title 與 Description。
- 404 頁面。
- HTTP 轉 HTTPS。
- www 與非 www 轉址。
- sitemap.xml。
- robots.txt。
- 網站備份與還原方式。
測試完成後才切換正式網域，避免把尚未完成的測試站直接當成正式網站。
處理結果
- 完成企業形象網站重新製作。
- 網站架構由單頁式內容改為清楚的多頁結構。
- 手機版操作明顯改善。
- 企業可自行管理最新消息、案例與服務內容。
- 每個主要服務擁有獨立網址。
- 完成基本 SEO 與搜尋引擎提交。
- 聯絡表單增加驗證與寄送紀錄。
- 網域、主機與管理權限完成交付。
- 建立網站備份與後續維護方式。
新網站不只是視覺更新，也讓企業後續更新內容、增加服務與執行 SEO 時，有比較完整的基礎。
從這個網站製作案例可以得到什麼經驗？
- 網站製作前應先確認目標，而不是先選版型。
- 首頁不需要放進所有內容。
- 重要服務應建立獨立頁面。
- 有後台不代表所有內容都適合開放修改。
- 網站設計與 SEO 應該一起規劃。
- 手機版必須實際操作測試。
- 聯絡表單要確認企業真的收得到。
- 網域、主機與第三方帳號應由企業掌握。
- 網站上線後仍需要備份、更新與維護。
