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 do not need any coding knowledge to follow the steps below. This method works major CMSs such as WordPress, Ghost, Drupal, Joomla, etc.  

How to add Google Search bar to your website

On-site search for a website is a crucial 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 reliable. Assuming your site is crawled by GoogleBot, let’s see the steps i.e. programmable search engine.

Add a Google search bar to a website using Google custom search

Step 1:  Sign in to the Control Panel using your Google Account (of course you need an account with Google).

Getting Started

 

Step 2:  Enter the name of your search engine. You can change this name at any time.

Create Google Site Search

Step 3:  Click to Create and that’s all.
Creation complete

 

Your basic search engine is ready to use! We can configure search features, UI look, and Google ads later.
Note: cse.google.com is the old URL and Control Panel is the new one.
There will be a link to preview search or navigate to basic settings > Public URL.: https://cse.google.com/cse?cx=67d0040d2a5004c34

search demo

Step 4: Update your site code like below

<!DOCTYPE html>
<html>
    <head>
    <title>Google Custom Search Bar</title>
    <style>
        body
{ text-align: center; }
        .logo {
            display: block;
            margin: 20px auto;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
            width: 200px; /* Adjust the width as needed */
        }
        .gcse-search {
            margin-top: 20px;
         }
    </style>
    </head>
    <body>
    <img src="https://www.expertrec.com/wp-content/uploads/2024/07/logo.png" alt="Expertrec Logo" class="logo">
    <script async src="https://cse.google.com/cse.js?cx=67d0040d2a5004c34"></script>
    <div class="gcse-search"></div>
</body>
</html> 

UI Output:
UI Output

 

Advantages of adding Google custom search

  • Google custom search is 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 if they have ads enabled for the user query.
  • No control over what is indexed or when. For an e-commerce website updates to search results won’t happen realtime until Google merchant Feed Update is set up.
  • Not much control over search results.
  • No support
  • Minimal UI customization options
  • It can be shut down or changed at any time. Google may stop such service as they did for Google Search Appliance.

Sounds great to have a 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.  If you are going to monetize your visitors, then this will drastically reduce your income.

 

Using the Expertrec search bar

  1. No Ads. We never show ads in our search results.
  2. Affordable pricing plan.
  3. Real-time support to help you take live your search on your website.
  4. Full control over search results

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

 

 

YouTube video

 

Are you showing the right products, to the right shoppers, at the right time? Contact us to know more.
You may also like