How to add Google Site Search form in Blogger

BySatyam Singh
How to add Google Site Search form in Blogger

Google Site Search is a service that allows us to embed a search engine (as an address bar) on our website. We can customize the search results to categorize and prioritize certain posts, pages, multimedia or documents, we can also customize the appearance of the search box (as an address bar) and search results to match the appearance of our website. Google Site Search enables our website visitors to search for some specific or particular content on our website.

There are websites like w3schools.com,  where they have a search form which actually searches for the term that you enter in Google search box and produces the output showing the Google search results.

This is probably the best method to drive high traffic on your website and rank your posts higher in Google Search. If you have some SEO knowledge then you must also be knowing that CTR matters a lot. CTR or click-through rate means how many clicks your posts get in Google search results.

By default you get the default search bar of the blogger to search your content (posts or pages) on your blog. You can customize the search bar and make a custom Google site search for your blogger blog. Google site search form enhances the professional look of your blog.

Suggested: How to set up advanced meta tags in Blogger

How Google site search form works

The Google site search form works when someone enters any keyword in the custom address bar, then the search will be made by the Google search engine and the results will be shown as Google search results. Enabling the your blog visitor to enter your post/page through Google reference.

If you want embed Google site search form on your blogger blog or website then just follow the steps given below. These steps are written in the simplest of the languages that even a beginner can understand.

Steps to add Google Site Search form in Blogger:

  • Open blogger.com.
  • Then, click Layout from the left menu.
  • Click Add New Widget Button.
  • Select HTML / Javascript widget.
  • Copy the code provided below and paste it as widget content.
<div itemprop="mainEntity" itemscope="itemscope" itemtype="http://schema.org/WebSite">
    <link href="https://yourwebsite.com" itemprop="url" />
    <form action="https://www.google.com/search" id="search-wrapper" itemprop="potentialAction" itemscope="itemscope" itemtype="http://schema.org/SearchAction" method="get" target="_blank">
        <meta content="https://www.google.com/search?q={q}" itemprop="target" />
        <input name="cof" type="hidden" value="FORID:10 " />
        <input name="ie" type="hidden" value="ISO-8859-1" />
        <input class="search-form" itemprop="query-input " name="q" placeholder="Search here" required="required" type="search" />
        <input value="https://yourwebsite.com" name="as_sitesearch" type="hidden" />
        <button class="search-button" title="Search" type="submit">SEARCH</button>
    </form>
</div>

Replace https://yourwebsite.com in the above code, with your website URL.

  • Save Widget and you are done!

Conclusion

Now visit your site to check for the changes that you made are correct or not. If you have completed all the steps as written in this article then you should not be having any problem. If you are still facing difficulties or having some problems in making changes then please let me know in the comments below. I will definitely help you.