Tutorial #53
Custom Google Search Basic   2014-04-02


Many sites offer a Search feature that lets you enter keywords and find matching pages on that site. The effort required to set up search on your server will vary depending on the complexity of your site and the types of data that you need to search.

For sites that are relatively simple, Google offers an easy way to set up Search that requires no server side code at all. Google Custom Search Engine lets you add a custom search box by adding a small snippet of code to your HTML. Google indexes the pages on your site for you and takes care of all the searches on their infrastructure.

Demo 1 screenshot for this tutorial

Step by Step

You need to have a Google Account in order to use this service.

1: Go to https://www.google.com/cse/ and click Sign in to Custom Search Engine in the top right of the page.

2: In the New search engine page, enter the site that you want to search. In this case I want to search this site (apprentice.craic.com) You can add more than one or you can specify parts of a site or even specific pages. Select the Language that you want the results to be displayed in and, if you want, give the search engine a specific name. The name is used in an administration page, so if you have several custom engines then you might want to change this. The default value they give is fine here. Click to Create the site.

Image 1 for this tutorial

3: The page that you get back contains three links - Get Code is the one we want now

Image 2 for this tutorial

4: The Get code page shows a block of JavaScript code that you copy and paste in to the web page(s) where you want the search box to appear. You want to place that code within a DIV tag pair which you can place and style it however you choose.

Image 3 for this tutorial

5: When you view your page with this code added then you will see a Google search box and button. The search is 'branded' as Google Custom Search. Notice the microphone icon - you get Voice Search built in for free! You wouldn't have that if you wrote your own search code.

Image 4 for this tutorial

6: Enter search terms that you know are going to be found in your site and submit. The term microphone returns this page of results overlaid on the page with the search box. You can click on the links and go directly to the page on your site.

Image 5 for this tutorial

The down side of using a free service from Google is right there at the top of the search results - Ads by Google. For many sites this is not going to be a big deal. But for others, the ads might look unprofessional and there is always the risk that the ads may describe a competing product or something your users might find objectionable.

You can get rid of the Ads by paying Google a Fee for the search engine. This pricing begins at $100/year for up to 20,000 searches, with higher prices for more searches. This service is called Google Site Search.

7: Once you have set up your search engine, if you go back to https://www.google.com/cse you will be redirected to a page that lists all your registered engines. When you click on the name of one you are taken to an Administration page with a number of tabs and items on the side menu. These allow you to customize the appearance of the site, set up Google AdSense to make (a little) money from those Ads, and fine tune some of the search parameters to give more relevant results.

For example you can turn off Voice Search, turn on Image Search, etc.

Image 6 for this tutorial

The Look and Feel page is worth looking at as it lets you change how the results are displayed, the color scheme used, etc.

Image 7 for this tutorial

As you can see the process is straightforward and you can add Search capability in a few minutes. The appearance of Google Ads is the main issue with using this feature. How the benefits of Search balance the nuisance of Ads will depend very much on your specific project.

Understanding the Code

In the demo the Google code block is placed inside a div which is centered across the page and a width is set, as well as a label added in a p tag pair.

The script contains some sort of Key in the cx variable which identifies this search engine to google. The key is not private so don't worry about someone adding it to their site. The script loads another script from Google which is what renders the search box and sets everything up. There is nothing to customize within this block - just copy and paste it.

That's it - very simple and a nice way to quickly add Search to your site, as long as you don't mind the Ads...

More Information

Google Custom Search Engine

Code for this Tutorial

Share this tutorial

Comment on this Tutorial

comments powered by Disqus