Adding a Google search bar for your website can significantly enhance user’s browsing experience and improve site navigation. A search bar allows visitors to quickly find the content they are looking for and that is one of the best start for new users to visit the website again. So searchability is at the core of making the website more user-friendly and efficient. This method works with major CMSs such as WordPress, Ghost, Drupal, Joomla, etc.
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, below we will explore a step-by-step guide to adding a Google search bar or box to your website along with best practices to optimize its functionality.
Add a Google search bar to a website
- Step 1: Sign in to the Control Panel using your Google Account (of course you need an account with Google).
- Step 2: Enter the name of your search engine. You can change this name at any time.
- Step 3: Click to Create and that’s all.
With this, 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
- 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:
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 in real time until Google merchant Feed Update is set up.
- Not much control over search results.
- No voice search feature
- No real-time support via email
- 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
- No Ads. We never show ads in our search results.
- Affordable pricing plan.
- Real-time support to help you take live your search on your website.
- Full control over search results
Happy searching. Here is the signup link again: https://cse.expertrec.com