網頁設計案例：BNI 花蓮太魯閣分會網站，從會員名片到 SEO 內容

作者：Jacks｜JRM Web Design 顧問・英國生醫碩士・前保健品牌資深數位行銷　最後更新：2026-10-26

你在找網頁設計案例，多半不是想看一面漂亮的作品牆，而是想知道：「像我們這樣的組織，網站到底該做哪些功能？做完之後誰來顧？」這篇用一個真實案例回答這兩個問題。

案例是 BNI 花蓮太魯閣名人堂白金分會的官網。設計由 PIM 承諾行銷負責，JRM 負責網站建置與後續維護，分會已同意具名分享。下面依序拆解需求、技術選擇、維護方式、內容佈局，最後誠實交代目前的成效。

網頁設計案例速覽：BNI 花蓮太魯閣分會要什麼網站

這是一個「分會官網＋會員網站」：對外介紹分會，對內把每位會員做成可篩選的名片。BNI 是 1985 年由 Ivan Misner 博士創立的商務引薦組織，官方公布全球約 35.5 萬名會員、1.18 萬個分會 [1]。太魯閣分會是花蓮的線上分會，每個行業只收一席。

把整個案子濃縮成一張表：

項目	內容
客戶	BNI 花蓮太魯閣名人堂白金分會（線上分會）
網站類型	分會官網＋會員網站（會員名片目錄）
分工	PIM 承諾行銷：設計／JRM：網站建置與維護
核心功能	會員名片、8 組產業／團隊篩選、活動紀錄、最新消息
技術	WordPress、Elementor Pro、JetEngine、JetSmartFilters、Rank Math
上線後	長期維護＋2026-10-26 上線 3 篇 SEO 指南文

資料來源：bni-taroko.com 前台頁面與後台外掛設定，整理於 2026-10-26。

需求：讓訪客 30 秒看懂這個分會

分會官網要先回答三件事：你們是誰、成員做什麼行業、我要怎麼加入。BNI 的運作靠「每個行業一席」，所以訪客最在意的，往往是自己的行業還有沒有位子，以及裡面有哪些可以合作的會員。

因此首頁導覽列固定成六個入口：關於太魯閣、產業鏈接、分會成員、最新消息、活動紀錄、加入我們。首頁第一屏直接寫出「花蓮商務引薦首選」，並放上分會聚會的大合照，讓第一次來的人先感受到這是一群真實存在、彼此認識的人。

左邊是首頁，右邊是分會成員頁。成員頁最上方就是產業勾選篩選，下面接會員名片，訪客不必一頁頁翻找。

會員網站怎麼做：Elementor Pro＋JetEngine 名片系統

會員網站的關鍵，是讓「新增或修改一位會員」變成填一張表，而不是重新排版一頁。分會成員會進出、換行業、換照片，如果每張名片都是手工排版，維護成本會越來越高。

JetEngine：一位會員就是一筆資料

JetEngine 是 Crocoblock 的外掛，可以建立自訂文章類型、自訂欄位，再用 Listing 樣板把資料顯示成卡片 [2]。這個案例把「會員」做成獨立的資料類型，每筆資料存行業、姓名、會員或來賓身分，以及個人頁。名片樣板只設計一次，所有會員自動套用同一個版型。

好處很實際：分會幹部要更新會員資料時，只要改那一筆，成員頁、個人頁會同步更新，版面不會因為某個人的介紹比較長就跑掉。

JetSmartFilters：8 組產業與團隊篩選

JetSmartFilters 為 JetEngine 等來源的列表加上篩選功能，並以 AJAX 更新結果，不必重新載入頁面 [3]。成員頁目前有 8 組篩選：餐飲美食組、品味生活組、健康美學組、行銷廣告組、企業服務組、建築工程組，以及點農成金團隊、藝築工程團隊兩個團隊。

對訪客來說，想找裝修或室內設計相關的會員，勾一下就能把同一條產業鏈的人一次找出來；對分會來說，這也呼應 BNI 用 Power Team 串起上下游的做法。

上線後的維護：讓網站一直能用

會員網站外掛多、資料多，上線後的更新與備份要排進固定流程。這個網站由 JRM 長期維護，目前的做法如下：

維護項目	做法	用途
WordPress 核心	已更新到 7.1.3 [4]	官方定位為維護與安全版本
外掛更新	Elementor、Crocoblock 系列分批更新	避免一次全更新，出錯時好追原因
備份	Backuply	更新前先備份，出事可以還原
資安	Solid Security	登入保護與安全性檢查
速度	LiteSpeed Cache	頁面快取
SEO 與數據	Rank Math、Site Kit	SEO 設定與 Google 工具串接

