找我們做網站
↑
Wordpress · WordPress 客製與程式碼

WordPress 站內搜尋教學:改用 Google 程式化搜尋引擎取代內建搜尋

WordPress 客製與程式碼發布 2018.06.10更新 2026.10.02閱讀約 8 分鐘
WordPress 站內搜尋教學:改用 Google 程式化搜尋引擎取代內建搜尋

重點整理
Google 的「自訂搜尋引擎」現在叫做「Programmable Search Engine(程式化搜尋引擎)」,仍可免費用來做 WordPress 站內搜尋:在控制台新增搜尋引擎、填入自己的網址 → 複製 JavaScript 程式碼 → 貼到 WordPress 的「自訂 HTML」區塊。免費版搜尋結果會顯示 Google 廣告;2026 年 1 月 20 日起新建的搜尋引擎只能搜尋指定網站(最多 50 個網域),不能再選「搜尋整個網路」,但站內搜尋不受影響。

WordPress 內建的站內搜尋只比對標題與內文字串,關鍵字差一個字就找不到,排序也只看日期,文章一多就很難用。改用 Google 的搜尋技術做站內搜尋,可以容錯、依相關性排序,搜尋運算也不佔用自己主機的資源。這篇說明怎麼建立 Programmable Search Engine、放進 WordPress,以及外觀、置頂結果、同義字等常用設定。

使用前先確認:網站頁面有沒有被 Google 收錄?

Programmable Search Engine 用的是 Google 的索引,沒被 Google 收錄的頁面就搜尋不到。安裝前可以在 Google 搜尋框輸入 site:你的網址,大致看看網站有多少頁面已被收錄;更準確的數字請看 Search Console 的索引報告,可參考 Search Console 索引狀態教學。新網站或剛發布的文章,可能要等一段時間才搜尋得到。

在 Google 搜尋輸入 site: 指令查詢網站已被收錄的頁面
在 Google 搜尋輸入 site:指令查詢網站已被收錄的頁面

改用 Google 站內搜尋的好處:

  • 關鍵字不需要完全相符,也能找到相關內容。
  • 搜尋由 Google 處理,減輕網站主機負擔。
  • 可以自訂搜尋結果頁的外觀、置頂結果與同義字。
  • 能看到訪客搜尋了哪些字,作為規劃內容的參考。

步驟一:建立 Programmable Search Engine

