Google search box is nothing but a search form that allows people to find related content on your website. In this article, we study how one can add a Google search to a website. There are some steps to follow. We go through step by step on adding this search box.
Before starting with the integration we should list out the benefits of using Google Search on the website.
- It reduces the load on your database. While the reader searches for content, no query will fire on your database for finding related content. Google intelligently does this by crawling a website.
- Google allows us to integrate the design of our own search form. How? we will discuss this in a moment.
If you are a Google Adsense publisher then please read our article on How To Add Google Adsense Search Box On A Website.
The difference between the Adsense search box and the Google search box is while using the Adsense search box, Google displays advertisements along with the search result. These advertisements help you make money with Adsense.
Again coming to our original topic, below are the steps to follow to add a Google custom search engine on the website.
Steps For Adding Google Search Box
Step 1: Go to the Custom search engine page and login with your Google account.
Step 2: After login, you will redirect to a page where you need to add your website to a search. Add your domain name to the field Site to search. At the end hit the CREATE button.
Step 3: On the next page, you should see the successful message. From here, click on the Get code.
The code you get has the search box and search results on the same page. That means, when you enter some keyword in the search box, a pop-up will display the related content.
But we recommend, do not use this format. Instead, go for a two-page layout. In this case, you can place your search box anywhere on the website. And for search results create a separate page where you want to display the end result of related content to the readers.
To integrate this two-page layout follow the next steps.
Step 4: Click on Look and feel under Setup. Select the option Two page and click on Save & Get Code.
Step 5: Get your code for the search box and search result.
Step 6: The last step need to do is add the search page URL. Click on the Search Result Details and paste the URL of your search page like YOUR_DOMAIN/search.
Now, you have code for both the search box and the search result. Add the search box code at the place where you want your search form to appear. And on your search page paste the code for the search result.
After adding a search box code, you will see a search box like the below screenshot.
If you are fine with this default layout then this is the end of this tutorial for you. But if you wish to add your own layout for the search box then please keep reading.
Use Own Layout For Search Box
Go back to step 6 and you will notice we specified the query parameter as ‘q’ in the search result details form. We are going to take benefit of this by using our own search form.
When we search for a keyword through the Google search box our browser URL will be like YOUR_DOMAIN/search?q=YOUR_KEYWORD.
While integrating our own search form, we have to follow the same pattern. That means, our action URL should be the search page, and the search box name should be ‘q’.
Below is an example of a search form.
<?php
$q = isset($_GET['q']) ? $_GET['q'] : '';
?>
<form role="search" method="get" class="search-form" action="YOUR_DOMAIN/search" >
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search …" value="<?php echo $q; ?>" name="q">
</label>
</form>Now, when you search for any keyword it will redirect to the search page where Google displays the related content by keyword.
If you liked this article, then please subscribe to our YouTube Channel for video tutorials.