最後更新時間:2025-11-21,由 Dean 更新
我有時候會收到一些學員的詢問,他們想知道網站上能不能加入搜尋功能。
接下來的內容,我會實際示範怎麼樣在網站上加入搜尋框,包含操作步驟。
為什麼不使用網站內建搜尋框?
首先,我相信一定會有人好奇,使用 WordPress 架站,通常佈景主題或編輯器會有「搜尋框」能設定才對。
對於這個問題,有幾個思考點:
#1 搜尋精準度比較低
有些佈景主題,他們本身背景並不是以搜尋引擎為主的公司,所以在「搜尋」方面的技術,可能不是那麼良好,精準度會較低。
相信你也有在一些大網站上使用過搜尋功能,通常都需要將關鍵字打到非常精準,才能夠找到自己想閱讀的那篇文章,這樣就大大降低了使用者體驗。
#2 消耗主機資源較多
一般來說,如果使用網站內部的搜尋功能,在這個搜尋過程中,你需要消耗的是主機的資源。
也許一個人搜還好,但若你今天網站用戶很多,每個人都進行搜尋,你主機被消耗的資源就多了。
#3 可能需要額外付費
再來就是比較現實的問題,很多佈景主題或編輯器廠商,會把「搜尋功能」變成付費功能,也就是你需要付費才能夠在網站上添加搜尋框。
而一般來說,這種廠商的付費功能都會是年繳制度,無法買斷,等於你安裝了一個搜尋功能,是需要持續付費的,也就提升了你建置網站的成本。
什麼是程式化搜尋引擎 (Programmable Search Engine)?
再來,進入這篇的重頭戲,既然我們不用內建的搜尋框,那我們要怎麼做到讓讀者直接搜尋的功能?答案就是使用 Google 的程式化搜尋引擎。
Google 程式化搜尋引擎 (Google Programmable Search Engine) 是什麼?簡單來說,它就是 Google 提供他們的搜尋引擎技術,讓你能夠也為你的網站新增一個搜尋引擎。
一般而言,我們使用的 Google 搜尋引擎,收錄的內容範圍會是整個網際網路。而這套程式化搜尋引擎,能夠讓你設定收錄的內容範圍,只有你的網站,所以查找的結果,也只會有你網站的內容。
所以接下來的段落,我會詳細與你分享,怎麼樣去申請並設定這套搜尋引擎。
如何在網站上加入搜尋框 (建置搜尋引擎)?
要在網站中加入搜尋框,那麼就需要先建置一個搜尋引擎。整體步驟並不難,以下分享。
step 1
我們需要先到 Google Programmable Search Engine 首頁,點擊右上角或中間的「Get Started」。

step 2
接著會進到後台設定,首先你需要先設定你哪個網站要建立搜尋引擎開放搜尋。
需要在「Sites to search」的框框輸入你的網址,但這邊要稍微說明一下,輸入的方式有幾種:
- Individul pages:如果你想開放搜尋幾個特定的獨立頁面,那就直接將該頁面網址輸入進去。
- Entire site:如果你想開放搜尋全網站,那你需要輸入 [你的網域]/*,代表整個網域下的資源。
- Parts of site:如果你只想開放搜尋某個分類下的內容,那你需要輸入 [你的網域]/[你的分類]/*,代表該網域此分類下的內容可收錄。
- Entire domain:有時候你可能會有子網域,你想讓那些子網域都收錄,那就需要輸入 */[你的網域],代表該主網域下的子網域全都收錄。
Sites to search 可以輸入的框框不限制,你可以將你想要被收錄的資源都輸入進去。
接著下面可以照你網站的使用語言選擇,我直接選擇「繁體中文」。
下方的搜尋引擎名稱,當你輸入上方的收錄內容時,就會自動替你取好,可以不用動。
最後就是確認 Google reCAPTCHA 機器人驗證,就能按下「Create」創立搜尋引擎了。

