Codegena
make your website compatible with google chrome omnibox search
ProgrammingTutorials

How to add google chrome omnibox-search support for your site?

April 18, 2016
730 views
2 min read
IN my recent article on top 10 google chrome tricks, I have shared a trick to instantly search websites from chrome’s Omnibox(by clicking on tab after entering a URL). But not all sites support this feature, webmasters need to do some work to make their site compatible with chrome’s Omnibox search. If your site is hosted on Google’s Blogger service, then your site is already compatible with this feature. But if you are having a self-hosted site such as a WordPress blog, then this is how you can add Omnibox search support.

  1. Step 1: Creating search.XML file

    Add omnibox search support for your website
    Click to view the image in it’s full size.

    Open notepad and copy-paste the following code snippet into it. Replace Site Name, Site Description, Favicon URL, yoursite.com with the actual values. Now save the file as search.xml

    <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <script/>
  <ShortName>Site Name</ShortName>
  <Description>Site Description (eg: Search sitename)</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Image width="16" height="16" type="image/x-icon">Favicon url</Image>
  <Url type="application/x-suggestions+json" method="GET" template="http://suggestqueries.google.com/complete/search?output=firefox&amp;q={searchTerms}" />
  <Url type="text/html" method="GET" template="http://yoursite.com/?s={searchTerms}" />
  <SearchForm>http://yoursite.com/</SearchForm>
</OpenSearchDescription>

  2. Step 2: Upload the file to the root folder of your website

    The second step is to upload this newly created file to your website. To do that open up your hosting panel such as cPanel. Go to the root folder and upload the file there. That’s all you got to do in this step.

  3. Step 3: Adding the meta tag

    The final step is to add the necessary meta tags to your website. Copy the following meta tag and paste it after the <head> tag. If you are using wordpress, then use plugins such as Per page add to head to add meta tags to the head section of your website source code. That’s it!

Follow this StackOverflow question to stay updated on this topic. If you have any issues, leave a comment and I will help you out.

Shan Eapen Koshy

Shan Eapen Koshy is a web developer, technical blogger and a YouTuber. He has created several web applications and has written many app scripts.

View all posts

Add comment

You may also like