使用 Google 自訂搜尋引擎取代WordPress站內搜尋步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學教學目的:

1.如何在 WordPress 上置入Google自訂搜尋引擎

2.設定Google自訂搜尋項目-設定及外觀功能

3.設定Google自訂搜尋項目-搜尋功能及統計資料

歡迎回到鵠學苑— WordPress 網頁設計超詳細攻略– 使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋站內搜尋功能是架設網站時相當重要的環節,不僅是對 SEO 搜尋引擎優化網站排名有直接的影響,也與網站載入速度息息相關,會這樣描述的原因在於建立站內搜尋功能可以提高搜尋引擎對網站的識別度,更有機會在 SERP (搜尋結果頁)中直接顯示包含站內搜尋框的 Rich Snippets (複合式摘要),而網站速度的部分是因為如果是使用WordPress內建站內搜尋功能,當網站內容變多的時候,容易造成站內搜尋無法正常執行的狀況。

因此在這篇教學中,要教導大家的就是如何申請Google 自訂搜尋來取代站內搜尋,改用Google 自訂搜尋的理由有以下幾點:

1.透過關鍵字查找網站內容更為容易,不需要完全相符的關鍵字才能夠找到。

2.使用外部搜尋引擎能減輕網站負擔。

3.站內搜尋的完整度以及實用性有利於使用者網站體驗。

4.可以在Google繁體中文的自訂搜尋後台編輯搜尋結果頁面

5.提升網站 SEO 友善度。

另外特別提醒的是如果要使用Google自訂搜尋,必須確定網站內容在Google 資料庫中已經建立足夠數量的網頁索引,否則會無法顯示搜尋結果,因此建議在安裝前可以在 Chromex瀏覽器網址列中輸入指令 Site:網站網址 來查詢網站已被索引的頁面數量,再來決定是否要使用Google 自訂搜尋。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

下面是 Google 官方網站對於Google 自訂搜尋的影片介紹,可以點擊直接觀看。

Google 自訂搜尋申請網址:https://cse.google.com/cse/all

(小提醒:鵠學苑的所有教學均是以 Apple Mac OS X 系統 做步驟示範!)

• 如何在 WordPress 上置入Google自訂搜尋引擎

第一步:進入到Google 自訂搜尋申請網址,在右上角點選建立自訂搜尋引擎,就會進入到圖二畫面,有幾個欄位必須填寫:

1.要搜尋的網站:輸入想要置入Google 自訂搜尋引擎完整的網站網址。

2.語言:選擇Google 自訂搜尋顯示的語言,通常與網站主要語言一致。

3.搜尋引擎名稱:這個欄位可以自定義,可以是網站名稱或者企業名稱,對後續設定不影響。

在進階選項的部分是指如果網站有使用結構化資料,是否要在搜尋結果中只顯示自定義的複合式資訊搜尋結果,比如具有星級評等,推薦商品圖片等,可以自行決定。如圖三筆者示範的設定方式,完成後點擊建立按鈕。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

第二步:建立完成後 Google 會自動產生自訂搜尋引擎的 JavaScript 程式碼,在下圖中點擊取得程式碼,如圖二所示就會看到可以複製的 JavaScript 程式碼,在複製的時候請注意是否有完整選取,

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

第三步:筆者想要在文章頁面的側邊欄加入Google自訂搜尋,取代 WordPress 站內搜尋功能,因此進入到外觀 → 小工具中找到自訂 HTML 的欄位,加入到想要顯示的位置,自定義標題內容以及貼上剛剛複製的 JS 程式碼。當然應用方法有很多種,如果說想要單獨建立一個頁面位站內搜尋,就可以利用網站使用主題所提供的建構器中 HTML 的區塊工具來加入,也可以在網站主選單或頁尾資訊的位置置入自訂搜尋,操作方式可以參考 WordPressr 教學 中相關的文章。
使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

第四步:如下圖所示已成功加入Google自訂搜尋到文章分類側邊欄中。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

• 設定Google自訂搜尋項目-設定及外觀功能

