Algolia 多網域搜尋索引建置完整指南
以下教學以 「一次建好多網域的搜尋索引 ➜ 在各種 CMS(WordPress、Shopify、Webflow、Ghost…)嵌入同一套 UI」 為目標,分成四大階段:規劃、爬行與索引、前端 UI、CMS 嵌入與優化。
1. 規劃:決定索引策略與帳號架構
-
建立或確認一個 Algolia Application
-
同一個 Application ID 可容納多個 Index。
-
建議先規畫:
- 一網域一 Index(利於權限分割與排名調整),透過 Federated Search 統合查詢;或
- 單一綜合 Index(方便維運,但需用
distinct
或 Facet 區分來源)。
-
若有 QA/Staging 環境,可用多個 Algolia App 避免測試資料混淆。
-
-
盤點網址
- 列出各主網域/子網域,決定要抓哪些目錄、排除哪些頁面(例如
/cart
、/login
)。 - 規畫 SEO 與搜尋體驗:網址權重、同義字、排名規則。
- 列出各主網域/子網域,決定要抓哪些目錄、排除哪些頁面(例如
2. 建立 Crawler:多網域自動抓取與更新
重點:Algolia Crawler 現已支援一次驗證多個網域並在同一設定檔爬行
步驟 | 操作要點 |
---|---|
1. 新增網域 | Dashboard → Data sources → Crawler → Add domain,依序把所有主網域、子網域加入並驗證 (DNS TXT / HTML tag 皆可)。 |
2. 建立 Crawler | Add Crawler → 輸入名稱、選擇同一個 App ID、設定第一個 startUrl (可放首頁或 sitemap.xml)。 |
3. 配置爬行範圍 | 在 Configuration (JSON) 中設定: • startUrls :每個網域可放多組起始路徑• sitemaps :列 sitemap 以自動發現新頁• extraUrls :臨時手動加頁面• pathsToMatch /patternsToExclude 控制包含 / 排除路徑 |
4. 抽取規則 | 預設 Hierarchical extractor 會把 <h1> ~<h6> + 內容分層存入 hierarchy.lvlX 若想針對 SPA / JSON-LD,可用 Custom extraction(CSS selectors 或 JS function)。 |
5. 排程與增量更新 | Dashboard 內設定 Schedule,例如每天 02:00。Crawler 會自動偵測變動並只更新差異。若想 CI/CD 觸發,使用 Algolia CLI algolia crawler run <name> 。 |
6. 測試與除錯 | 在 Test crawl 下先抓 100 頁確認 record 結構,若被防火牆擋住,需白名單 Crawler IP 34.66.202.43 與 UA。 |
多索引統合查詢
前端可用 InstantSearch 的 Multi-index / Federated Search 模式,把不同 Index 的結果合併顯示。
3. 建立共用搜尋 UI
-
安裝前端 SDK
- 傳統網站:
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js">
- React:
npm i algoliasearch react-instantsearch
- Vue / Angular 皆有對應套件。
- 傳統網站:
-
基本初始化(範例:多索引用 React)
import algoliasearch from 'algoliasearch/lite'; import { InstantSearch, SearchBox, Hits, Index } from 'react-instantsearch'; const searchClient = algoliasearch('YourAppID', 'SearchOnlyApiKey'); export default function GlobalSearch() { return ( <InstantSearch searchClient={searchClient}> <SearchBox placeholder="搜尋整個網站群…" /> {/* 主站內容 */} <Index indexName="main_site"> <Hits hitComponent={HitCard} /> </Index> {/* Docs 站 */} <Index indexName="docs_site"> <Hits hitComponent={HitDoc} /> </Index> </InstantSearch> ); }
- 建議開啟 Routing,讓篩選條件寫入網址,方便 SEO 與分享。
- 行動版可按需關閉 search-as-you-type 或加懸浮按鈕以優化效能。
-
樣式
- InstantSearch 提供
ais-
classes,可自行用 Tailwind / CSS Modules 客製。 - 若不同站點色系不同,可在各站覆寫
ais-
變數或用 CSS 屬性繼承。
- InstantSearch 提供
4. 與各 CMS 整合
目標:同一組索引,但前端呈現能自然嵌入各自 CMS 佈景。
CMS | 推薦做法 | 重點 |
---|---|---|
WordPress | 安裝 WP Search with Algolia Plugin → 啟用 Autocomplete & Instant Search,把 App ID / Admin API Key 填入。若你已用 Crawler 建索引,只需在「顯示設定」把 Index Prefix 改成你的 Index 名稱,關掉本機 re-index 功能。 | 支援 Custom Post Type,亦可透過 algolia_excluded_post_types 過濾。 |
Shopify | 安裝官方 Algolia AI Search & Discovery App。在 App 內關閉「商品自動同步」改用「外部 Index」。前端採 InstantSearch Theme section,可透過 hooks 客製結果卡片。 | Headless 架構(Hydrogen)亦可使用 Algolia + React InstantSearch。 |
Webflow | 在 Custom Code (Head) 引入 algoliasearch.min.js + instantsearch.min.js ,於 Footer 放初始化腳本。建議用 Embed 元件放 .ais-SearchBox 容器。社群有完整教學範例。 |
若要自動同步 CMS Collection,可在 Webflow Flow → n8n / Make 將 Webhook 更新傳至 Algolia API。 |
Ghost | 在 partials/header.hbs 插入 CDN 腳本,default.hbs 加 div#search 容器並掛上 InstantSearch。利用 Ghost 的 Webhook 事件 (post.published) 觸發 Cloud Function 更新 Algolia,即可無痛同步。 |
建議把 Search UI 做成 search.hbs 頁面並在 Navbar 連結。 |
5. 上線後最佳化
- Search Analytics:觀察零結果關鍵字、新增
synonyms
或Rules
(Redirect) 以提升命中率。 - Ranking & Relevance:依各網域性質設定
customRanking
(例如page_rank
,popularity
)。 - API Key 隱私:前端只用 Search-only key;若在不同網域部署,可在 Dashboard 產生 Referer-restricted key 強化安全。
- 效能:行動網路環境下可關閉
searchAsYouType
或延遲觸發;React 可加 Server-side Rendering。
常見疑難雜症速查
症狀 | 原因與解法 |
---|---|
Crawler 抓不到 SPA 內容 | 開啟 JavaScript rendering 或自行用 Netlify Plugin / Headless build 輸出靜態 HTML 再爬。 |
403 / 503 | 網站防火牆未白名單 Crawler IP 34.66.202.43 / UA。 |
同一頁多語結果衝突 | 於抽取層加入 lang Facet 或把不同語系拆成獨立 Index。 |
要跨站「全站搜尋」 | 用 Multi-index Search,小元件分別顯示「部落格」「文件」「商店」三欄,或合併 hits + Facet source . |
結語
完成上述設定後,你將擁有:
- 自動化爬行 + 多網域索引:內容更新免手動;
- 一致且可客製的搜尋 UI:InstantSearch 元件可重用、外觀可依品牌色調調整;
- 跨 CMS 部署:WordPress 外掛、Shopify App、Webflow Embed、Ghost Theme 均能共享同一索引;
- 可擴充的搜尋體驗:經由 Analytics 持續精準調整,同時透過 Algolia Rules 打造推廣與導購場景。
希望這份教學能幫助你在所有網站上快速打造一致、即時的全域搜尋體驗!如有進階需求(A/B Test、Personalization、Geo search 等),可再告訴我,我可以提供更深入的設定建議。
想要為您的網站建置高效的搜尋功能嗎?Tenten 是一家專業的數位代理商,擁有豐富的前端開發、後端整合及搜尋系統優化經驗。我們能協助您完整規劃並實作 Algolia 多網域搜尋解決方案,從 CMS 整合到前端 UI 設計,讓您的網站群提供一致且出色的搜尋體驗。立即聯絡我們預約諮詢會議,讓專業團隊協助您打造最適合的搜尋解決方案!