搜尋 UI 元件

本頁說明如何自訂搜尋框和搜尋結果的外觀和風格。如要使用內容檔案實作搜尋引擎的設計，請參閱「使用 XML 設計外觀和風格」頁面。

  1. 總覽
  2. 設計搜尋 UI 的個別元件
  3. 使用搜尋元素代管結果
  4. 設定搜尋元素版面配置
  5. 設計搜尋框
  6. 設計結果
  7. 在網站中導入設計

總覽

您可以在控制台或 XML 內容檔案中，變更程式化搜尋引擎的搜尋框和搜尋結果。如果只有少數幾個搜尋引擎，透過控制台管理及自訂這些引擎相當簡單。只要前往「外觀」頁面，選取樣式、設計元件，然後按一下「儲存」，即可完成設定。本頁面會說明如何完成上述所有操作。不過，如果您要建立及管理大量搜尋引擎，即使是簡單的程序，在多個搜尋引擎中重複操作也會很繁瑣。在這種情況下，建議使用 XML。如果您決定使用 XML，請先閱讀本頁內容，瞭解一般運作方式，然後閱讀「使用 XML 設計外觀和風格」頁面，瞭解 XML 元素和屬性。

如果您不確定該使用控制面板還是 XML 格式，請參閱「基本概念」 頁面，瞭解每種格式的優點和缺點。

注意： 開始設計自訂搜尋引擎的外觀和風格前，請先閱讀「 程式化搜尋引擎實作指南 」。 這份簡短文件說明如何處理 Google 品牌和出處資訊。

返回頁首

使用搜尋元素代管結果

搜尋元素是可嵌入網頁的物件，支援大量自訂功能。搜尋框和搜尋結果可以一起顯示在讀者瀏覽的網頁上，也可以顯示在不同網頁上。

搜尋元素範例

注意： 搜尋元素搭配精簡版面配置時，在行動裝置上運作良好。

您也可以使用程式化搜尋元素控制 API，進一步自訂搜尋使用者介面。HTML 屬性支援許多自訂功能。 舉例來說，您可以從六種結果頁面版面配置中選取一種，也可以設定要傳回的搜尋結果數量。

程式化搜尋引擎不再支援 iframe 託管選項。建議您在搜尋元素中選取「兩頁」或「僅顯示結果」版面配置，因為這些是新選項。詳情請參閱我們的 網誌文章 。

返回頁首

設計搜尋使用者介面的個別元件

可自訂元件

可自訂的元件取決於搜尋引擎所選的元素版面配置。舉例來說，控制台只允許您為 Google 代管的搜尋引擎新增標誌，無法為使用其他代管選項的搜尋引擎新增標誌。

您可以使用控制台定義下列元件：

設定搜尋元素版面配置

您可以自訂網頁上的搜尋使用者介面版面配置。您可以將搜尋框和結果區塊放在同一欄中，也可以分別顯示在不同欄中，甚至顯示在不同頁面中。

版面配置選項如下 (點選連結即可查看範例)：

選項 說明
OverLay 在重疊區域中顯示搜尋結果。
兩頁
簡單
多個搜尋框/結果區塊 		搜尋框和搜尋結果部分位於兩個不同的網頁。

注意：搜尋結果部分也包含搜尋框。使用者可以直接在搜尋結果頁面提交查詢。

全螢幕寬度 搜尋框和搜尋結果部分會佔用整個頁面或插入搜尋元素的欄位寬度。
兩個欄位 搜尋框和搜尋結果部分位於網頁的不同欄或區段。如要關閉搜尋結果專區，使用者可以點選搜尋方塊旁的 X 圖示。
密集 與全寬選項相同，這個選項會占據頁面或欄的整個寬度，但搜尋結果部分顯示的結果較少，因此在網頁中展開時，占用的垂直空間較少。

提示：這個選項已針對智慧型手機和行動裝置最佳化。

僅顯示結果
透過網址搜尋
透過搜尋框搜尋 		搜尋結果會顯示在其中一個網頁上，且搜尋結果網頁不含搜尋框。使用自己的搜尋框提交搜尋查詢。

注意：如果程式化搜尋引擎未顯示廣告，就無法停用品牌宣傳。

示範：如何自訂品牌選項

Google 代管
目前視窗
新視窗 		搜尋框會放在其中一個網頁上。搜尋結果會顯示在 Google 代管的網頁上，並在同一個視窗或新視窗中開啟。

返回頁首

您可以將搜尋框插入網頁的 HTML 內文中的任何位置，但按照慣例，搜尋框會放在網頁頂端 (或靠近頂端)，如下例所示：

圖 1： 網頁，搜尋框位於頂端。

