让你的网站成为自定义搜索引擎

写于2015年6月5日,可能已过时,请谨慎参考。

有一天,我在打理博客的时候,无意看到了这样的提示:


“按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,我的观点是,它对于小网站其实是很鸡肋的;对于资讯信息类的大网站而言,还是有一定的价值,能稍许提升用户体验。好就好在开发量很小,大家都可以尝试尝试。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 搜索引擎优化(Search engine optimization,简称SEO),指为了提升网页在搜索引擎自然搜索...
    翻滚吧海阔天空阅读 3,990评论 5 14
  • 关于搜索引擎优化的方法一直众说纷纭,不同搜索引擎,不同国家的优化方法可能也不尽相同,本文总结了一些国外的搜索引擎优...
    文风Yu阅读 2,362评论 1 3
  • 这个系列的第六个主题,主要谈一些搜索引擎相关的常见技术。 1995年是搜索引擎商业公司发展的重要起点,《浅谈推荐系...
    我偏笑_NSNirvana阅读 6,596评论 3 24
  • 上篇文章也说到,当今是知识创业的黄金时代,多半要归功于互联网的发展和普及。 互联网,给了我们无限可能。 读到大学,...
    长庆学长阅读 235评论 0 0
  • 如在心上 天涯怀香 不在心上 咫尺难闻 如在心上 无邪荏苒 不在心上 笑语针穿
    愚壹阅读 126评论 2 0