How to add Google Search bar to your website

How to add a Google Search Bar to your Website?

Rate this article

Share this article

Easy steps to add a Google search bar or box to your website. You need not have any coding knowledge to follow the steps below. This method works with all major CMS’s such as WordPress, Ghost, Drupal, Joomla, etc.  

How to add Google Search bar to your website

On-site search on any website is a crucial piece of technology since it allows users to search for content inside your website and helps reorganize your content strategy to match your products or blog content to what people are searching for on your website. The reason why Google search is so popular is that it is easy to implement and also it is reliable. There is another reason that people might like it or hate it – Ads. Yes, Google search has ads. It might be helpful for people looking to monetize their websites. For others, it might be a huge turn-off. If you belong to the second group, you might have to look for alternative custom search engines like Expertrec.

If you are on WordPress, it has a default search bar that adds basic search functionality. But it is lacking in many desirable search features such as auto-complete, more control over the search UI, and location of the search box. Word press users, can download our extension from this link. Detailed instructions on how to install the WordPress extension are given at the end of this blog.

Add Google search bar to a website using Google custom search

Creating a Google custom search using (programmable search engine)

  1. To create a Programmable Search Engine:
    1. Sign in to Control Panel using your Google Account (get an account if you don’t have one).
    2. The name of your search engine will be automatically generated based on the URLs you select. You can change this name at any time.
    3. Select the language of your search engine. This defines the language of the buttons and other design elements of your search engine but doesn’t affect the actual search results.
    4. Click Create.

    Your basic search engine is ready to use! To see more configuration options, go to the Control Panel. Control Panel also has a preview window that allows you to test and fine-tune your search results.

  2. Go to https://cse.google.co.in/cse/add google search to website
  3. Sign in to Control Panel using your Google Account (get an account if you don’t have one).
  4. The name of your search engine will be automatically generated based on the URLs you select. You can change this name at any time.
  5. In the Sites to search section, add the pages you want to include in your search engine. You can include any sites you wish to, not just the sites you own. You can include whole site URLs or individual page URLs. You can also use URL patterns.add google search to website
    Add a google search bar to your site for $9 per month

Implementing Google search box

Once you’ve created your Programmable Search Engine, you can add the Programmable Search Element to your site. To do this, you’ll need to copy some code and paste it into your site’s HTML where you want your search engine to appear.

  1. In the Control Panel, click the search engine you want to use.
  2. Click Setup in the sidebar, and then click the Basics tab.
  3. In the Details section, click Get code. Copy the code and paste it into your page’s HTML source code where you want the Google search bar to appear. Click on receive code.add google search to website
  4. Add this code to your website. If you are on Word press, you can use a plugin called Elementor or insert headers and footers plugin that will do this for you. If you want exact placement, you will have to edit your theme file by Appearance-> theme editor. If you are on another CMS, you can contact your developer and ask him to add it to all the pages you want this search bar to be shown.add google search to website
  5. Once you add this code to your website, you will see the Google search bar on your website pages.

Editing the look and feel

On many occasions, it makes sense to have a search box appear independently from search results. A two-column layout allows you to render a search box in one area of your page (for instance in the sidebar) and display results in a different one (for instance the main area of the page).

To change the layout of your engine go to the Look and feel section in the Control Panel and click the Layout tab. After selecting and saving the 2-column layout in the Control Panel, you also need to change the HTML code for the Search Element.

Enable Autocomplete

Apart from customizing colors, fonts, or link style in the Control Panel, it is possible to influence the look and feel and the behavior of the search box via custom HTML attributes.

This allows you to override some of the general settings from the Control Panel. It is especially useful when you want one search box (e.g., one on the homepage) to behave differently than other ones on the site. For example, you can enable or disable the autocomplete feature using attributes. By default, it is set to true if autocomplete is enabled in the Control Panel. By switching the value to false, you can control how the element behaves.

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults" data-defaultToImageSearch="true"></div>

Customizing Search Results

In a similar way to customizing the search box, you can add additional options to the search results element.

For example, to change our search engine from webresults-based to image-based, we can utilize the defaultToImageSearch attribute.

First of all, you need to enable Image Search in the Control Panel for your search engine. In the Setup section, in the Basics tab, click the Image search option into the “on” position. After that, add the defaultToImageSearch attribute to the <div class="gcse-searchresults"></div> element on your website.

 

Advantages of adding Google custom search

  • Google custom search is free. There are few custom search engines that are free.
  • If you enable ads inside Google custom search, you can make money from AdSense.

Disadvantages of using google custom search-

  • Ads- You can lose your website visitors to competitors.
  • No control over what is indexed or when
  • No control of search results
  • No support
  • Minimal UI customization options
  • It can be shut down or changed at any time. Google is known for killing products ruthlessly without considering the user base.

Though this might sound great to have Google search on your website, there is no free lunch.  Google shows ads to cover up for this service.  Now say, your site is about shoes of brand X.  when people search on your site for a shoe you have,  Google shows an ad of your competitor brand Y and places it above your site results.  Your visitors are going to believe that you indeed are recommending brand Y yourself.  If you are going to monetize your visitors, then this will drastically reduce your income.

