Enable Google Chrome’s "Tab To Search" Feature in Your Websites

Last Updated On : Wednesday, December 25, 2013
1

In previous post, I’ve explained how to search directly in websites using Google Chrome’s “Tab To Search” Feature. But to do so the website must be optimized or enabled with “Tab To Search” feature. How to enable the same in my website? is the question arising in your mind. Here I’ve a steps to optimize or enable Google Chrome’s “Tab To Search” Feature on your websites.
To do so include your website with “OpenSearch”.

online-search3

What is OpenSearch?

OpenSearch is a collection of simple formats for the sharing of search results. It was created by A9.com, which is an Amazon.com’s company. Many Web browsers supports OpenSearch which includes Google Chrome, Yandex.Browser, Arora, etc., You can also use OpenSearch formats to help people discover and use your search engine and to syndicate search results across the web.

Read brief about OpenSearch here.

Yesterday I’ve enabled this feature on my blog http://www.techtolead.com and it works well for me in Google Chrome.

Enable Google Chrome's Tab To Search Feature in Your Websites (2)

How To Steps:

1. Create a xml file named “opensearch.xml” and paste the below code to it.

   1:  <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
   2:      <ShortName>T2Lead.in</ShortName>   // Name Of Your Website
   3:      <LongName>Search T2Lead.in Blog</LongName> //Long Name Of Your Website
   4:      <Description>Technology Blog</Description> //Description of your website
   5:      <Query role="example" searchTerms="example search"/>
   6:      <InputEncoding>UTF-8</InputEncoding>
   7:      <OutputEncoding>UTF-8</OutputEncoding>
   8:      <AdultContent>false</AdultContent>
   9:      <Language>en-us</Language>
  10:      <SyndicationRight>open</SyndicationRight>
  11:      <Developer>T2Lead.in</Developer> //Name of the Developer, i prefer the website name
  12:      <Tags>tag1,tag2</Tags>
  13:      <Image height="16" width="16" type="image/vnd.microsoft.icon">http://www.techtolead.com/favicon.ico</Image> // Replace your sites favicon URL
  14:      <Url type="text/html" template="http://www.techtolead.com/?s={searchTerms}"/>      //Add your sites search URL
  15:      <Url type="application/x-suggestions+json" template="http://www.techtolead.com/suggestions.html?query={searchTerms}"/>
  16:  </OpenSearchDescription>

In the above code

 <Url type="text/html" template="http://www.techtolead.com/?s={searchTerms}"/>

Replace the sites search URL according to your site.

Some examples of Website Search URL:

<Url type="text/html" template="http://www.techtolead.com/?s={searchTerms}"/>
<Url type="text/html" template="http://www.techtolead.com/?search={searchTerms}"/>
<Url type="text/html" template="http://www.techtolead.com/search.html?q={searchTerms}"/>

2. Once you Done with “opensearch.xml”. Upload it to your Websites Root directory.

3. Now add the below line of code inside your <head> tag of the websites main page. If you’re using blog like wordpress, then add the code in your active template’s header.php file.

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

 Change the title of your website and  href is the link to your “opensearch.xml” file. This code is fine if you uploaded the “opensearch.xml” into your root directory.

Many feature are there to optimize. The above code is which i used in my blog. You can also customize the code.

Hope you like this tutorial, post your comments.

  • Priya

    Thanks. Today enabled this feature on my site.

    Priya