step 3
其實到這個步驟,你就已經創建成功了,此時我們需要將此搜尋框放到網站上。
點擊 Add it to your site 右方的「Get code」按鈕。

step 4
你會取得一串代碼,直接複製這串代碼,你就能夠放到你網站上你想要讓搜尋框出現的頁面囉。

step 5
你可以選擇放到網站文章的側邊欄上方,或是放到首頁開頭,就看各站主的安排囉。


Google 搜尋引擎基本功能設定
當我們成功將 Google 搜尋框放到網站上後,我們還需要進行一些搜尋功能的調整。
Google 程式化搜尋引擎的功能有很多,有興趣的人可以自己去玩看看 (可參考官方指南),而接下來我就直接分享幾個基本功能的設定。
PS. 目前設定後台有兩種介面,一種是舊式的,一種是後來推出的新式介面。個人認為新式介面的功能設定並不完整 (許多還是要回到舊式頁面設定),所以以下主要用舊式來分享。
#1 搜尋內容及範圍設定
在後台選擇自己前面建立的搜尋引擎後,進入到 Setup 設定中,選擇 Basics 選單。
拉到下方,會看到「Image seach」跟「SafeSearch」,將它們都開啟,一個是可以讓使用者搜尋到你的圖片,一個是保護讀者搜尋時不被惡意程式侵擾。
完成後再往下看,會有「Search the entire web」,這邊建議關閉,因為如果開啟,讀者搜尋時就會搜到其他網站的內容 (只是你的網站內容會在比較前面而已)。


#2 搜尋外觀與風格設定
如果你想要修改你的搜尋框及搜尋結果外觀,那麼可以到 Look and feel 設定的部分。
Layout 選單中,你能夠選擇搜尋結果呈現的外觀,種類有很多,每種都不太一樣,可以參考官方說明,右方也會有樣式可以即時預覽。
Themes 選單中,主要就是設定你搜尋引擎的風格,就跟網站選擇佈景主題有點像,一樣右方可以即時預覽,挑一個自己喜歡的就行。
Customize 選單則是進行一些比較細部的設定,像是搜尋框的字型、底色、邊框色,搜尋選單的文字顏色、背景顏色,搜尋結果欄位的標題、網址呈現外觀等等。



#3 在搜尋結果插入廣告
我覺得這個搜尋引擎很有趣的是,它還能夠串連 Google Adsense,在你網站專屬的搜尋引擎中顯示廣告,進而幫助你賺到一些廣告收入。(官方說明)
要將這個功能開啟,需要到 Setup 的設定中,找到 Ads 的選單,下方有個「Seach Engine Monetization」的功能,將它開啟。
此時如果你當時登入這個系統的帳戶也是你 Google Adsense 的帳戶時,就會自動進行串接。過一段時間後,你的搜尋引擎中,就會出現 Google 廣告了。

#4 關鍵字自動填充設定
還有一個小細節我認為需要設定,也就是關鍵字自動填充的部分。關鍵字自動填充,就是我們在 Google 搜尋時,下方都會自動出現的一些關鍵字建議。
可以到 Search features 設定中,Autocomplete 選單,把「Enable autocomplete 開啟」。
第二個選項「Include autocompletions from the entire web」我建議關閉,這個功能主要就是讓你的關鍵字填充,會出現整個網路可能會出現的關鍵字,但因為這個搜尋引擎主要是你網站本身的,所以還是要以自身網站有的內容為主。

Google 程式化搜尋引擎常見問題
Google Programmable Search Engine 是什麼?
Google Programmable Search Engine 中文為「程式化搜尋引擎」,是 Google 提供自己的搜尋引擎技術,讓各網站管理員可以為自己網站建立專屬的搜尋引擎。而在這個獨立搜尋引擎中搜尋到的結果,都會是自己網站 (或自行設定收錄範圍) 的內容。
Programmable Search Engine 能夠自訂外觀嗎?
可以,搜尋框及搜尋結果欄位都可自訂,詳細的介紹與設定可參考官方說明。






