Add Google Custom Search

There are numerous ways of helping readers find your blog content. One way is to add Google Custom Search to your blog.

I have long believed that Google is a blogger’s best friend, and the more you can integrate your blog with Google, the better. When someone is on your site, it is helpful for them to know that they can find other content by searching for it using a familiar tool like Google Custom Search.

From this screen, click the blue button which says, “Create a Custom Search Engine.”

Create a Custom Search Engine

The first thing to do is enter your blog information.

Enter the name of your site, a brief description if you want, and make sure you include the domain that you want searched. You can add multiple domains if you want, and can specify individual pages. The setting I have used searches all pages and all subdomains. I don’t have any subdomains at this point, and I’m not sure I ever will, but I am including them anyway so I don’t have to come back and change these settings if I ever add them.

Also, there are two ways to use Google Custom Search. You can pay $100 a year for it, or you can use it for free. Hmmmm…

Well, the choice is difficult, but I will go with the free version. Besides, everything on Grace Blogger is free! The paid version comes with a few extra features, and it is free of advertisements. But everybody understands that advertising is part of the internet today, and besides, I can use my own Adsense account for the ads.

Next, you need to select how you want the search element to look.

I use the “Default” style and leave all the settings at their default, but you can change the look and feel of these styles to fit your blog colors. Once you have everything set up the way you like it, click Next.

On this page, Google gives you the code for your Google Custom Search Engine.

But don’t insert this code into your blog yet. This code gives the search results in exactly the same place as where the search element is located.

Personally, I don’t like the results appearing this way. I want to change it.

So in the code page, click the little link which says “Look and Feel” to get more options.

When you click that link, it takes you to a page where you can change where the search results appear.

I prefer to have the search results appear on a different page of my own blog, and I can do this by selecting the “Two Page” option. Click “Save and Get Code.”

Next, you want to add the page on which search results will appear and add Google Analytics Tracking.

You can see that I am going to create a page on my blog called “Search Results” and will add the Search results code to that page. Also, I added by Google Analytics tracking number to this as well.

Keep this page open, and open a new tab or window because we are now going to add the Google Search widget to our sidebar, and create a Google Search Results page to the blog.

Add Google Search Element to Sidebar

From within a new tab or window, go to your blog and access the “Widgets” screen in your Dashboard.

In here, you are going to find a “Text” Widget from the widgets in the middle, and then drag and drop it into your sidebar where you want the Google Search Element to appear.

Finally, I get the “Search Box Code” from Google and paste it into the Text area of the widget. Save it, and the Search Element will now appear on your blog.

The problem is that if you were to use this box, the search results page has not yet been set up, and so the search results would not appear properly. So let’s now create a search results page.

Create a Google Search Results Page

We already know how to create a new page. Go to you blog, and from inside the dashboard, select Pages > Add New.

I name my page “Search Results” (because that is what I told Google I would name my page, remember?), and then in the HTML tab of page editing area, paste all the code that was given to me by Google Custom Search.

Then I save the page, and I’m almost done!

What else is there to do? Well, remember how we decided not to pay $100 for an ad-free version of Google Custom Search? This means that the search results page is going to include advertisements. This is kind of annoying, but nearly all internet users are used to seeing ads right now, so it is not a big deal.

But let’s make the deal even sweeter by making sure Google pays us for those ads. We have already set up an Adsense account, so now all we have to do is link our Custom Search Engine to the Google Adsense Account.

Link Search Results to Google Adsense

Go back to your Google Custom Search Engine account, and select “Make Money” from the options on the left. Here, you will need to input the information that is connected to your Google Adsense Account.

Once you have added the information, the advertisements that now appear in your search results will be linked to your own Adsense account. Ads still appear, but at least now you will be getting some benefit from them.

Of course, you’re not going to get rich from this. I make barely a nickel a week off of my search results Advertisements. But at least it’s something, and it’s better than paying Google for a such a great tool.

Test Google Custom Search Engine

Once you have set it all up, you might as well give it a try to make sure the Search is working properly.

It all looks good! Now people can use the Search to find content on your blog.

March 2012 Update

Thanks to the comment from James below, it appears that the Google CSE is broken. At least, the instructions on this page no longer seem to work…

So, here is what you can do to fix it (until Google fixes things from their side). First, go through all the steps above to see if it works for your blog. If not, you will still need some of the information from these steps for the “fix” below.

If you have installed the Google Custom Search Engine as described above, and when you do a test search, all you get on your search results page is the word “Loading” then follow these steps to fix it.

First, edit your search results page. Go to the HTML view, and delete all the code that is in there, and then past this code in:

Save this file.

Now, we need to edit the Search Widget. Go back to the Appearance > Widgets screen and open the widget which has the Google CSE code. Don’t delete the code yet. You will need a small bit of it for this next step.

First, copy the following code and paste it into the very top of your search widget.

Now, there are two things to edit in this code.

On the first line, where it says action=”…” put in the full URL for the page on which your search results will appear. For me, it is http://www.graceblogger.com/search-results. This is the URL of the page which you just put the code into in the step above.

Now you need to enter your hidden custom search engine number. It is a long number (about 21 numbers or so), then a colon (:), then about 11 letters and numbers mixed together. You can find this in the widget code which is already there from the original steps. Copy this entire number from the original Google CSE code, and paste it in between the quote marks in this new bit of code.

Once you have entered these two changes to this code, delete everything else below the new code. You only want this new code. Save the widget, and then go test your Google Custom Search Engine.

Comments

I have tried to set this up (actually to amend an existing custom search engine) on Gentle Wisdom. But I have come across a serious problem in that many of the results are from the mobile version of my site, and end with “?mobile=1”. I want to exclude these results and offer only non-mobile results (and I think mobile users will automatically get the mobile version). But I can’t find a way to do this. Without it Google Custom Search is basically useless for me. Do you have any tips on how to get round this problem?

I don’t know what happened to the Google CSE, but this method stopped working on several of my websites today, so I went back to an older method which is no longer on the Google CSE setup instructions, but which still works fine.