How to Add Google Custom Search Engine on Your Blog or Website

How to Add Google Custom Search Engine on Your Blog or Website

If you are a webmaster who manages a blog or a website, I am sure that you would have felt the need to search within your website. It’s not just you, your visitors would also want to search for articles within your website. You will be surprised at how many people use the custom search engine once you implement it.

google custom search engine

One way to search within a specific website is to use site:yoursitename.com in Google search. That would bring up results just within your website.

However, it is not obvious to your site’s visitors. If you want your visitors want to search within your website, the best way would be to implement the free version of Google Custom Search Engine on your website. There is also a paid version with extra features which we will learn about in the future.

How to Implement Google Custom Search Engine

To get started visit cse.google.com. You have to login using your Google account. It is recommended that you use the same Google account that is associated with Google webmaster tools and Google analytics.

Step 1: Login and click ‘Add’

Login at cse.google.com and click Add to add your website. You will be able to create custom search engines for multiple websites from a single login. If your account is also associated with webmaster tools account, you will see that it will say Is Owner? Yes.

google custom search engine 1

Step 2: Enter website URL and click Create

Then enter your website’s URL and click Create. You also have the option to enter more than one website URL. If you have two websites on the same topic, you can add both the websites and this will help cross promotion.

google custom search engine 2

Quick Idea: You can also partner with a blogger in the same niche and you can add his/her website to the custom search in return for adding your website on their custom search!

Step 3: Get Code

Once the site is added, click on Get code to get the code. You can also link to an URL instead of embedding the search box on your website. Click on Public URL getting the direct link.

google custom search engine 3

Step 4: Add Code on Your Website or Blog

Once you click on Get code, the following code will appear. You can place this code anywhere on your blog to display the custom search engine box.

google custom search engine 4

The width of the search engine bar will be dynamic. If you include it in your side bar, it will automatically fit depending on the width of your sidebar.

Custom Search Engine on my Blog

You can check out my right sidebar below the About section where I have implemented Google custom search. Here’s how it looks:

Google custom search engine

And once you search for something, it shows the results like this. The results are shown in an overlay (popup window within the website).

google custom search results for website

You can see that there are sponsored results just like regular Google search. That’s because this is a free version. If I go for the paid version there are several benefits including removal of sponsored links.

The results from my website are also shown with a nice thumbnail image. There are further customization options available for the custom search results. I have explained more in the video below.

Any questions?