When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article
Jobs

ASP ASP.NET ASP FAQs Message Board Feedback ASP Jobs
 
Print this Page!
Published: Wednesday, July 30, 2008

Helping Visitors Search Your Site By Creating an OpenSearch Provider

By Scott Mitchell


Introduction


One of the nicest features of modern browsers like Mozilla Firefox and Microsoft Internet Explorer is the search bar in the upper right corner. With this tool you can quickly search any number of websites without having to first visit their search page.

The search bar in Internet Explorer.

This functionality is most commonly used to search the Internet using search engines like Google or Live.com. I recently was reading Scott Hanselman's blog and found an interesting entry on how to let your visitors add your website to their search bar. In a nutshell, you need to provide information on how to search you site in an XML file according to the OpenSearch standard. Next, reference this file in the <head> element on each web page in your site via a <link> tag. When a user visits your site their browser detects this information and allows the user to add your site to their browsers search bar.

Using this technology you can create a custom search provider for your website that your visitors can add to their browser search bar. Once added, users can search your website directly from their browser search bar, just like they can search Google or other search engines from the same interface. This article shows how to create an XML file that conforms to the OpenSearch standard and how to link to it from pages in your website. Read on to learn more!

- continued -

An Overview of the OpenSearch Standard


The OpenSearch standard was created several years ago by Amazon.com as a means for search engines to share information about their search interface and options in a machine readable format (namely, XML). Using this standard, a search engine shares information about its functionality through a small XML file. The standard dictates the precise structure and format of this file. The OpenSearch standard is supported by both Internet Explorer 7 and Firefox version 2.0 and up in the form of the search bar located in the upper right corner.

If your website has a search engine, you can share information with the search engine through the OpenSearch standard so that visitors to your site who used a compatible browser can optionally add your search engine to their search bar. (If your site does not have a search engine, you can build one or use Google's free Custom Search Engine. See Implementing Search in ASP.NET with Google Custom Search for more information on this topic.) This article details how to add the necessary XML file and what steps you must take so that browsers can detect it.

Creating the XML File


Start by creating a new XML file in your website's root directory. Name this file OpenSearch.xml. Next, add the following markup to the XML file:

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
   <ShortName>Name to Appear in Search Bar</ShortName>
   <Description>Description</Description>
   <Url type="text/html" template="URL to display search results"/>
   <Image height="16" width="16">16x16 image to appear in the search bar in Firefox</Image>
   <AdultContent>false</AdultContent>
   <Language>en-us</Language>
   <OutputEncoding>UTF-8</OutputEncoding>
   <InputEncoding>UTF-8</InputEncoding>
</OpenSearchDescription>

Most of the elements are pretty straightforward. However, the Url and Image elements deserve some attention. The search results for most websites is accessible from a particular URL where the search criteria are specified through the querystring. For example, when you search 4Guys you are taken to http://search.internet.com/query.php?site=4guysfromrolla&IC_QueryText=searchQuery&Search=Search, where searchQuery are the terms you entered into the search text box. This information is conveyed in the Url element by specifying the search results URL along with the text {searchTerms} in the location where the user's search query entered into the search box are to appear. The Url element for the 4Guys OpenSearch.xml file follows:

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
   ...
   <Url type="text/html" template="http://search.internet.com/query.php?site=4guysfromrolla&amp;IC_QueryText={searchTerms}&amp;Search=Search"/>
   ...
</OpenSearchDescription>

The Image element allows you to specify an image that will appear in Firefox's search bar when your site's search is selected. If your website already has a favicon.ico, you can reference this in the Image element. That's what I do for the 4Guys search provider. If your site does not have a favicon.ico file you can create one over at www.favicon.cc.

You can add additional elements to your OpenSearch.xml file if you would like. For a complete list of elements, see the OpenSearch 1.1 specification.

Make Sure Your OpenSearch.xml File is Properly Formatted
After customizing the XML document, ensure that it is properly formatted in accordance with XML's syntactical rules. For example, XML is case-sensitive so it is imperative that you use the same casing for the XML tags as I show above. Moreover, you need to escape any less than (<), greater than (>), ampersand (&), quotation mark ("), or appostrophe (') that appears in the text with the appropriate value: &lt;, &gt;, &amp;, &quot;, &apos;, respectively. For example, if the URL to search your site is http://www.yoursite.com/search.aspx?term={searchTerms}&page=1, replace the ampersand with the escaped equivalent, like so: http://www.yoursite.com/search.aspx?term={searchTerms}&amp;page=1.

Referencing the OpenSearch.xml File from Your Website


With the OpenSearch.xml file created, the final step is to reference the file from the pages in your website. This is done using a <link> element in the <head>. Namely, add the following HTML within the <head> element of all of your web pages. (Ideally, you are using master pages or some other code reuse technique that makes updating the <head> element as simple as modifying a single file.)

<html>
   <head>
      ...

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


      ...
   </head>

   ...

With this addition, a visitor's search bar illuminates when visiting your site. They have the option of adding your search provider permanently to their search bar, after which they're just one click away from searching her website. The screenshot below shows the orange illuminated search bar in Internet Explorer. (The search bar turns blue in Firefox.)

The search bar is illuminated because the user is visiting a website with a custom search provider.

Furthermore, the user visiting your site can add your search provider permanently to their search bar.

The visitor can add the custom search provider to their search bar.

Conclusion


The OpenSearch standard and support in modern browsers makes it a cinch to create a custom search provider for your website and enable your visitors to quickly search your site. What better way to draw back visitors than to offer them a quick and easy way to search your site? (If your site doesn't have a search page, consider using Google's free Custom Search Engine.)

Happy Programming!

  • By Scott Mitchell


    Further Reading


  • The Official OpenSearch Website
  • Adding OpenSearch to your website and getting in the Browser's Search Box
  • favicon.ico Generator
  • Implementing Search in ASP.NET with Google Custom Search


  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article