Second, no one likes ads. In my opinion, there is nothing like a “non-intrusive” ad. But, ads are Ads, and they are bad. I wouldn’t like to force my visitors to watch ads while they are searching on my website.  Method 2 will give an alternative but paid solution to this problem.

Add a google search bar to your site for $9 per month

Google search bar for your website using Expertrec

Expertrec adds a Google-like search box to your website. It is priced at 9 USD per month. The biggest advantage is that it doesn’t contain ads.

Before starting to make a custom search engine using Expertrec, make sure that is your website is live and not behind a login (If your website is behind a login, follow steps in this blog). Have your sitemap URL handy. Also, make sure you have code access to your website. Follow the below steps.

  1. Go to https://cse.expertrec.com/?platform=cse.
  2. Login with your Gmail id.
  3. Enter your website URL. (enter your website URL in the format https://www.yourwebsite.som).
  4. Enter your sitemap URL. ( if you don’t have a sitemap, you can skip this step as well).
  5. Initiate a website crawl. (Now Expertrec crawlers will start crawling your website. This could take some time depending on the size and number of pages on your website).
  6. Once the crawl completes, you can make changes to your search engine’s look and feel and also to the search engine’s ranking algorithm by using the control panel. There are more advanced features like search weights, promotions, synonyms, and more.add google search to website
  7. Go to the code section and add it to your website. You can also email the code to your developer and ask them to add it to their website.
    • the code contains two portions ( one within <script></script> and another piece of code <ci-search></ci-search>).
    • The <script></script> is just the JavaScript component and can be added using Google tag manager or using the code editor.
    • The <ci-search></ci-search> code adds the search box to your website. The place where you add this code determines the location of the search box.add google search to website
  8. It is advisable to make the code changes in a test mode or development website before taking live in your live/ production site.
  9. As a final step, remove any website cache that you might have.
  10. Now your site search engine is live. After a few days of search engine usage, you can check out the search analytics to check out what users are searching for and reorganize your content strategy accordingly.

    Advantages of Using Expertrec search bar

    1. No Ads. We never show ads in our search results.
    2. Affordable pricing plan. – We have prices starting at $9 per month.
    3. Real-time support to help you take live your search on your website- You can be sure that search results don’t
    4. Full control over search results.

    Happy searching.  Here is the signup link again https://cse.expertrec.com?platform=cse

    Google search box using a plugin for WordPress websites

    You can also use the following plugin to add a Google search box to your WordPress site.

    WP Fastest Site Search wordpress plugin

    Expertrec WordPress search plugin for wordpress replaces the standard WordPress search widget and adds auto-complete, spell correct, PDF search, image search, and voice search capabilities to your WordPress site. For more information, visit Expertrec.com

    This custom search plugin is highly customizable and lightning-fast. It also adds filters and search results pages for a better search experience for your visitors.

    You can build and configure your own WordPress search user interface with no coding. Please note that this is a paid plugin (plans begin at 9$ per month) and that you may try out a free demo for 14 days. However, you can continue using the voice search feature for free even after the trial period.

    This plugin replaces your default WordPress search form. However, for some themes, the default integration might not work. For such cases, you will have to add the code <ci-search></ci-search> at the desired location ( for example, in your menu or header or footer). It also adds voice search capability to your WordPress site.

    Features

    • Superfast. (Since our search loads from our super-fast servers with super caching technology-enabled, you can expect to deliver a super-fast search experience to your website visitors).
    • Free voice search. (Currently supported only in Chrome browsers).
    • Image search. ( Featured images are automatically captured from every page and are displayed alongside the search results).
    • PDF search. (Contents within the PDF are indexed and displayed inside search results. Users can separately select only PDF results using the filter option)
    • Relevant and better search results. (Our search learns as users interact more and more with the search engine, which leads to better re-ranking ).
    • No Ads. (We promise never to show ads in our search results).
    • Search Filters and Facets. (Our crawler automatically detects categories of blogs and products and creates a filter for users to fine-tune their search results).
    • Custom Search engine rules. (You can define custom search rules to promote or demote search results).
    • Synonyms. ( You can set synonyms by adding in our easy-to-use interface, for example, furniture=sofa, etc.)
    • Complete control over the UI (no coding required).
    • Quick and easy configuration. (no coding required).
    • Fast type ahead auto-complete search suggestions.
    • Advanced word matching and typo correction.
    • The self Learning search algorithm continuously gets better.
    • Highlighting Search term.
    • Responsive – works across all devices (mobile, tablet, desktop, android app).  

    Add a google search bar to your site for $9 per month

     FAQs

    What Is The Purpose Of A Search Bar On Your Website?

    The primary purpose of a search bar is to improve user experience and enable users to navigate your website easily. Therefore, a search bar is considered one of the vital features of any website or eCommerce store. 

    When your customers spend close to 10 seconds without getting the answers to their quests, they are ready to leave your website. And to avoid losing to other eCommerce merchants, you should provide them with an optimized search bar. 

    Some of the importance of search bars include:

    • It serves as a shortcut to the content you want. 
    • It is fast and efficient, therefore saving users time. 
    • To have the most relevant search results. 
    • Users will navigate and relate to your website.
    • As an eCommerce merchant, you can integrate the search bar with your google analytics to know how often customers visit your website.

    What Are The Search Bar Best Practices? 

    Creativity is only one of the critical factors when designing a search bar. Instead, it’s crucial to live up to users’ expectations of your website. Most web browsing starts with a Google search, which is possible because of the search bar.

    When designing the search bar on your website, be sure to watch out for the following:

    Use a widely recognized symbol. A straightforward icon with few details will yield the best results. 

    Use a reasonable size to aid visibility.

    Simple search button. Ensure there is an obvious “search” button for everyone else to click after entering a search query.

    Use the auto-correct mechanism to assist users in getting their questions right.

    Which is the best autocomplete plugin?

    If we are having a conversation about the finest autocomplete plugins, the conversation starts and ends with Expertrec.

    Get more than simply search; Expertrec is loaded with useful tools made to be as simple to use for you as they are for your consumers. These are a few of the many reasons Expertrec should be your first priority –

    • Increases consumer satisfaction on your website by fast-loading search results. It doesn’t matter whether the user spells a term improperly.
    • The search feature in ExpertRec could still provide results after spelling correction.
    • Voice searches and mobile devices are the way of the future. Expertrec, which already supports voice, is on the front lines of this.

    On Expertrec, the intelligent search bar will “predict” the user request in addition to providing the results they are seeking. Search boxes make it easier to find your website than header navigation tabs do.

    The relevant item surfaced for each user, thanks to the usage of AI-based rating technology. Also, regardless of whether the search query is written improperly, relevant results are still displayed.

    It also creates Uni & Bidirectional Synonyms and helps with the presentation of search results for non-text matches, both of which can improve the search experience.

    How to make a search bar like google in HTML?

    Here are the steps that you need to follow carefully –

    • Use your Google Account to log in to Control Panel (create an account if you don’t already have one).
    • Based on the URLs you choose, a name for your search engine will be produced automatically. This name is changeable at any moment.
    • Choose your search engine’s language. The actual search results are unaffected by this, but it does dictate the language of the buttons and other design components of your search engine. Press Create.
    • Your entry-level search engine is prepared for use! Visit the Control Panel to explore additional setup choices. Moreover, Control Panel offers a preview pane where you can check and adjust your search results.
    • Visit this link: https://cse.google.co.in/cse
    • Use your Google Account to log in to Control Panel (create an account if you don’t already have one).
    • Based on the URLs you choose, a name for your search engine will be produced automatically. This name is changeable at any moment.
    • Add the pages you want your search engine to index to the Sites to Search section.
    • Any websites, not just those you own, may be included. Site URLs as a whole or URLs for specific pages are both acceptable. Also available are URL patterns.

    A search bar’s main goal is to enhance user experience and make it easier for visitors to traverse your website. As a result, a search bar is regarded as one of the essential components of any website or e-commerce establishment.

    Customers are prepared to quit your website when they have been on it for about 10 seconds without finding the answers to their questions. Also, you must give your consumers access to an optimized search bar to prevent falling behind other e-commerce retailers.

    Which is the best autocomplete plugin?

    WordPress auto-suggest plugins:

    • Live Ajax Search in SearchWP: With a live ajax search, this plugin provides quick and accurate search results.
    • Ajax Quest for WordPress: The AJAX-powered search box that this plugin adds to your WordPress site gives visitors instant search suggestions and makes it easy for them to find content.
    • Ivory Search: You can make advanced search forms with auto-suggest features with this plugin, which can make it easier for visitors to find the content they want.
    • Relevanssi: With features like fuzzy matching and the capability to index custom post types and taxonomies, this plugin provides a powerful search engine for your WordPress website.
    • WP’s Quickest Website Search: With a focus on speed and ease of use, this plugin gives your WordPress site a fast and accurate search experience.

    How to make a search bar like google in html?

    You can follow these steps to create an HTML search bar similar to Google:

    • Add a form element to the file’s body section when you create a new HTML file. The search button and bar will be in the form element.
    • Set the action attribute to “https://www.google.com/search” and the method attribute to “get” in the form element. This instructs the browser to send the search query to Google and submit the form using a GET request.
    • Create an input element with the name “q” and the type “text.” The search bar that users can use to enter their query will be located here.
    • Include a “submit”-type button element. Users will be able to submit their search query by clicking this button.
    • A placeholder attribute can be added to the input element to display a message asking users to enter their search query.
    • Save the HTML record and open it in your internet browser to see the hunt bar in real life.
    Are you showing the right products, to the right shoppers, at the right time? Contact us to know more.
    You may also like