設定–基本資訊:Google自訂搜尋在置入網站後,有許多可以客製化的設定選項,在第二及第三小節會一一介紹。登入 Google 帳號後可以看到剛剛建立自訂搜尋引擎的專案名稱,點擊後如圖二所示,在基本資訊的頁籤中可以設定搜尋引擎說明、關鍵字、語言、也可以新增想要搜尋的網站,比較簡單的設定就不做太多介紹,特別說明的是如果想要在自訂搜尋中提供圖片搜尋結果,可以將圖片搜尋選項開啟( 圖二紅色方框標示處),如圖三所示會在自訂搜尋結果中顯示圖片的搜尋結果。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

設定–管理員:如果網站具有多位共同管理者,可以在這裡新增帳號,方式是透過增加電子信箱的方式來為編輯Google自訂搜尋引擎增加管理人員,特別注意的是新增的管理員電子信箱必須是其登入Google帳號所使用的電子信箱,必須要相同的電子信箱才能夠為新管理員通過驗證及開啟權限。特別一提的是,新增的管理員不具有以下權限:

  • 刪除自訂搜索引擎
  • 新增或刪除管理員帳戶
  • 查看“註釋”上傳/下載選項
  • 訪問廣告標籤

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

輸入新管理員的Google帳號申請的電子信箱。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

新增後管理員的初始狀態為未驗證。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

在新管理員的Google Gmail 信箱中會收到邀請共同編輯自訂搜尋引擎的通知。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

新管理員登入google帳號後,進入到自訂搜尋引擎的網頁,將會跳出如上圖的通知,選擇讓我成為管理員並點選儲存後,即完成驗證。

 

設定-進階:這一部分是透過編輯 XML 或 TSV 文件內容來為自訂搜尋添加註解,必須對於程式語言有一定的了解,並且熟悉於 XML 或 TSV 語法編輯方式。在此頁上都有詳細的規則說明,可以參照 Google Defining Sites to Search 這一篇解說指南。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

設定–進階–自訂搜尋引擎註解:在這一部分可以下載 TSV 的文件檔做編輯,其用途在於加入大量網站進入Google自訂搜尋引擎中,讓搜尋結果可以呈現除本站外的內容,而操作方法就是點選下載(TSV)的按鈕,會得到名為 annotations.tsv 的檔案,使用文字編輯器打開後就會看到如下圖中最大紅色方框標示的內容,寫入的方式是使用  _cse_5wrqewcnbdm 標記要加入的網站, _cse_exclude_5wrqewcnbdm 標記排除的網站,完成點選 新增 按鈕將檔案上傳,接著點選 在瀏覽器中檢視 來驗證 TSV 檔案是否編輯正確且上傳成功,如此就可以達成批量加入外部網站資料在搜尋結果中的目的。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

要特別提醒的是,標記排除網站是要符合有選擇 基本資訊搜尋的網站 → 搜尋整個網路,但特別強調收錄的網站 這一條選項,才會使用到,為的是排除特定網站內容在站內搜尋中出現,如下圖所示。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

設定–進階–自訂搜尋引擎內容:使用 XML 來定義搜尋引擎的主要語言、外觀樣式、分類標籤、篩選條件等,也就是説在Google自訂搜尋設定面板中所有的選項,可以透過寫入 XML 語法來上傳,對於熟悉程式語言的人來說,是比較快速的方法可以去定義站內搜尋,不需要逐條逐項的去尋找設定,如果說對於寫入 XML 不熟悉也沒關係,只要透過Google自訂搜尋設定面板一樣可以達到同樣的效果。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

外觀與風格–版面配置:可以選擇自訂搜尋結果的呈現方式,操作方法是選擇完版面配置後,要點選儲存並取得程式碼,重新複製貼上到網站想要顯示搜尋引擎的位置,其變動才會生效,可自行試用看那一種呈現方式最適合網站使用。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

外觀與風格–主題:搜尋結果列表的整體配色,這裡提供預設好樣板可以快速選擇。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

外觀與風格–自訂:在這個頁面中可以針對搜尋框、按鈕、搜尋結果標題、描述片段、分類項目、篩選標籤、置頂查詢等文字顏色的部分做自定義,可以使用進位制色碼表,也可以點選小方框定義顏色。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

