Implement the OpenSearch Protocol with React InstantSearch
On this page
We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.
This page describes how to implement the OpenSearch protocol with React InstantSearch.
This is a separate project and unrelated to AWS OpenSearch.
The OpenSearch protocol lets you describe a search engine for your website, so that browsers or other search clients can use that search engine.
How OpenSearch works
In your website or web application, you include a link to an OpenSearch description document.
In this document, you describe how browsers can interact with an underlying search engine.
This interaction is based on URL templates, for example, https://mysite.com?q={searchTerms},
which tell browsers how to make search requests.
Since the interaction between the browser and search engine is based on a URL, you need to enable URL synchronization.
Create an OpenSearch description document
The OpenSearch description document is an XML file following the OpenSearch specification.
For example:
1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Example Web Search</ShortName>
<Description>Search example.com content.</Description>
<Url type="text/html" method="get" template="https://example.com?q={searchTerms}"/>
<InputEncoding>UTF-8</InputEncoding>
<Image height="32" width="32"type="image/png">linkToImage</Image>
</OpenSearchDescription>
To adapt this example to your website, update these parts:
<ShortName>is the name of your app or website search. It must be 16 or fewer characters.<Description>is a human readable description of your search engine. It must be 1024 or fewer characters.<Url>has thetemplateattribute, that browsers use to create the URL to your search engine.<Image>has a URL (linkToImage) to a PNG image that represents your website, for example, the favicon.
The XML document must be served with Content-Type: application/opensearchdescription+xml media type.
For more information, see OpenSearch description elements.
Include the OpenSearch description document in your website
You can reference the XML document in the <head> of your web pages:
1
2
3
4
5
6
<link
rel="search"
href="/opensearch.xml"
type="application/opensearchdescription+xml"
title="Search example.com"
/>
For more information, see Autodiscovery in HTML
