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

, , , ,
1

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：臨時手動加頁面
• 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

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

5. 上線後最佳化

  1. Search Analytics：觀察零結果關鍵字、新增 synonyms 或 Rules(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 設計，讓您的網站群提供一致且出色的搜尋體驗。立即聯絡我們預約諮詢會議，讓專業團隊協助您打造最適合的搜尋解決方案！