Search is an important part of many websites. When users are unable to find the content they’re looking for through navigation, a lot of the time they will turn to search. This is why it is crucial to have a powerful search engine returning relevant results on your website. Luckily, Google makes it really easy to add a customized search experience through Google Custom Search.
With Google Custom Search, you get the technology behind Google.com powering your website's search, while being able to retain the look and feel of your site. Google allows you to integrate their search solution onto your website for free, limited to 100 queries per day, while also offering paid tiers that allow for higher limits.
The simplest method to getting Google Custom Search up and running on your website is to use the embedded solution you can paste into your HTML. While that method is quick and easy, the downside of the embedded solution is that it will still show Google’s branding and can look out of place on your site. Instead, we’ll be building a custom solution using their JSON API to integrate the search results into the website seamlessly.
Create your search engine
Head over to the Custom Search Engine Control Panel and create a new search engine for the site you would like to integrate. Creating a search engine is as simple as entering a URL for the site you would like Google to index and giving it a name.
Take note of the Search Engine ID, as we’ll be using that later on.
Turn on Custom Search API access
If you are using the free tier, visit the Google Developers Console and create a project for your search engine. Within your project, you’ll need to enable the Custom Search API from the APIs tab. Finally, on the Credentials tab, you will need to create a Public API access key by selecting the Create new Key option and choosing Server key. Take note of the API key generated as we will be using that later on.
Paid users can find their API key in the Control Panel in the Business > XML & JSON tab.
Request search results from Google
Now that we have our Search Engine ID and our API Key, we can send Google a GET request that includes our credentials and the term we are searching on:
GET https://www.googleapis.com/customsearch/v1?key={API_KEY}&cx={SEARCH_ENGINE_ID}&q={SEARCH_TERM}The request will have returned a JSON string with the search results and other relevant information related to your search. You will need to decode and parse this data and loop through the results to be displayed on your website. The stripped down JSON response below outlines the fields that will be of use:
{
"queries": {
"request": [{
"totalResults": // Total results found
"searchTerms": // Search term used
"count": // Amount of results returned with this request
"startIndex": // Starting index, used in pagination
}]
},
"items": [
{
// Result 1
"title": // Title of the webpage
"link": // URL of the webpage
"snippet": // A chunk of relevant text from the webpage
},
{
// Result 2
"title":
"link":
"snippet":
},
{
// Result 3
"title":
"link":
"snippet":
},
…
]
}Resources
For the full JSON API reference, visit the Reference page on the Google Developers website. For a library you can use on your own site, check out our PHP interface for the Google Custom Search JSON API on GitHub.