含有搜尋框的網頁範例

啟用自動完成功能

當使用者在搜尋框中輸入搜尋查詢時，自動完成功能會提供查詢選項。這與 Google 搜尋中顯示的選用查詢類似。

圖 2： 在搜尋框中輸入幾個字元，就會顯示下拉式清單，提供不同搜尋查詢的選項。

在旅遊網站的可程式化搜尋引擎中輸入「p-u-e-r」，系統會顯示下拉式清單，列出「波多黎各」、「波多瓦亞塔飯店」、「波多瓦亞塔假期」等選項。

程式化搜尋引擎會根據您的搜尋引擎量身打造自動完成功能。這項功能採用不同的演算法，會從多個來源擷取資訊，包括搜尋引擎的查詢，以及搜尋引擎涵蓋的網站內容中擷取的關鍵字和詞組。

自動完成功能位於「搜尋功能」頁面的「自動完成」部分。

如要啟用自動完成功能，請按照下列步驟操作：

  1. 前往「搜尋功能」頁面的「自動完成」部分。
  2. 開啟「啟用自動完成功能」控制項。

    注意： 系統會為每個搜尋引擎產生自動完成查詢，因此自動完成建議可能要過幾小時才會顯示在搜尋引擎中。

  3. 如果您是初次在現有的搜尋引擎中啟用自動完成建議，則需移除您在網頁中插入的搜尋框程式碼片段。並替換為「取得程式碼」分頁中產生的新代碼。如需更詳細的操作說明，請參閱「在網站中導入設計」一節。

返回頁首

設計結果

您可以變更結果頁面的下列元件：

個人結果

如要以視覺化方式劃分個別結果，或醒目顯示使用者選取的結果，可以定義個別結果的邊框和背景。

圖 3：結果會區分個別結果，且滑鼠懸停時會醒目顯示個別結果。

結果 (個別結果以虛線分隔) 醒目顯示結果的搜尋結果

返回頁首

「修正」分頁

如果您已在搜尋引擎中建立精選標籤，這些標籤會以分頁的形式顯示在搜尋元素中。您可以使用控制面板變更精選分頁的顏色。

促銷

如果您已在搜尋引擎中建立促銷活動，可以變更促銷活動的外觀和風格。宣傳活動 是您建立的特殊搜尋結果。

標誌 (僅限 Google 代管)

如果讓 Google 代管結果網頁，您可以選擇在搜尋結果網頁的搜尋框旁加入標誌或小圖片。圖片必須是網站上託管的 .jpg、.png 或 .gif 檔案 (您自己的網站，或沒有著作權限制的網站)。你可以選擇將網址與圖片建立關聯， 將圖片變成可點選的圖片。

以下是顯示標誌的結果頁面範例。

圖 4： 含有圖片的搜尋框

返回頁首

在網站中導入設計

設計好搜尋引擎的外觀和風格後，請按照下列步驟在網頁中實作：

  1. 在「外觀」頁面中，按一下已修改區段的「儲存」。
  2. 在「外觀」頁面的「版面配置」部分，按一下「取得程式碼」。
  3. 複製「程式碼」彈出式視窗中產生的程式碼片段。

    如果選取雙欄版面配置，請複製兩段程式碼片段：一段用於搜尋方塊，另一段用於搜尋結果。
    如果選取雙頁面版面配置，請輸入網頁的網址，該網頁會顯示搜尋引擎的結果。輸入網址中內嵌的查詢參數名稱，搜尋結果網頁會剖析該名稱。最後，複製這兩段程式碼片段。
    如果搜尋結果顯示在新網頁中，請使用僅顯示結果的版面配置程式碼片段。輸入網址中內嵌的查詢參數名稱，搜尋結果網頁會剖析該名稱。最後，複製搜尋結果程式碼片段。

  4. 在您要顯示程式化搜尋引擎方塊的每個網頁中插入程式碼。您可以將程式碼貼到網頁的 <body></body> 標記內任何位置。

    注意： 為確保跨瀏覽器相容性，建議 HTML 網頁使用支援的 DOCTYPE，例如 <!DOCTYPE html>。

    如果搜尋元素使用懸停效果，HTML 網頁必須使用支援的 DOCTYPE，例如 <!DOCTYPE html>。
    如果選取雙欄版面配置，請在其中一欄插入搜尋框的程式碼，另一欄則插入搜尋結果的程式碼。
    如果選取雙頁面版面配置，請在要顯示搜尋框的網頁中插入搜尋框的程式碼，並在要顯示搜尋結果的網頁中插入搜尋結果的程式碼。
    如果選取「僅顯示結果」版面配置，請在要顯示搜尋結果的網頁中插入程式碼片段。