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 CMSes such as WordPress, Ghost, Drupal, Joomla, etc.  Here is also a search engine list that might be of interest to you.

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 in 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, WordPress has a default search bar which adds a 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 want, not just the sites you own. You can include whole site URLs or individual pages URLs. You can also use URL patterns.add google search to website

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 codeadd 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 going to Appearance-> theme editor. If you are on other CMS you can contact your developer and ask him to add it to all the pages where you want this search bar to be shown.add google search to website
  5. Once you add this code to your website, you will be able to 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 autocomplete feature using  attribute. By default, it is set to true if auto complete 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, in order 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 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
  • 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 really likes ads.  In my opinion, there is nothing like a “non-intrusive” ad.  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.

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 out 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 handily. 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 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. You can check out the search analytics after a few days of search engine usage to check out what users are search 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 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

    expertness WordPress search plugin 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 to 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 a duration of 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. 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.)
    • Full 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.
    • Self Learning search algorithm that continuously gets better.
    • Highlighting Search term.
    • Responsive – works across all devices (mobile, tablet, desktop, android app).

     

     

     

     

    muthali ganesh

    Muthali loves writing about emerging technologies and easy solutions for complex tech issues. You can reach out to him through chat or by raising a support ticket on the left hand side of the page.

    You may also like