Embed Google Search In Html

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.

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)

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. Thename of your search engine will be automatically generated based on the URLs you select. You can change this name at any time.
3. Select thelanguage 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. ClickCreate.
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.
Go to https://cse.google.co.in/cse/
Sign in to Control Panel using your Google Account (get an account if you don't have one).
Thename of your search engine will be automatically generated based on the URLs you select. You can change this name at any time.
In theSites 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.

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.

In the Control Panel, click the search engine you want to use.
ClickSetup in the sidebar, and then click theBasics tab.
In theDetails section, clickGet 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 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.
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 theLook and feel section in the Control Panel and click theLayout 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 tofalse, 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 theSetup section, in theBasics tab, click theImage search option into the "on" position. After that, add thedefaultToImageSearch 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.

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.

Go to https://cse.expertrec.com/?platform=cse.
Login with your Gmail id.
Enter your website URL. (enter your website URL in the format https://www.yourwebsite.som).
Enter your sitemap URL. ( if you don't have a sitemap, you can skip this step as well).
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).
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.
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.
It is advisable to make the code changes in a test mode or development website before taking live in your live/ production site.
As a final step, remove any website cache that you might have.
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

No Ads. We never show ads in our search results.
Affordable pricing plan. – We have prices starting at $9 per month.
Real-time support to help you take live your search on your website- You can be sure that search results don't
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