精選作品
永和禮拜堂 - 網站升級 網頁設計 SEO 優化
網站升級 除了系統更新外，更關係到資安防護與整體效能。
本專案透過 網站升級 與 網頁設計 重建，全面強化網站安全性，避免舊版漏洞風險，
同時優化SEO結構與網站速度。
從資料移轉、RWD設計到搜尋引擎優化一次到位，
讓網站在安全、穩定與曝光成效上同步提升。
Project Overview
專案概覽
服務超過 60 年的地方教會，整合主堂與五個分堂的資訊平台，需要一套兼顧操作便利性與 SEO 表現的現代 CMS 解決方案。
CLIENT
台北基督徒 永和禮拜堂新北市 / 宗教非營利組織
PLATFORM
Joomla 5.x LTSSP Page Builder Pro 版面管理
SCOPE
主堂 + 5 分堂全站聚會資訊 · 課程報名 · 場地預約
CATEGORY
CMS 升級 × 版型重建 × SEO全端專案，包含資料移轉
Google PageSpeed Insights
官網 Google 網站檢測
升級至 Joomla 5 並完成效能調校後，行動版 PageSpeed 全項目顯著提升，SEO 分項達到滿分 100，Core Web Vitals 由紅燈轉為全綠。
92
效能 Performance
優良88
無障礙 Accessibility
優良95
最佳做法 Best Practices
優良100
搜尋引擎 SEO
滿分行動版（Mobile）測試結果 · Google PageSpeed Insights
Upgrade Explanation
網站升級說明
Joomla 2.5 於 2014 年停止官方支援，長年在無安全更新的環境下運作，逐漸成為資安破口。主機 PHP 版本升至 8.x 後，舊版 CMS 進入無法正常登入的狀態，觸發本次全面升級。
升級前：Joomla 2.5
版本 EOL，2014 年起停止官方安全更新
PHP 8.x 升版後後台無法登入，網站功能癱瘓
大量核心套件停止維護，形成資安破口
後台操作介面老舊，內容更新費時費力
視覺版型無法反映教會形象，缺乏品牌一致性
升級後：Joomla 5
LTS 長期支援版，持續接收官方安全更新
PHP 8.2 完整相容，現代主機環境穩定運作
套件生態系全面更新，安全漏洞修補完整
SP Page Builder 視覺化後台，拖拉即可更新版面
Bootstrap 5 RWD 架構，行動版體驗大幅優化
Upgrade Strategy
網站升級策略
Joomla 不支援跨大版本直接升級，須依序通過每個主要版本。整個遷移過程分三條主軸同步推進，確保資料零遺失、功能零中斷。
01
分段遷移路徑
Joomla 2.5 → 3.x → 4.x → 5.x，每個階段完成後獨立驗收。升級期間建立隔離測試環境，確認所有核心功能正常後再推進下一步。
02
套件相容性稽查
升級前逐一清查全站套件的 Joomla 5 相容性狀態。不相容套件提前備妥替代方案，部分功能以自訂模組補足，確保上線後無功能缺口。
03
資料完整保全
升級前以 Akeeba Backup 建立完整快照，涵蓋資料庫與媒體檔案。遷移全程保留文章、圖片、使用者帳號與表單記錄，達成零遺失目標。
Build Process
網站建置步驟
從評估到上線，完整六個階段依序推進，每步驟設有明確交付標準再進入下一階段。
01
現況評估與完整備份
清查現行 Joomla 版本、PHP 相容性、已安裝套件清單，評估各套件的 Joomla 5 支援狀態。以 Akeeba Backup 建立完整快照，作為回滾基準點。
02
Joomla 2.5 → 3.x 中繼升級
套用官方 Joomla 更新工具完成第一段遷移，更新資料庫架構與核心檔案。升級完成後逐一測試前台顯示、後台登入、表單功能、選單結構。
03
Joomla 4 → 5 正式升級
通過 Joomla 4 中繼版本後，完成至 Joomla 5 LTS 的最終遷移。確認 PHP 8.2 環境完整相容，更新必要的資料庫索引與 API 變更點。
04
版型重建與內頁排版
以 SP Page Builder Pro 全面重排版型，套用新設計規格。聚會資訊、各分堂頁面、培育課程等核心頁面逐一重新排版，統一視覺語言。
05
SEO 結構優化
重建 URL 結構、全站 Meta Title/Description、Schema.org 結構化標記，重新提交 XML Sitemap 至 Google Search Console，設定 301 轉址保留舊 URL 的 SEO 積累。
06
跨裝置測試與正式上線
完整 RWD 跨裝置測試（桌機 / 平板 / 手機），PageSpeed Insights 效能調校，Cloudflare 快取設定，DNS 切換並驗證 SSL 憑證後正式上線。
Tech Specifications
網站建置規格
採用現代化技術組合，兼顧效能、安全性與後台維護便利性。
CMS 平台
Joomla 5.x LTS
版面建置工具
SP Page Builder Pro
後端語言
PHP 8.2
資料庫
MySQL 8.0
CDN / 防護
Cloudflare
SSL 憑證
Let's Encrypt（自動續約）
主機服務
雲端虛擬主機
RWD 架構
Bootstrap 5（行動優先）
中文字體
Noto Sans TC
備份方案
Akeeba Backup（自動排程）
SEO Optimization
SEO 搜尋引擎最佳化
SEO 工程從 HTML 結構、URL 設計到爬取效率全面翻新，PageSpeed SEO 分項達到滿分 100。以下為具體優化項目與 Google 稽核通過清單。
語意化 HTML5 架構
全站正確使用 article、section、nav、header 嵌套，讓搜尋引擎準確解讀內容層級。
Meta Title / Description 全站撰寫
逐頁撰寫符合搜尋意圖的標題與描述，避免重複、過短或超出字數上限。
Open Graph 社群分享標記
設定 og:title、og:description、og:image，確保 LINE、Facebook 分享時顯示正確預覽圖文。
Schema.org 結構化資料
標記 Organization、Place、Event 類型，提升 Google 搜尋結果中豐富摘要的出現率。
XML Sitemap 自動產生
設定自動生成 Sitemap 並提交至 Google Search Console，加速新頁面的索引速度。
Canonical URL 防重複
全站設定 canonical 標籤，避免分頁、排序參數造成的重複內容稀釋問題。
圖片 ALT 屬性全面補完
清查全站圖片，補齊空白 ALT 屬性，圖片檔名修正為具語意的英文描述。
301 舊 URL 轉址保留
URL 結構調整後設定完整 301 轉址對應表，保留舊連結的 PageRank 積累。
Core Web Vitals 優化
LCP、CLS、FID 三項指標全面調校，從紅燈升至綠燈。
Google Analytics 4 整合
重新埋設 GA4 追蹤代碼，設定目標事件，確保流量數據連續不中斷。
✓ 通過稽核項目（10） Google PageSpeed Insights — 搜尋引擎最佳化稽核
使用 HTTPS
全站強制 HTTPS，排除混合內容（Mixed Content），符合 HTTP/2 要求。
避免使用已淘汰的 API
清除所有已棄用的瀏覽器 API 呼叫，確保長期相容性。
允許使用者貼上至輸入欄位
所有表單欄位允許貼上，支援密碼管理工具，提升使用者體驗與安全性。
不在載入時要求地理位置
移除頁面載入時自動彈出位置權限請求，改為使用者主動觸發。
不在載入時要求通知權限
通知請求在使用者操作特定手勢後才觸發，避免初次進站即受干擾。
圖片顯示比例正確
全站圖片設定正確寬高比例，避免版面位移與視覺變形問題。
圖片解析度適當
依裝置像素密度提供對應尺寸圖片，確保 Retina 螢幕清晰顯示。
網頁含有 HTML DOCTYPE
正確宣告 HTML5 DOCTYPE，防止瀏覽器進入相容模式影響渲染結果。
正確定義字元集
在 HTML 前 1024 bytes 內宣告 UTF-8 字元編碼，確保中文內容正確解析。
結構化資料有效
Schema.org 標記通過 Google Rich Results 驗證工具，無語法錯誤。
Data Migration
舊網站資料移轉
六十年歷史教會的數位資產不容有失。資料移轉採保守策略，備份驗證通過後才進行下一步，全程零遺失。
文章與分類
主日信息、最新消息、靈修 QT 等全部文章完整保留，分類架構與標籤一併遷移，內容連結維持正確。
媒體檔案庫
圖片、PDF 週報、影音縮圖等媒體資產完整搬遷，檔案路徑對應與文章內嵌連結同步更新。
使用者帳號
後台管理員、內容編輯等使用者帳號、群組與存取權限設定完整遷移，無需重新建立。
表單與互動資料
聯絡表單與各類填寫資料設定完整保留，確保升級後仍可正常運作與接收資訊。
選單與導覽結構
多層級選單架構、各分堂連結、外部連結等全面核對，確保升級後導覽邏輯與使用者體驗不變。
Interior Page Design
內頁版面重新設計排版
版型升級不只是套新模板，而是逐頁根據資訊架構重新設計排版邏輯。以下為本次全面重排的頁面列表：
網站首頁
認識我們
聚會時間
交通與據點
南勢角福音中心
頭份福音中心
東引福音中心
頂溪福音中心
萬華加蚋福音中心
培育課程報名
領袖學習圈
場地預約查詢
主日信息封存
最新消息列表
兒童牧區
學生牧區
設計原則：各分堂頁面採統一標準版型，確保視覺一致性；培育系統與社區課程頁面強調資訊可讀性，降低訪客認知負擔。行動版優先設計，所有表格與複雜版面在 320px 以上螢幕均正常顯示。
Design Language
網站視覺設計分析
永和禮拜堂官網的設計定位是「教會官方 + 親和感」，走穩重保守路線，功能優先，不追求視覺炫技。整體判斷正確：架構清楚、使用者知道要看什麼、沒有多餘裝飾。
視覺定位：教會官方形象 + 親和感
PRIMARY COLOR
#a60e0e 紅色系
在台灣文化脈絡中，紅色帶有熱誠、活力的意象，在教會場景則傳達穩定、正式、有組織的機構感。選紅不選藍，是刻意與一般公家機關拉開距離，讓官方感帶一點溫度。
SUPPORTING COLORS
白色
主要背景，保持版面呼吸感
淺灰
分隔區塊，中和紅色的視覺重量
粉色區塊
讓畫面不顯硬，增添親切溫度
Hero 區（首頁大圖）
VISUAL ELEMENTS
藍天＋果實主視覺——象徵祝福、收成，呼應「使萬民成為門徒」的使命感
疊加聖經經文——在視覺氛圍層疊上信仰核心，建立初次訪客對教會的信任感
輪播 Banner 支援多張活動圖片，讓最新消息在第一屏即可曝光
DESIGN INTENT
Hero 區的核心任務是「建立信任＋塑造氛圍」，不是轉換導流。自然景象搭配信仰文字，能讓訪客快速感知到「這是一個真實、有溫度的教會」，比純文字標語更直觀。
模組化區塊設計
培育系統
卡片式，icon＋標題＋說明＋連結四元素齊備。訪客一眼掌握功能，不需閱讀長文。
社區課程
面向教會外的社區訪客，柔和色調刻意降低「宗教距離感」，吸引非信徒進入。
線上直播
YouTube 直播連結整合在首頁卡片，無需訪客另行搜尋頻道。
小組教材
高頻使用功能放在首頁卡片，確保小組長每週能直接取得。
行動區（加入我們）
首頁中段設四個行動入口，把訪客最常需要的功能直接排出來：
加入我們
最新消息
每日靈修
資源下載
內頁：資訊型頁面
以「認識我們」為例，典型教會資訊頁結構：
大合照——建立真實感與信任感
一段理念——快速傳達教會使命
聚會時間——重點資訊前置
同工介紹——臉孔建立連結
聯絡方式＋地圖——降低來訪門檻
UI / UX 設計評估
架構清楚，使用者知道要看什麼
資訊完整，不讓訪客空手而回
模組分類合理，可獨立更新
後台維護友善，非技術人員也能操作
整體設計策略：穩重保守 + 功能優先。沒有追求視覺炫技，但每個設計決策都有明確的使用者意圖——這正是教會官方網站應該有的姿態。
Website Features
網站功能規格
永和禮拜堂官網涵蓋多項實用功能模組，全部可由後台自行管理，不需工程師介入即可更新內容。
圖片輪播 Banner
首頁輪播功能完整，由後台管理員自行維護，不需動程式碼即可更新活動廣告。
- 可自訂輪播張數（建議 4–5 張）
- 後台上傳圖片、設定超連結
- 可調整輪播秒數與切換特效
- 點擊輪播圖跳轉對應文章連結
- 拖拉排序輪播照片順序
- 新增 / 刪除 / 修改圖片
- 支援開新分頁連結外部網站
部落格 / 文章管理系統
完整的 CMS 文章管理機制，讓教會同工可獨立發佈與維護各類消息。
- 最新消息、主日信息、靈修 QT 獨立分類
- 支援圖文混排與影音嵌入
- 文章發佈時間排程、草稿儲存
- 分類標籤管理，便於封存與搜尋
- 前台列表頁自動分頁
- 文章 Meta 標題與描述獨立設定
智慧搜尋
全站關鍵字搜尋整合至導覽列，訪客可快速定位特定聚會資訊或課程內容。
- 即時搜尋全站文章與頁面內容
- 支援中文全文索引
- 搜尋結果依相關性排序
- 不中斷導覽操作體驗
附加服務項目
服務諮詢
網站相關問題即時協助
教育訓練
後台操作教學與使用手冊
網頁保固
上線後功能異常免費修復
資安稽核
定期掃描漏洞、套件更新
網站地圖
XML Sitemap 自動維護
Professional vs AI Website Builder
教會為什麼不能用簡易 AI 建站？
AI 一鍵建站工具近年大量湧現，操作門檻低、上線快，看起來吸引力十足。但對於有歷史資料、多單位架構、長期維護需求的教會網站來說，這些工具往往不是正確選擇。
歷史資料無法遷移
永和禮拜堂擁有超過 60 年的數位記錄，包含主日信息封存、靈修 QT 文章、場地預約記錄。AI 建站平台無法承接現有的結構化資料庫，這些內容若強行匯入，格式與連結幾乎全部斷裂。
複雜多層架構不適用
主堂加上五個分堂、七大選單分類、培育課程報名、場地預約系統——這種深度的資訊架構超出 AI 建站工具的預設範本，強行套用只會造成導覽混亂。
資安與自主性風險
AI 建站平台通常採月費訂閱制，一旦停止付費網站即下線。加上資料存放於第三方伺服器，教會對資料的控制權與安全性完全依賴平台商，不符合長期穩定運作需求。
SEO 無法精準控制
AI 建站平台的 SEO 設定高度受限，無法自訂 Schema 結構化標記、Canonical URL、301 轉址對應表。永和禮拜堂十年來在 Google 累積的搜尋排名，用 AI 建站重做一遍等同歸零。
專業建站 vs AI 建站工具 — 實際差異比較
AI / 簡易建站工具
月費訂閱，停費即失去網站控制權
既有資料庫無法完整遷入，歷史內容多數遺失
範本固定，無法實現複雜多層選單架構
SEO 設定受平台限制，無法完整自訂
Schema 結構化標記、301 轉址無法精準控制
資料存放第三方，資安風險與隱私疑慮
套件擴充受限，特殊功能（場地預約）難以整合
平台若停服或政策變更，網站隨時面臨風險
Des13 專業建站（Joomla 5）
網站架設後自主擁有，無月費鎖定
完整資料庫遷移，60 年歷史內容零遺失
客製多層選單、7 大主類 + 分堂架構完整呈現
SEO 完整自訂，PageSpeed SEO 達 100 分
Schema 標記 + 301 轉址精準設定，排名不歸零
資料存放於客戶自有主機，資安自主掌控
Joomla 套件生態豐富，場地預約、課程報名完整整合
LTS 長期支援版，官方安全更新持續提供
FAQ
常見問題
關於 Joomla 升級、SEO 優化與網站維護，以下是客戶最常詢問的問題。
Joomla 2.5 升到 5，舊有的文章和圖片都能保留嗎？
可以完整保留。升級流程採分段遷移策略，每個版本之間逐步更新資料庫結構，文章內容、分類設定、媒體檔案（圖片、PDF）、使用者帳號都不會遺失。遷移前會建立完整備份，萬一遇到問題可立即回滾。
升級期間網站會停擺多久？
整個升級與版型重建過程在獨立的測試環境進行，正式環境持續正常服務。切換至新版本的維護時間通常在 1–2 小時內完成，DNS 切換後 1 個工作天內全球傳播完成。
升級後舊的網址還能用嗎？Google 排名會掉嗎？
我們會建立完整的 301 轉址對應表，確保所有舊 URL 自動導向新位置。Google 會追蹤 301 轉址並保留原本的排名積累，正確設定下排名不會歸零。同時重新提交 Sitemap，加速 Google 重新索引新版結構。
SEO 滿分 100 是怎麼達到的？具體做了什麼？
Google PageSpeed Insights 的 SEO 分項著重技術層面：正確的 HTML5 語意標籤、完整的 Meta 設定、圖片 ALT 屬性、HTTPS 全站加密、DOCTYPE 與字元集宣告、不在頁面載入時要求敏感權限等。這 10 項稽核清單我們逐一核對，達到全數通過後才上線。
後台編輯內容需要具備程式知識嗎？
不需要。SP Page Builder 提供拖拉式視覺化編輯介面，修改文字、更換圖片、調整版型順序都可以直接在後台操作。圖片輪播、文章發佈、課程報名表單也都可由教會同工自行管理。上線後我們提供操作教育訓練，確保管理人員能獨立維護。
為什麼不直接使用 AI 一鍵建站，而是選擇專業 Joomla 重建？
AI 建站平台在快速起站上有優勢，但對於已有大量歷史資料、複雜多層架構（七大選單 + 五個分堂）、場地預約系統整合需求的教會網站來說，這類平台的資料遷移能力、SEO 自訂彈性、資料主權都無法達到要求。Joomla 5 讓教會自主擁有網站，不依賴第三方平台存活。
Joomla 5 的安全性如何維護？多久需要更新一次？
Joomla 5 是 LTS 長期支援版，官方持續提供安全修補程式。建議每 1–3 個月更新一次核心版本與套件，並搭配 Akeeba Backup 自動排程備份。我們提供資安稽核服務，定期掃描套件漏洞並通知管理員。
網站建好後需要保固嗎？費用怎麼計算？
Des13 提供網頁保固服務，涵蓋上線後因建置問題造成的功能異常免費修復。長期維護方案包含定期套件更新、資安稽核、後台操作諮詢等，詳細費用依服務內容而異，歡迎聯絡我們取得報價。
連結line帳號