讓你的網站成為自定義搜索引擎

來自專欄 前端筆記

寫於2015年6月5日，可能已過時，請謹慎參考。

http://www.zhouhua.site/2015/opensearch/?

www.zhouhua.site

起讓你的網站成為自定義搜索引擎 - Step Over起

有一天，我在打理博客的時候，無意看到了這樣的提示：

「按tab可通過http://zhouhua.info進行搜索」？這是什麼？於是我按了tab：

看起來很高級嘛！輸入「正則表達式」看看：

竟然真的有效果！到底發生了什麼……

打開chrome的搜索引擎管理：

我的博客怎麼就被認為是搜索引擎呢？一定要搞明白怎麼回事。

承

要讓瀏覽器知道自己的網站是一個搜索引擎，在技術上並不難實現。很久之前amazon就提出了OpenSearch標準草案。瀏覽器們是認這個標準的，只是各自實現不太一樣。而開發者大多不太了解這玩意兒。總之挺雞肋的吧，不過挺簡單的，單純提升點逼格也不錯。

本文所涉及的體驗針對chrome，其他瀏覽器未測試。據我所知，IE瀏覽器處理OpenSearch時，並不會主動信任一個網站為搜索引擎，而是需要網站管理者向微軟提出申請，審核通過才會被IE認為是搜索引擎。

那麼就來試試吧。

首先要告訴瀏覽器：我是搜索引擎。做法很簡單，在網頁的head部分加上這樣一行：

<link rel="search" type="application/opensearchdescription+xml" href="http://www.zhouhua.info/opensearch.xml" title="step over">

我們看到type定義了一種從來沒見過的mine類型application/opensearchdescription+xml，不用緊張，這是openSearch標準規定的，你不用額外對伺服器進行配置，只要提供一個能訪問到的xml文件。在這個例子中，我的xml文件路徑為http://www.zhouhua.info/opensearch.xml。關鍵就是要看這個xml是什麼樣的。標準中定義了很多，但我覺得設置幾個簡單的屬性就夠了：

<?xml version="1.0"?><OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> <ShortName>屠龍刀</ShortName> <Description>搜索周驊的博客</Description> <Url type="text/html" method="get" template="http://zhouhua.info/?s={searchTerms}"/></OpenSearchDescription>

我這裡定義了三個屬性，ShortName表示搜索引擎的名字，Description代表搜索引擎的描述，這都比較好理解。比較重要的是Url屬性，它定義了搜索的方式。有這個例子里，規定了搜索結果是以text/html的形式返回，規定了用get方式去訪問搜索action，規定了處理搜索的url為http://zhouhua.info/?s={searchTerms}，其中{searchTerms}會被用戶輸入的關鍵字替換。有一個比較有意思的功能，我稍微說一下，如果你的站點有搜索詞建議的功能，你可以再定義一條Url欄位，將template指向請求搜索建議的ajax地址，同時設置rel屬性為suggestion。類似這樣：

<Url type="application/json" rel="suggestions" template="http://my_site/suggest?q={searchTerms}" />

標準里定義了Url可以有四種rel類型，我感覺比較有價值的就兩種，一種是設置獲取搜索結果的url，rel為result，這種最重要，如果不設置rel屬性，那麼會默認這個Url欄位是這個作用；第二種是設置獲取搜索建議的url，它的rel屬性為suggestions，如果取這個值，那麼這個屬性是不可以省略的。其他的兩種取值就不說了。

除了以上的一些欄位，其實可定製的內容還有很多，有興趣的可以查看文檔，我就不多介紹。因為我迫不及待地想看看設置的效果怎麼樣。

效果還是不錯的嘛，設置的搜索引擎名稱等都生效了，挺好玩的。

轉

自定義搜索引擎無非就是通過現有的標準，網站向瀏覽器傳達了自己是搜索引擎、傳達了自己的特徵和用法，而瀏覽器則根據這些信息把網站添加到搜索引擎列表中，並對它們啟用特殊的交互體驗（比如輸入域名就可以按tab進入搜索功能、可以設置成默認搜索引擎等）。

但我的疑問是，一開始我可是什麼也沒有干呀，那麼chrome是怎麼知道我的網站有搜索功能，並把它添加到了搜索引擎列表中的呢？

在chrome的這篇文檔中，我找到了答案：傳送門（英文，需梯子）。

原來在使用chrome訪問一個網站時，chrome會先查看有沒有定義OpenSearch。如果沒有的話，它會在網頁中找有沒有這樣一個表單：

1. 表單以GET方式提交（POST不可以）；
2. 表單的提交url為HTTP協議的（HTTPS不可以）；
3. 表單沒有附加onSubmit事件（確保提交過程不被用戶代碼干涉）；
4. 表單中僅包含一個input輸入框，而且類型為text（其他類型的都不可以，多餘的控制項也都不可以）

如果有這樣一個表單，chrome會認為這是一個搜索框，並根據這個表單的信息推斷出這個網站的搜索方法。在我的網站中，恰恰有這樣的表單：

<form role="search" method="get" id="searchform" class="searchform" action="http://www.zhouhua.info/"> <div> <label class="screen-reader-text" for="s">搜索：</label> <input type="text" value="" name="s" id="s"> <input type="submit" id="searchsubmit" value="搜索"> </div></form>

這個表單提供的信息和

<Url type="text/html" method="get" template="http://zhouhua.info/?s={searchTerms}"/>

是等價的。但並不能提供更多的信息了，所以一開始，chrome直接是拿網站的域名當成是搜索引擎的名字。

對於chrome的這個設計，我持保留意見，畢竟存在一定的誤判率。

在chrome的文檔中，最後一句話提到了添加自定義引擎的第三種方法，使用AddSearchProvider這個API。雖然這個文檔中只提到了一個詞，但並不妨礙我們獲取更多信息，MSDN和MDN上都有文檔。

跳到MSDN 、 跳到MDN

MDN的文檔中有一個示常式序還是值得學習一下，它對AddSearchProvider做了兼容性的提升：

function installSearchEngine() { if (window.external && ("AddSearchProvider" in window.external)) { // Firefox 2 and IE 7, OpenSearch window.external.AddSearchProvider("http://example.com/search-plugin.xml"); } else if (window.sidebar && ("addSearchEngine" in window.sidebar)) { // Firefox <= 1.5, Sherlock window.sidebar.addSearchEngine("http://example.com/search-plugin.src", "http://example.com/search-icon.png", "Search Plugin", ""); } else { // No search engine support (IE 6, Opera, etc). alert("No search engine support"); }}

合

不得不說，chrome對錶單功能進行猜測，並以此提升用戶體驗確定給到我驚喜。但深入思考之後，我卻不認為這是一個好的idea，至少對於搜索行為的猜測。

回到OpenSearch上，總體而言，這個功能實現起來相當容易，除去chrome的自動探測不說，也算有兩種通用的方法，開發量很小，而且對性能沒什麼影響。但實際上帶的效果是因人而異的，至少對個人網站沒什麼用。我覺得並不是這個功能不好用，而是人們根本想不到用，這個使用習慣並沒有建立。試想一下，如果你想在網站中搜索，以下兩種搜索方式，你更習慣哪種：

我想更多人習慣直接用網頁上提供的搜索功能。而且很多網站都將搜索功能fixed定位在頁面上，訪問便捷。

對於OpenSearch，我的觀點是，它對於小網站其實是很雞肋的；對於資訊信息類的大網站而言，還是有一定的價值，能稍許提升用戶體驗。好就好在開發量很小，大家都可以嘗試嘗試。