Add tab to search in your Gatsby blog
Aug 16, 2020
Brief guide to help you add a cool tab to search feature in your gatsby blog.
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:
  1. Create a file named opensearch.xml in your static directory (src/static/opensearch.xml) and add the following:
<?xml version="1.0"?>
<OpenSearchDescription xmlns="">
  <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}"/>
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 automatically enable this feature.
2. 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
3. In your newly created src/html.js file, add the following <link> tag:
And thats it! With this change in place you’ll have this neat feature up and running in your blog 😎.
If this post helped you, please consider follow my journey on twitter @jorgearuv

Loading Comments...