How To Add Google Search Box On A Website

Google search box is nothing but a search form which allows people to find related content on your website. In this article, we study how one can add Google search in the 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 benefits of using Google search on the website.

  • It reduces the load on your database. While 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 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 Adsense search box and Google search box is while using Adsense search bar, Google displays advertisement along with the search result. These advertisements help you make money with the Adsense.

Again come to our original topic, below are the steps to follow to add 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.

sign in cse

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.

Create CSE

Step 3: On the next page, you should see the successful message. From here, click on the Get code.

Get Code

The code you get has the search box and search result 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 two-page layout. In this case, you can place your search box anywhere on the website. And for search result 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 the Look and feel under Setup. Select the option Two page and click on Save & Get Code.

Look and Feel

Step 5: Get your code for the search box and search result.

Search box code

Step 6: Last step need to do is add search page URL. Click on the Search Result Details and paste the URL of your search page like YOUR_DOMAIN/search.

Search page URL

Now, you have code for both search box and 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 below screenshot.

Search box

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 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 for using our own search form.

When we search for a keyword through 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 search box name should be ‘q’.

Below is the 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.

Leave a Reply

Your email address will not be published. Required fields are marked *