Adding OpenSearch to a Website

· 1 min read · 166 Words · -Views -Comments

If your site supports search, you can expose an OpenSearch descriptor so browsers detect it and prompt users to add your site as a search provider.

Here’s the process.

Write the OpenSearch description

vi opensearch.xml

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>Forward Path</ShortName>
  <Description>Article Search</Description>
  <Contact>qianghe421@163.com</Contact>
  <InputEncoding>UTF-8</InputEncoding>
  <Url type="text/html" template="https://1991421.cn/tags/{searchTerms}"/>
  <Url type="application/x-suggestions+json"
       template="https://1991421.cn/tips?q={searchTerms}"/>
  <Image height="32" width="32" type="image/x-icon">https://1991421.cn/favicon.ico</Image>
</OpenSearchDescription>

Reference it in HTML

<link type="application/opensearchdescription+xml"
      href="opensearch.xml" title="Article Search" rel="search" />

Suggestion payload format

res.json(["fir", ["firefox", "first choice", "mozilla firefox"]]);

The first item is the query string the user typed.

This assumes your site already supports GET-based search. With that in place, continue.


Browser behavior

Firefox

Chrome

Edge

Edge detects the provider, but it only lets you change the default search engine. The suggestions still come from Bing.

What about IE?

Nope. IE8 supported custom providers, but IE9+ only lets you pick from the Microsoft gallery. There’s no submission channel for custom providers anymore.

Final Thoughts

This example uses just a subset of the spec. For more options, see the OpenSearch documentation.

Authors
Developer, digital product enthusiast, tinkerer, sharer, open source lover