IE8: Fundamentals of Visual Search Providers
I’ve blogged a couple of times about Internet Explorer search providers: Create A Simple IE8 Search Provider and Buzztap, sporting news aggregator, leverages IE8. The browser search experience is excellent in IE8. Yes, we’ve supported search providers for some time; however, search is enhanced in IE8. On top of that, it’s really easy to implement as well as make discoverable. Let’s take a look at a few popular examples.
Search Provider Construction
This enhanced searched experience is made up of several elements – some that the IE8 client make happen, and some dependant on the web site. The things that the web site provides are good search data, complementing visual data, helpful search suggestions, and a hosted service to provide search answers to the IE8 client. IE8 handles the rest, with a little help from the web site.
The first responsibility of the site is to host a HTTP-based service, which will receive search requests from the IE8 client and then respond with a XML document that is displayed as the search results. This service will like be the most challenging aspect of providing a search experience. Let’s assume that you’ve got the process all figured out, but we’ll come back to this XML format for the response. This is due to several flavors of what your service could provide.
To understand these flavors, we’ll look at a OpenSearch description file. This file informs the IE8 client with what your service does and where it’s located. You could start with some MSDN documents like Web Developer Search Features and XML Search Suggestions Format Specification, but let’s look at a few full examples. (I definitely recommend looking at thee links when you start thinking about your implementation.)
1: <?xml version="1.0" encoding="UTF-8" ?>
2: <OpenSearchDescription xmlns="https://a9.com/-/spec/opensearch/1.1/" xmlns:ie="https://schemas.microsoft.com/Search/2008/">
3: <ShortName>Buzztap Search</ShortName>
4: <Description>Buzztap Search</Description>
5: <InputEncoding>UTF-8</InputEncoding>
6: <Image width="16" height="16">https://buzztap.com/favicon.ico</Image>
7: <Url type="text/html" template="https://buzztap.com/BuzzManager?action=Search&search={searchTerms}" />
8: <Url type="application/x-suggestions+xml" template="https://buzztap.com/suggestions.jsp?search={searchTerms}"/>
9: <ie:PreviewUrl type="text/html" template="https://buzztap.com/previewResults.jsp?search={searchTerms}"/>
10: </OpenSearchDescription>
This is the search description for BuzzTap. It’s a XML template and relatively straightforward. The interesting stuff does not start until line 7 although these lines 1-6 are important. Live 7 is important because older browsers will rely on this line to do the traditional search. Line 8 is optional, but indicates that your search service will return search suggestions – and this is a big step in an enhanced search experience.
Line 9 is another good signal for enhanced search. Remember that search providers will be used as accelerators in IE8; so this line says that you have a search page that can be an accelerator preview. With Line 8 and Line 9, BuzzTap’s search experience is a great example of what you can do.
The following is Amazon’s search provider. This service is a little different than BuzzTap. First, they expose XML suggestions and JSON suggestions services – when this happens, only the XML endpoint is utilized, which is a good thing as it has a little more flexibility in expressing how the results will appear. Second, Amazon unfortunately did not provide a accelerator preview option.
1: <?xml version="1.0" encoding="UTF-8"?>
2: <OpenSearchDescription xmlns="https://a9.com/-/spec/opensearch/1.1/">
3: <ShortName>Amazon Search Suggestions</ShortName>
4: <Description>Amazon Search Suggestions</Description>
5: <InputEncoding>UTF-8</InputEncoding>
6: <Image height="16" width="16" type="image/x-icon">https://g-ecx.images-amazon.com/images/G/01/Associates/Apps/Search/favicon._V230744766_.ico</Image>
7: <Url type="text/html"
8: rel="results"
9: template="https://www.amazon.com/s?ie=UTF8&tag=amznsearch.ms-20&index=aps&link%5Fcode=qs&field-keywords={searchTerms}"/>
10: <Url type="application/x-suggestions+json"
11: rel="results"
12: template="https://completion.amazon.com/search/complete?method=completion&q={searchTerms}&search-alias=aps&client=amzn-search-suggestions/9fe582406fb5106f343a84083d78795713c12d68&mkt=1"/>
13: <Url type="application/x-suggestions+xml"
14: template="https://asp.assoc-amazon.com/suggestions?q={searchTerms}&t=amznsearch.ms.vs-20"/>
15: <Url type="application/opensearchdescription+xml" rel="self"
16: template="https://d2lo25i6d3q8zm.cloudfront.net/browser-plugins/AmazonSearchSuggestionsOSD.IEA.xml"/>
17: </OpenSearchDescription>
The next provider to check out is eBay. They have a full search provider because they provided the option for older search clients (Line 6, and note it comes first – a requirement), the XML suggestions option in Line 8 (Line 7 will be ignored), and Line 9 has the accelerator preview option. So, eBay is the provider to demo – if you’re looking for a big name to present.
1: <?xml version="1.0" encoding="UTF-8"?>
2: <OpenSearchDescription xmlns="https://a9.com/-/spec/opensearch/1.1/" xmlns:ie="https://schemas.microsoft.com/Search/2008/">
3: <ShortName>eBay</ShortName>
4: <Description>eBay - The World's Online Marketplace</Description>
5: <Image height="16" width="16" type="image/x-icon">https://ie8.ebay.com/resources/images/favicon.ico</Image>
6: <Url type="text/html" method="get" template="https://rover.ebay.com/rover/1/711-43047-14818-1/4?satitle={searchTerms}"/>
7: <Url type="application/x-suggestions+json" method="get" template="https://sug.ebay.com/?q={searchTerms}&c=0"/>
8: <Url type="application/x-suggestions+xml" method="get" template="https://ie8.ebay.com/suggest/visual/?q={searchTerms}&s=0"/>
9: <ie:PreviewUrl type="text/html" template="https://ie8.ebay.com/accelerator/search/?q={searchTerms}&s=0"/>
10: </OpenSearchDescription>
So, let’s say that I have eBay’s search provider selected and I typed in “stephen king” in the search textbox. Based on having the search provider XML above, IE8 would make the following call:
1: GET https://ie8.ebay.com/suggest/visual/?q=stephen+king&s=0
Then eBay’s search service honors the request and returns the following XML:
1: <?xml version="1.0" encoding="UTF-8"?>
2: <SearchSuggestion xmlns="https://opensearch.org/searchsuggest2" version="2">
3: <Query>stephen king</Query>
4: <Section title="eBay suggestions">
5: <Item>
6: <Text>stephen king signed</Text>
7: <Url>https://rover.ebay.com/rover/1/711-43047-14818-1/4?mpre=http%3A%2F%2Fsearch.ebay.com%2Fstephen+king+signed</Url>
8: </Item>
9: <Item>
10: <Text>stephen king lot</Text>
11: <Url>https://rover.ebay.com/rover/1/711-43047-14818-1/4?mpre=http%3A%2F%2Fsearch.ebay.com%2Fstephen+king+lot</Url>
12: </Item>
13: <Item>
14: <Text>stephen king under the dome</Text>
15: <Url>https://rover.ebay.com/rover/1/711-43047-14818-1/4?mpre=http%3A%2F%2Fsearch.ebay.com%2Fstephen+king+under+the+dome</Url>
16: </Item>
17: <Item>
18: <Text>stephen king dark tower</Text>
19: <Url>https://rover.ebay.com/rover/1/711-43047-14818-1/4?mpre=http%3A%2F%2Fsearch.ebay.com%2Fstephen+king+dark+tower</Url>
20: </Item>
21: <Item>
22: <Text>stephen king books</Text>
23: <Url>https://rover.ebay.com/rover/1/711-43047-14818-1/4?mpre=http%3A%2F%2Fsearch.ebay.com%2Fstephen+king+books</Url>
24: </Item>
25: <Separator title="Popular items"/>
26: <Item>
27: <Text>Stephen King Dark Tower COMPLETE SERIES 7 Books NEW</Text>
28: <Url>https://rover.ebay.com/rover/1/711-43047-14818-1/4?mpre=http%3A%2F%2Fcgi.ebay.com%2FStephen-King-Dark-Tower-COMPLETE-SERIES-7-Books-NEW_W0QQitemZ280398807790QQcategoryZ377QQcmdZViewItem</Url>
29: <Description>$37.97 (Buy It Now)</Description>
30: <Image source="https://thumbs3.ebaystatic.com/pict/2803988077908080_6.jpg" alt="Stephen King Dark Tower COMPLETE SERIES 7 Books NEW" width="48" height="48" align="top"/>
31: </Item>
32: <Item>
33: <Text>*NEW* THE STAND Stephen King movie 2-DVD SET RARE VIDEO</Text>
34: <Url>https://rover.ebay.com/rover/1/711-43047-14818-1/4?mpre=http%3A%2F%2Fcgi.ebay.com%2FNEW-THE-STAND-Stephen-King-movie-2-DVD-SET-RARE-VIDEO_W0QQitemZ320467862673QQcategoryZ617QQcmdZViewItem</Url>
35: <Description>$19.99 (Buy It Now)</Description>
36: <Image source="https://thumbs2.ebaystatic.com/pict/3204678626738080_3.jpg" alt="*NEW* THE STAND Stephen King movie 2-DVD SET RARE VIDEO" width="48" height="48" align="top"/>
37: </Item>
38: <Item>
39: <Text>Limited: STEPHEN KING: UNCOLLECTED, UNPUBLISHED</Text>
40: <Url>https://rover.ebay.com/rover/1/711-43047-14818-1/4?mpre=http%3A%2F%2Fcgi.ebay.com%2FLimited-STEPHEN-KING-UNCOLLECTED-UNPUBLISHED_W0QQitemZ150417001629QQcategoryZ88433QQcmdZViewItem</Url>
41: <Description>$142.50 (19 Bids)</Description>
42: <Image source="https://thumbs2.ebaystatic.com/pict/1504170016298080_1.jpg" alt="Limited: STEPHEN KING: UNCOLLECTED, UNPUBLISHED" width="48" height="48" align="top"/>
43: </Item>
44: </Section>
45: </SearchSuggestion
In this eBay response, you’ll notice several things. First, there’s a section for additional related searches, that might be better than what the user typed in. These are expressed with just a Text and URL values
Second, there is a Separator keyword that draws a dividing line in response.
Third, there is a special Item element that includes Text, URL, Description, and a Image source. These elements provide for visual search results, which is a key capability for having a standout search experience.
Search Provider Discovery
So, if you had all of the above ready to go, then you need to get the search provider XML document to your customers. There are 3 ways to do this: provide a link to install the provider, expose the provider in the search textbox when the user is on your site, and finally install in the IE8 Gallery. Let’s break this down a little.
It’s very easy to have a installation page on your site for IE8. All of the cool sites are doing this now. Here’s a simple example of providing an install from your site. Note the JavaScript command AddSearchProvider.
1: <a href="#"
2: onclick="window.external.AddSearchProvider('https://JonBox.com/JonSearchProvider.xml')"
3: >Add Jon'sSearch Provider Example</a>
Another option is hint about a search provider while the user is on the site. By providing the below link text on your pages, users will see the search text box have a different appearance when on their site (a orange drop down button). They will also get an option to install too.
1: <link title="My Provider" rel="search"
2: type="application/opensearchdescription+xml"
3: href="https://JonBox.com/JonSearchProvider.xml">
The third way is to upload the XML as part of registering the search provider in the IE8 Gallery. Anyone can do this, and it’s completely free. With millions of people visiting this site, this is a no brainer.
So, for the best results, you should leverage all 3 of these discovery methods.
For More Details
One of the best places to get the details for implementing what I have summarized here is MSDN’s Search Provider Extensibility in Internet Explorer. So, go make a cool search experience for your customers, and let us know about it.