資料來源：bni-taroko.com 後台已啟用外掛清單，查詢於 2026-10-26。

像 JetEngine、JetSmartFilters 這類負責核心功能的外掛，建議更新前先備份，更新後到成員頁實際勾幾個篩選，確認名片和篩選都正常。維護費用怎麼抓、包含哪些項目，可以參考 網站維護費用怎麼算？2026 行情＋三種網站年度總成本試算。

內容佈局：3 篇 SEO 文回答入會前的疑問

網站建好之後，下一步是回答潛在會員上網會搜尋的問題。考慮加入 BNI 的人，常見的疑問是要花多少錢、BNI 到底在做什麼，以及網路上「老鼠會」的說法是真是假。2026-10-26 在分會網站上線了 3 篇指南文，各自對應一種搜尋問題：

文章	回答的問題
BNI會費多少？費用結構、時間成本與回本試算	入會要花多少錢與時間
BNI是什麼？1 分鐘看懂商務引薦怎麼運作	BNI 怎麼運作、適不適合我
BNI老鼠會？是詐騙嗎？用法條對照，再誠實講 5 個缺點	對 BNI 的疑慮

三篇文章寫的都是分會的實際數字，例如會費結構以太魯閣分會一年期會員為例。Google 的內容指南也強調，內容要先替讀者解決問題，並讓人看得出是誰寫的、怎麼寫出來的 [5]。

成效：會員個人頁被 Google 找到

近 3 個月，分會網站在 Google 搜尋拿到 97 次點擊、1,600 次曝光，平均排名 6.6，約一半的點擊來自會員個人頁。以下是 Google Search Console 2026-07-25 至 2026-10-24 的數據，點閱率 6.1%。

頁面	點擊	曝光
首頁	47	323
會員個人頁｜健康減重服務	8	111
會員個人頁｜律師事務所	6	279
會員個人頁｜品牌顧問	5	49
會員個人頁｜太陽能服務	5	25
會員個人頁｜地政士事務所	4	30

資料來源：Google Search Console（bni-taroko.com），2026-07-25 至 2026-10-24，擷取於 2026-10-26。為保護會員隱私，表格只列行業。

這組數字說明了會員名片系統的實際用途：有人在 Google 搜尋某位會員的名字或事務所名稱時，會找到分會網站上的會員個人頁，再從那裡認識整個分會。「地區＋行業」的搜尋也開始出現，例如「花蓮 太陽能鋼構」近 3 個月有 186 次曝光、平均排名 8.1，只是還沒有點擊。

還沒做到的是：3 篇 BNI 指南文 2026-10-26 才上線，目前還沒有數據；「地區＋行業」這類生意關鍵字也還在第一頁後段。我們會在約 60 天後，用 Search Console 的數據更新這一段。

協會網站、商會網站可以借鏡的 5 件事

如果你負責的是協會網站、商會或社團網站，這個案例有 5 個做法可以直接參考：

1. 首頁先回答「你們是誰、我能得到什麼」：導覽列不要超過 6 到 7 個入口。
2. 會員資料做成資料庫，不要手工排版：會員進出頻繁，用自訂文章類型加樣板最省事。
3. 依產業分組篩選：訪客用「我要找哪種廠商」的角度找人，不是用姓名。
4. 上線就排好維護流程：備份、更新、資安、快取各有負責的工具與順序。
5. 用內容回答入會前的疑問：費用、運作方式、常見疑慮，各寫一篇講清楚。

想先估建置預算，可以看 2026 網頁設計費用怎麼算？內行人帶你拆解報價單；我們的建站服務內容在 WordPress 網站建置服務。

常見問題

想知道你的協會或商會網站還缺什麼？JRM 提供免費網站健檢，幫你看現有網站的功能、維護狀況與 SEO 基礎，再決定要不要改版。→ 預約免費網站健檢

參考資料

[1] BNI.（2026）. About BNI. https://www.bni.com/about（擷取 2026-10-26）

[2] Crocoblock.（2026）. JetEngine. https://crocoblock.com/plugins/jetengine/（擷取 2026-10-26）

[3] Crocoblock.（2026）. JetSmartFilters. https://crocoblock.com/plugins/jetsmartfilters/（擷取 2026-10-26）

[4] WordPress.org.（2026-10-06）. WordPress 7.1.3 Maintenance and Security Release. wordpress.org

[5] Google 搜尋中心.（2026）. 製作實用、可靠且以使用者為優先的內容. developers.google.com（擷取 2026-10-26）

技術備註：若希望 AI 搜尋工具能引用網站內容，robots.txt 需允許 Googlebot、Bingbot、PerplexityBot、ChatGPT-User、GPTBot、ClaudeBot。