到 Programmable Search Engine 控制台,用 Google 帳號登入後新增搜尋引擎,填寫:

  1. 搜尋引擎名稱:自訂,例如網站名稱,不影響搜尋結果。
  2. 要搜尋的內容:選擇搜尋特定網站,輸入你的網址,可以用 www.example.com/* 這類網址模式涵蓋整個網站。
  3. 搜尋設定:依需要開啟圖片搜尋、安全搜尋等選項。

下面是 2018 年的舊版建立畫面,欄位位置不同,但要填的資料相同。

舊版 Google 自訂搜尋控制台,點選建立自訂搜尋引擎
舊版 Google 自訂搜尋控制台,點選建立自訂搜尋引擎
舊版建立搜尋引擎表單,填寫要搜尋的網站、語言與名稱
舊版建立搜尋引擎表單,填寫要搜尋的網站、語言與名稱
舊版建立搜尋引擎的進階選項與建立按鈕
舊版建立搜尋引擎的進階選項與建立按鈕

步驟二:取得搜尋框程式碼

建立完成後,控制台會產生一段 JavaScript 程式碼,包含 <script> 與 <div class="gcse-search"> 兩部分。複製時要完整選取,少一個字元搜尋框就不會出現。

舊版建立完成畫面,點選取得程式碼
舊版建立完成畫面,點選取得程式碼
舊版搜尋框 JavaScript 程式碼複製視窗
舊版搜尋框 JavaScript 程式碼複製視窗

步驟三:把搜尋框放進 WordPress

在要顯示搜尋框的位置加入「自訂 HTML」區塊,貼上剛剛複製的程式碼:

  • 側邊欄:到「外觀 >小工具」,在側邊欄加入自訂 HTML 區塊(區塊佈景主題則在「外觀 >編輯器」編輯範本)。
  • 獨立搜尋頁:新增一個頁面,例如「站內搜尋」,在內容中加入自訂 HTML 區塊。

如果同時保留 WordPress 原本的搜尋框,訪客會看到兩個搜尋框,記得移除原本的搜尋小工具。下圖為舊版小工具介面。

舊版 WordPress 小工具頁面,找到自訂 HTML
舊版 WordPress 小工具頁面,找到自訂 HTML
把自訂 HTML 小工具加到側邊欄
把自訂 HTML 小工具加到側邊欄
在自訂 HTML 小工具輸入標題並貼上搜尋框程式碼
在自訂 HTML 小工具輸入標題並貼上搜尋框程式碼
儲存自訂 HTML 小工具
儲存自訂 HTML 小工具

儲存後回到網站前台,就會看到 Google 的搜尋框。

網站側邊欄顯示 Google 站內搜尋框
網站側邊欄顯示 Google 站內搜尋框

Programmable Search Engine 常用設定

回到控制台點選剛建立的搜尋引擎,可以調整更多設定。以下截圖都是舊版介面,選單名稱與位置可能和現在不同。

基本資訊:說明、語言與要搜尋的網站

可以修改搜尋引擎說明、介面語言,以及新增或刪除要搜尋的網站與網址模式。

舊版控制台的搜尋引擎清單
舊版控制台的搜尋引擎清單
舊版設定的基本資訊頁籤,可修改說明、語言與搜尋的網站
舊版設定的基本資訊頁籤,可修改說明、語言與搜尋的網站
舊版基本資訊中的網站清單
舊版基本資訊中的網站清單

新增共同管理員

網站有多位管理者時,可以用對方登入 Google 帳號的電子郵件新增為管理員。對方會收到邀請通知,登入控制台接受後才完成設定。管理員可以修改設定、刪除搜尋引擎,也能新增或移除其他管理員,權限要謹慎給。

舊版設定的管理員頁籤
舊版設定的管理員頁籤
舊版新增管理員按鈕
舊版新增管理員按鈕
輸入新管理員的 Google 帳號電子郵件
輸入新管理員的 Google 帳號電子郵件
新增後管理員狀態顯示為未驗證
新增後管理員狀態顯示為未驗證
新管理員信箱收到共同編輯搜尋引擎的邀請通知
新管理員信箱收到共同編輯搜尋引擎的邀請通知
新管理員登入控制台後確認成為管理員
新管理員登入控制台後確認成為管理員

進階:註解與 XML 設定

熟悉程式的人可以在進階設定中下載或上傳註解檔(annotations)與搜尋引擎內容的 XML 檔,一次大量設定要納入或排除的網址、標籤與外觀。規則可參考 Google 的開發人員文件;一般網站用控制台介面設定即可。

舊版設定的進階頁籤,可下載或上傳註解與 XML 設定檔
舊版設定的進階頁籤,可下載或上傳註解與 XML 設定檔
用文字編輯器打開下載的 annotations.tsv 註解檔
用文字編輯器打開下載的 annotations.tsv 註解檔
舊版搜尋引擎內容的 XML 設定檔
舊版搜尋引擎內容的 XML 設定檔

外觀與風格

可以選擇搜尋結果的版面配置(例如結果直接顯示在搜尋框下方、彈出視窗或獨立結果頁)。更換版面配置後,要重新取得程式碼並貼回網站才會生效。

舊版外觀與風格的版面配置選項
舊版外觀與風格的版面配置選項

也可以套用預設主題,或自訂搜尋框、按鈕、結果標題與摘要的顏色,讓搜尋結果配合網站主色。

舊版外觀與風格的主題選項
舊版外觀與風格的主題選項
舊版自訂搜尋框、按鈕與結果文字顏色
舊版自訂搜尋框、按鈕與結果文字顏色

開啟縮圖後,搜尋結果會顯示頁面的圖片,以商品為主的網站建議開啟,讓訪客更好辨識。

舊版縮圖設定開關
舊版縮圖設定開關
開啟縮圖後的搜尋結果顯示頁面圖片
開啟縮圖後的搜尋結果顯示頁面圖片

置頂結果:指定某個關鍵字優先顯示的頁面

可以設定訪客搜尋特定關鍵字時,最上方固定顯示哪一個頁面,例如搜尋「優惠」就置頂本月促銷頁,等於站內的免費廣告位。

舊版搜尋功能的置頂查詢設定
舊版搜尋功能的置頂查詢設定
新增置頂結果,指定關鍵字與要置頂的網頁
新增置頂結果,指定關鍵字與要置頂的網頁
搜尋結果最上方顯示置頂的網頁
搜尋結果最上方顯示置頂的網頁

篩選標籤:讓訪客縮小搜尋範圍

在搜尋結果上方加入分類標籤,例如服飾網站可以設「羊毛上衣」「無袖上衣」,訪客點選標籤就能只看該類結果。

舊版搜尋功能的限制條件(篩選標籤)設定
舊版搜尋功能的限制條件(篩選標籤)設定
新增篩選標籤
新增篩選標籤
搜尋結果上方出現篩選標籤
搜尋結果上方出現篩選標籤

同義字:擴大搜尋結果

替關鍵字設定同義字,例如「架站」與「網站架設」,訪客搜尋任何一個詞都能找到相關內容。

舊版搜尋功能的同義字設定
舊版搜尋功能的同義字設定
新增關鍵字的同義字
新增關鍵字的同義字
同義字設定完成的清單
同義字設定完成的清單

搜尋結果排序

除了依相關性排序,也可以依日期,或依網頁中的結構化資料欄位排序與篩選,例如商品價格。

舊版搜尋結果排序的進階設定
舊版搜尋結果排序的進階設定
新增排序依據
新增排序依據
設定排序依據的名稱與索引字詞
設定排序依據的名稱與索引字詞
搜尋結果的排序選單出現新的排序依據
搜尋結果的排序選單出現新的排序依據

統計資料與記錄

統計資料可以查看不同期間的搜尋次數與熱門查詢字詞,記錄則保留設定的變更歷程,知道誰在什麼時候改了什麼。熱門查詢字詞很適合當作規劃新文章的參考。

舊版統計資料與記錄頁面,顯示搜尋次數與稽核記錄
舊版統計資料與記錄頁面,顯示搜尋次數與稽核記錄

常見問題

Google 站內搜尋要付費嗎?

建立 Programmable Search Engine 並放到網站上是免費的,但搜尋結果頁會顯示 Google 廣告;Google 也提供透過 AdSense 從這些廣告分潤的選項。

為什麼站內搜尋找不到我剛發布的文章?

因為 Programmable Search Engine 使用 Google 的索引,新文章要等 Google 檢索並收錄後才搜尋得到;可以在 Search Console 用網址檢查工具要求建立索引。

WooCommerce 商店適合用 Google 站內搜尋嗎?

不一定。商品價格、庫存變動頻繁,Google 索引不會即時更新;商店網站可以考慮專門的商品搜尋外掛,例如 Advanced Woo Search。

結語

Programmable Search Engine 讓小型網站也能用 Google 的搜尋技術做站內搜尋:建立、複製程式碼、貼進 WordPress,幾分鐘就能完成。上線後別忘了調整外觀配合網站風格,並善用置頂結果與同義字,讓訪客更快找到想要的內容。如果預設的搜尋框和佈景主題樣式衝突(例如出現多層框線),可以用附加 CSS 微調。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。