外觀與風格–縮圖:如果點選開啟,就會在搜尋結果列表中顯示縮圖,如果說是以銷售商品為主的網站建議要打開,可以讓使用者更好識別商品樣式。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

• 設定Google自訂搜尋項目-搜尋功能及統計資料

搜尋功能–置頂查詢:這裏可以設定在搜尋結果中排序第一顯示的網頁,如圖二中設定的方式,可以應用在特定商品促銷活動時,也可以讓最新文章置頂在搜尋結果中,等於是自訂站內廣告,就筆者的觀點來看,善加利用此功能可以達到不錯的行銷宣傳目的。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

搜尋功能–限制條件:在搜尋結果的頁面中加入條件限制,讓使用者可以根據需求直接點選條件頁籤,就可以透過條件縮小搜尋範圍,讓使用者得到更精準的搜尋結果。好比說假設使用者想找尋女裝上衣,當我們有在搜尋結果上加入羊毛上衣、無袖上衣等條件時,使用者可以根據這些條件來查看在女裝上衣所具有的款式,對於使用者來說省去查看大量搜尋結果的時間,這也是自定義搜尋引擎的優勢之一。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

搜尋功能–同義字:同義字可擴大搜尋結果範圍,為搜尋關鍵字詞設定多組同義字,在搜尋結果中會呈現包含同義字的所有相關內容,可以提供更多的選項給使用者。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

搜尋功能–進階–搜尋結果排序:除了使用日期、價格來排序或篩選搜尋結果,也可以加入特定字詞作為排序塞選的索引項目。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

加入 WordPress基礎 作為排序依據的索引

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

在排序依據的選單中就多了 WordPress 基礎的選項可以作為篩選條件,並且會在搜尋結果中優先顯示。

統計資料與紀錄–稽核紀錄:在這個頁籤中可以看到所有修改的歷程,可以知道自訂搜尋做了哪些修改以及是由誰所發布的變更,能更精確的掌握自訂搜尋的執行模式。另外在統計資料中可以查看自訂站內搜尋依據不同時間長度的使用狀況,也可以設定Google Analytics (分析)參數來連結查詢資料,更好的掌握網站內熱門查詢字詞,以作為網站 SEO 操作參考。

使用 Google 自訂搜尋 引擎 取代 WordPress 站內搜尋 步驟教學

結語:

在加入Google自訂搜尋的過程中,會遇到一些問題,比如説預設Google自訂搜尋框樣式與主題衝突,出現很多層框線顯示,或者在站內搜尋結果中會顯示Google相關廣告等,而在Google自訂搜尋網頁的選項中卻無法針對這些問題做細項的設定,此時可以透過寫入CSS程式碼來設計Google自訂搜尋的樣式與網站主題符合,如果說想要進一步的了解,可以與我們聯絡提出需求與問題,也可以持續追蹤鵠學苑,後續會有相關教學文章跟大家分享!今天的教學到這裡告一段落了,想學習超詳細的WordPress攻略嗎??來 鵠學院 就對了!我們下次的教學見~

Google 相關教學文章:

Google地圖無法顯示,出現浮水印? 申請 API 帳單資料流程教學

Google Map 自訂外觀 – 客製化 Google 地圖樣式教學

Google Map 教學 – 網站嵌入 Google 地圖及我的地圖操作方法

Google Maps JavaScript API 申請 – 網站啟用 Google 地圖 教學

Google AdSense 教學 – AdSense申請在 WordPress 加入網站廣告

Google網站管理員 ( Search Console ) 驗證網站所有權的三種方式

Google reCAPTCHA 教學 我不是機器人 驗證按鈕 架站必學技能

[ 跳過recaptcha 驗證 ] – Google Invisible reCAPTCHA 隱形驗證碼 教學

Google 字體下載 – WordPress 字體快速分析及網頁字體設定

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁 必學技能!

Google Page Speed Insight 網站速度測試

分享在 facebook
Facebook
分享在 google
Google+
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top