Algolia 多網域搜尋索引建置完整指南

Algolia 多網域搜尋索引建置完整指南

以下教學以 「一次建好多網域的搜尋索引 ➜ 在各種 CMS(WordPress、Shopify、Webflow、Ghost…)嵌入同一套 UI」 為目標,分成四大階段:規劃、爬行與索引、前端 UI、CMS 嵌入與優化。


1. 規劃:決定索引策略與帳號架構

  1. 建立或確認一個 Algolia Application

    • 同一個 Application ID 可容納多個 Index。

    • 建議先規畫:

      • 一網域一 Index(利於權限分割與排名調整),透過 Federated Search 統合查詢;或
      • 單一綜合 Index(方便維運,但需用 distinct 或 Facet 區分來源)。
    • 若有 QA/Staging 環境,可用多個 Algolia App 避免測試資料混淆。

  2. 盤點網址

    • 列出各主網域/子網域,決定要抓哪些目錄、排除哪些頁面(例如 /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:臨時手動加頁面
pathsToMatchpatternsToExclude 控制包含 / 排除路徑
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

  1. 安裝前端 SDK

    • 傳統網站:<script src="https://cdn.jsdelivr.net/npm/instantsearch.js">
    • React:npm i algoliasearch react-instantsearch
    • Vue / Angular 皆有對應套件。
  2. 基本初始化(範例:多索引用 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 或加懸浮按鈕以優化效能。
  3. 樣式

    • InstantSearch 提供 ais- classes,可自行用 Tailwind / CSS Modules 客製。
    • 若不同站點色系不同,可在各站覆寫 ais- 變數或用 CSS 屬性繼承。

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.hbsdiv#search 容器並掛上 InstantSearch。利用 Ghost 的 Webhook 事件 (post.published) 觸發 Cloud Function 更新 Algolia,即可無痛同步。 建議把 Search UI 做成 search.hbs 頁面並在 Navbar 連結。

5. 上線後最佳化

  1. Search Analytics:觀察零結果關鍵字、新增 synonymsRules(Redirect) 以提升命中率。
  2. Ranking & Relevance:依各網域性質設定 customRanking(例如 page_rank, popularity)。
  3. API Key 隱私:前端只用 Search-only key;若在不同網域部署,可在 Dashboard 產生 Referer-restricted key 強化安全。
  4. 效能:行動網路環境下可關閉 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 設計,讓您的網站群提供一致且出色的搜尋體驗。立即聯絡我們預約諮詢會議,讓專業團隊協助您打造最適合的搜尋解決方案!