How to add Google custom search to your website


We all know how important the search bar is. Don’t you ? Well, to begin, when the search on your site sucks, people don’t find information they want, and quit. Yes, they will never come back.

That’s why I want to emphasize today on search on your site. As you read, if someone can’t find information on your site, they will leave. And, never return.

And, having bad search which doesn’t display anything relevant, is worse than having no search bar at all. And, to sum it all, not having search bar or having it at different (often difficult) places will effect your user interface.

Well, since you now know the importance of search on a website, do you know how to add one ? Well, you surely can use any made up search engine which might easily cost you a 1000 bucks. And, no guarantee that the search will be excellent.

Related: User interface problems to avoid while creating websites

So, do you know any search engine better than Google ? Well, I don’t.

But, what you don’t know is that google provides search engine for a particular website. Yes, they do. And, it’s called Google custom search.

Unless you want to remove the branding, which costs ~$100, the service is free. And, the results are the most accurate I’ve ever seen.

So, now, let’s get on with how you can add google custom search on your website.

GETTING STARTED

Well, first of all, all you have to do is to go to the Google custom search website and sign in with your google account (which I’m betting that you have one). And, from there, our journey starts.

1) Click on the add button beneath the Edit search engines pane.And, you will be taken to another page.

2) In the sites to search, put the url of your website or the one you want the search engine for. You can also put multiple urls to search multiple websites. This is helpful when you are managing a network of websites.

how to setup google custom search for your website step 1 | Web-Designer Arsenal

You can change the name of your search engine, as well as it’s language. Also, you can fiddle around with creation from keywords tools.

Click Create.

3) And, that’s it. Your custom search engine is now created.But, it is at a weird URL on google’s servers.

how to setup google custom search for your website step 2 | Web-Designer Arsenal

But, now comes the difficult part. How to add the search engine on your website, so your visitors stay on your site, not on google’s. You can see how the search engine works however by visiting the given url.

4) But, before you set off to your journey, there’s one thing to note, you have to add a URL or a sitemap to index, from which Google will show the results.

So, go to your control panel button from the modify your search engine pane on the same screen.

You can fiddle with the settings, but the most important one which I’ll deal here, is the indexing tab. In the indexing tab, you can tell google which specific urls to index or you can also use a sitemap, if you’re verified using google webmaster tools.

how to setup google custom search for your website step 3 | Web-Designer Arsenal

5) After you’re done with indexing, the next step is the look and feel part of your google custom search engine. The first option is Overlay, which I don’t recommend because it causes problems in mobiles.

The second option is two-page, which is the best option for your site. What it does, is it places a search bar on a webpage/s on your site, and when a query is submitted, takes you to another page where the results are displayed. For the purpose of this tutorial, we are going to use the two page option. However, you can change it as per your will.

how to setup google custom search for your website step 4 | Web-Designer Arsenal

Although, the one I don’t recommend is google hosted, as it drives traffic away from your site, rather than keep traffic on it.

6) Click on the Save and get code button. Now, you are presented with a piece of code that you can place on your site, so your search engine is ready to go.

For me, here is the code. (Don’t copy it, it won’t work)

<script>
(function() {
var cx = '005772621722285019738:rsk2rlssw-m';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only>

This code is only for displaying the search engine. But, don’t worry, we will place the results page code as well. For now, just go ahead, and copy your code and place it where you want your search engine to appear.

how to setup google custom search for your website step 5 | Web-Designer Arsenal

However, remember that we had chosen two page for our look and feel.

So, for the results page code, click on the get code for search results button. Go ahead and copy the code. Mine looks like this:

<script>
(function() {
var cx = '005772621722285019738:rsk2rlssw-m';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

It is clear that both the search engine and the search results page have different code. Hence, paste the code at different places accordingly.

AND, YOU’RE DONE

Yes, that’s pretty much it, if you want to add a google custom search engine to your very own site.

BUT, WHAT ABOUT THE GOOGLE BRANDING ?

Don’t worry. If you are a business or a corporation, there is an option to have adless-brandingless option of the google custom search engine. It is priced at $100/year.

AND THE OTHER STUFF ?

Don’t worry, you can be flexible and try out things that you think you might need, specially suggestions. They are great. Don’t worry. You won’t spoil anything. And, if you do, you can also revert back to the former state.

CAN I MAKE MONEY ???

Of course you can. Google is kind enough and allows you to display search ads.

If and only you are google adsense certified, you can make money from the ads google shows on the results.

WRAP-UP

So, now you’ve learned to add a great search engine on your site, with the most accurate search results possible. And, it even allows you to make money from it !

If you had any problems while following this guide, write to us in the comments below, or, contact us. Hope you learned something today 🙂

P.S.: If you liked this, you can get every new piece of content published, right in your inbox. Just sign up below.

Enter your email address to follow this blog and receive notifications of new posts by email.

3 thoughts on “How to add Google custom search to your website

  1. Thank you so much for this little tutorial!!! I can’t live without a search box and really want one on the websites I am beginning to design! I appreciate you sharing!

    Like

Add your Awesome voice. Let's have a meaningful conversation. And remember, don't be a spammer (We hate 'em).

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s