Add tab to search in your Gatsby blog

August 16, 2020

You can go to the blog main page to see the demo

There’s a cool Chromium browser feature called Tab to Search, which lets you quickly search a site via a Chromium address bar (aka the Omnibox).

Here’s 3 quick steps to add it to your search-enabled Gatsby blog:

Create a file named opensearch.xml in your static directory (src/static/opensearch.xml) and add the following:

<?xml version="1.0"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>[Your Blog's Name]</ShortName>
  <Description>[Your Blog's Description]</Description>
  <Url type="text/html" method="get" template="https://[your-url]/blog/?search={searchTerms}"/>
</OpenSearchDescription>

Make sure to add your preferred <ShortName> and <Description> text content. The <Url> template is the url where the search is taking place. In our case, it’s /blog/?search={searchTerms}, with {searchTerms} being the string the user types into the Omnibox. These tags are required for Chromium to add your site to the list of searchable sites and authomatically enable this feature.

Copy the default html.js file to your Gatsby site so we can modify the default HTML Gatsby file.

cp .cache/default-html.js src/html.js

In your newly created src/html.js file, add the following <link> tag:

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

And thats it! With this change in place you’ll have this neat feature up and running in your blog 😎.

Written by Jorge Ruvalcaba, software engineer 👨🏽‍💻, taco master 🌮 and music lover 👨‍🎤. Follow me on Twitter

← Nuevo blog