Google is incredible search engine that provides searched results in a second. It also returns related results as user serached for. You can also implement Google search for specific website in your website specific for your website.
Google provides Programmable Search Engine which allows visitors find the information they're looking for. You can customize search bar and results. If your website have enough traffic, then you can also integrate it with your Adsense account and earn money when user clicks on ads they see in your search results.
To implement Programmable Search Engine in your website, first Go to Programmable Search Engine and login to your Gmail account.
First add the websites where you want to implement search engine. You can set any parts of the website or entire website for searching. Use *.website.com to implement full website search. Then click Create button to generate code.
You will see Get Code button which you need to add in your website. Now copy that code and put it to anywhere in <body> tag where you want to add Search box and result.
<!-- Put the following javascript before the closing </head> tag -->
<script async src="https://cse.google.com/cse.js?cx=123:456"></script>
<!-- Place this tag where you want to implement search -->
<div class="gcse-search"></div>
You can put search box and search result differently. The below types of Programmable Search Elements are available to use:
| Type | Element | Description |
|---|---|---|
| standard | <div class="gcse-search"> | A search box and search results, displayed in the same
.
|
| two-column | <div class="gcse-searchbox"> and <div class="gcse-searchresults"> | A two-column layout with search results on one side and a search box on the other. If you plan to insert multiple elements in two-column mode in your webpage, you can use the gname attribute to pair a search box with a block of search results. |
| searchbox-only | <div class="gcse-search"> | A standalone search box. |
| searchresults-only | <div class="gcse-searchresults-only"> | A standalone block of search results. |
If you want to change behaviour of the search, you can add these attributes.
Note: Make sure you have added responsive metatag in <head> element For maximum website compatibility pages.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
If you want to customize layouts anf look of search box and result, then you only need to change in Settings menu. You don't need to change in the code.
If you want to integrate Rest API, then Google also provides JSON API, that will return json data. Then you can handle and manage data as you want to show. JSON API is free for 100 calls per day. Additional requests will costs $5 per 1000 queries, up to 10k queries per day. You will also need to add Billing details in Google Search console.
