Web Hosting

How to Set Up Google Custom Search and Keep Readers on Your Site for Longer

Google custom search box. The WordPress search function has never been good. And yet providing a good search function is a great way to keep readers on your site for longer.

I wrote back here about why I set up Google Custom Search on this site.

It was pretty much a no-brainer really: if you can get the leading search technology working on your site why the heck wouldn’t you..?

So here’s the process for setting up Google Custom Search on your site.

How to set up Google Custom Search

When you’re first setting up GCS it’s a good idea to carry out Steps 1 to 6 below first and leave the rest until later.

This will get your search engine up and running and you can make sure it’s working as you expect it to, before moving on to the remaining steps and adding further tweaks.

And when you’re making tweaks it’s important to make only one change at a time and check the results before making another.

If you make multiple changes at once you won’t know which one caused any changes in performance.

Step 1:

Go to the Google Custom Search homepage and click the ‘Create a New Search Engine’ button.

You will be asked to log in to your Google account or create a new one.

Step 2:

After logging in you’ll need to fill in some basic information:

Search Engine name and description: Use your site name or domain name and keep your description to less than 150 characters.

Keywords: Use as few keywords as possible (1 is best and no more than 3) but make sure they accurately represent the content on your site.

Using too many keywords restricts the search results, causing them to omit some articles.

I started off with around 8 keywords, and my initial search results were very disappointing. They improved dramatically when I cut it down to 3.

Save changes.

Step 3:

Choose your language settings. I have transliteration set to ‘off’ because it’s not available with the search element.

Save changes.

Step 4:

Choose your search preferences. I’ve selected ‘Search only included sites’ because I don’t want people leaving my site for another.

Save changes.

Step 5:

In the menu bar on the left, click on ‘Sites’ and add the URL of the site or sites you want included in the results.

Save changes.

Step 6:

In the menu bar on the left click ‘Indexing’. You will see the list of sitemaps that are associated with your Google account. These come from your Google Webmaster Tools settings.

The first time you set up a custom search engine it’s a good idea to select the sitemap url of the site to which you’re applying the search engine and click the ‘Index now’ button.

Save settings.

If you don’t have a sitemap you should set one up and submit it via Google Webmaster Tools. If you need to set up your GWT account and verify your site this article explains how.

You can also submit individual pages to be indexed if they’re particularly important. I haven’t submitted any individual pages for this site.

Important: Is this a new Custom Search Engine you’re setting up?

If so, you’ve now provided enough data for the initial set up. So move to Step 11 below to set the look and feel of your search widget and grab the code to install on your site.

You can come back and add tweaks and refinements to your settings (Steps 7 to 10) later, once your basic search engine is working well.

Step 7:

In the menu bar on the left click ‘Refinements’.

A refinement is the way you can offer options to searchers who type in a very broad search query.

For example, if a searcher typed in ‘WordPress’ as a search term, the refinements offered may be ‘WordPress themes’, ‘WordPress plugins’ and ‘WordPress backup’.

These are offered to searchers immediately below the search box and above the first results, and you define these options on the Refinements page.

If your searchers are typing in broad terms on subjects for which you have a range of articles you may want to categorise the articles you have and define them as refinements.

Make sure there’s a good range of articles within each category – for example I have 40 articles on WordPress plugins on this site – and add these terms as refinements.

Save.

Step 8:

In the menu bar on the left click ‘Promotions’.

A promotion is an article that you specifically want to appear in response to a particular search term or range of search terms.

You might use this if you wanted the review page on an affiliate product to appear, ahead of any other related page, whenever someone types in the name of the product, for example.

Add any pages you want to promote.

Save

Step 9:

Go to the menu bar on the left and click ‘Synonyms’.

A synonym is a related term and it’s a way of broadening the results.

For example, a related term to ‘plugin’ would be ‘addon’, and adding this as a synonym would produce results as if both ‘plugin’ and ‘addon’ were included in the search query.

Be careful, though, because adding synonyms that are not truly related may produce some nonsense results, which would give your users a poor experience.

Add any synonyms that would be appropriate based on your site’s content.

Save.

Step 10:

In the menu bar on the left click ‘Autocompletions’

With autocompletions enabled your search engine will suggest related or previous searches based on the first few characters a searcher types.

I believe autocompletions is now available by default across all GCS engines, but you do have the opportunity on this page to add specific autocompletions to be included or excluded on your site, based on your site’s content.

Add any ‘to be included’ or ‘to be excluded’ autocompletions.

Save.

Step 11:

Go to the menu bar on the left and click ‘Look and feel’.

This page enables you to customize the appearance of your search results.

I initially chose to host the search results on my own site (search element) but I had a lot of trouble making the search results fit properly within my site layout.

It never looked good.

So I now host the results on a Google page. This is not ideal because searchers may initially be put off by the change in appearance, and think they’ve been shunted off to another site.

To get around that I’ve put a note above my search box explaining that the search results will appear on a Google page.

While this is not ideal, the process is more professional than having the search results appear on a page on which the formatting is all over the place.

So make your choices, then click ‘Save and get code’.

Step 11:

If you clicked ‘Save and get code’ from the ‘Look and feel’ page you will end up on the ‘Get code’ page. If not, then click ‘Get Code’ in the menu bar on the left.

The code in the box will have been generated based on the settings you made in the previous steps.

Copy the lot and paste it into your site. On this site I’ve pasted it into a simple text widget, which I’ve then named ‘Search This Site:’ and placed at the top of the first sidebar.

Summary

Google Custom Search is a powerful tool and it’s transformed the search experience on this site.

However, it does take a bit of testing, tweaking and re-testing to get it working right.

So, as I mentioned earlier, go through steps 1 to 6 above and install the search box on your site first.

Test it, tweak it if necessary (paying particular attention to the keywords you’ve set) and make sure it’s producing the results you expect it to.

Remember to make only one change at a time and test the results before making another.

Once it’s working to your satisfaction you can then go back and add the refinements in steps 7 to 10.

Cheers,

Martin Malden

Web Hosting

Comments on this entry are closed.

  • Sara 1 September, 2011, 1:44 am

    Hiya, You have some really helpful Thesis tutorials but I wanted to let you know I came across a post today that works for integrating your google search into Thesis. I tried it and it worked beautifully for my site. The only thing is once you paste the search results code into the thesis_hook_post_box_top you have to remember to check to make sure that you change the search wide code to the size that will fit in your blog post column, so for me mine is 480.

    http://moneytalksonline.com/2011/01/how-to-add-google-search-in-thesis-theme

    • Martin 1 September, 2011, 7:56 am

      Hi Sara,

      Yes – that’s one of the beauties of Thesis: the Hooks enable you to place anything, anywhere on your page.

      Another popular place to put the search box is in the header, because that frees up real estate that can then contain content.

      Cheers,

      Martin.

      • Sara 7 September, 2011, 3:23 am

        Yes, I think that’s a good idea. I have yet to try and do that though. lol

  • Johnny 6 September, 2011, 7:39 pm

    Wow, exactly what i was looking for and very well written. The wordpress search i simply terribly and its a nice bonus that google allows for ads in the searches. Thanks so much for the guidance!

    • Martin 6 September, 2011, 10:12 pm

      Hi Johnny,

      You’re welcome – glad it was useful!

      Cheers,

      Martin.

  • Michael | BuildinganOnline.com 15 February, 2012, 10:27 am

    Hi Martin,

    I am trying to do almost exactly what you have done on this site.

    Two differences though. One minor and one major!

    The minor is, that instead of placing the search-box in a widget, I try to place it before sidebar 1 (thesis_hook_before_sidebar_1). As you will see by visiting my site, I’ve managed that task. (I’ve cheated and used OpenHook – I gotta find out later, how to move it to the custom_function.php)

    The major difference is; I CAN’T GET IT TO WORK :'(

    I believe, I’ve followed the instructions, here and elsewhere, to the letter. But all I get is a result page that doesn’t load – no matter how hard I spank the computer…. :'(

    I also tried to insert a search-box at the top of the result page, just as you have, but that left the one in the sidebar in an endless “loading” condition :'(

    How on earth have you got yours to behave that nicely?

    Could I please hope for a little help here??

    Regards,
    Michael

    • Martin 15 February, 2012, 3:26 pm

      Hi Michael,

      There are few things more frustrating than trying to get Google products to work as you want them to, and as they claim they will..!

      Without looking at the backend of your site, it’s difficult to suggest any specific solutions.

      All I can say is be sure you select as many of the configuration options as you can in the GCS set-up pages. For example, creating the search box at the top of the search results page is simply a question of checking an option – you should not need to manually insert it.

      I’d also suggest initially setting up the sidebar search box in Thesis’ GCS widget. That will give you the best chance of getting the thing to work properly. Once it’s working properly in the GCS widget, you can then copy the code into OpenHook and add it before the sidebar.

      Be warned, though, that even when you’ve got everything working you will still need to get into the weeds and create some styling rules to get everything looking the way you want.

      The search results page styling is in-line on the page and the search box styling can all be done in the custom stylesheet, but you’ll probably need to use Firebug to make sure you’re editing the correct selectors.

      Cheers,

      Martin.

  • Michael | BuildinganOnline.com 16 February, 2012, 12:00 am

    Hello again,

    I’ve tried with the sidebar widget at first, and it makes no difference.

    Now I have actually “stolen” you exact code to see what did happen.
    I, of course, managed to place the search box in the wanted position (before sidebar 1), and with your data, I end up correctly at your result page (https://www.wealthydragon.com/search-results-2/) and it provide the results as it should.

    Next, I changed the data in your code to reflect mine (Google key/api, and page address). in fact hat should be the only thing needed. No result :'(

    Changed both codes back to my own now….

    I doubt it, but could it be a server issue? I’m with HostGator.

    Regards,
    Michael

    • Michael | BuildinganOnline.com 16 February, 2012, 12:56 am

      and by the way; It is only when I try to integrate the result to stay at my own site (…/search-results), it doesn’t work.

      I’ve even place an other search-box at the result page now, and that does work.

      It seem to me like the receiving script on the result page, doesn’t connect with the search-box in the site bar.

      And yes, both the key/api and the URL is there….

      And I’ve moved the search-box to the Thesis Google custom widget…

      • Martin 16 February, 2012, 8:21 am

        Again, without looking at the back-end of your site there’s not much else I can suggest.

        Perhaps the best approach may be to scrap everything and start again from the beginning, but do it in two stages:

        1. Set the results to appear on a Google hosted page
        2. once that’s working, set the results to appear on your own page

        Cheers,

        Martin.

  • Erik 16 June, 2012, 4:07 am

    Hi Martin,

    Helpful Tut=thanx.

    Q: How did you get ads to not appear in the search results?

    Erik

    • Martin 16 June, 2012, 7:35 am

      Hi Erik,

      I don’t specifically remember but I’m not a user of Adsense, meaning I don’t have it activated anywhere in my Google Account – this may be why.

      Cheers,

      Martin.

      • Erik 16 June, 2012, 7:50 am

        Thanx Martin. I’ll goof around a bit more with the settings. Maybe it’s in the Make Money tab.

  • Erik 16 June, 2012, 5:27 am

    Hi Martin,

    I appreciate the detailed guide on how to set up the search box because it works quite well.

    I am left with one question though. I did the text widget version and I did it via functions file. Both worked great and I have my new Google Custom Search account set up and linked to Google Analytics.

    Here’s my question: No matter how I set up the layout – “Google-hosted”, etc…the results show up in the sidebar only.

    Any advice aside from trying to set up my own results page? I may do that in the future but you said it was a real mess to format it.

    Thank you,
    Erik

    • Erik 16 June, 2012, 7:51 am

      PS. Looks like you got your results to show up on your site and it looks great. Do you remember what you did to the formatting so that it is no longer a mess (as you stated in the article)?

      • Martin 16 June, 2012, 9:08 am

        Got distracted while replying to your earlier question, so our comments have overlapped! See my response earlier to how I got the results to display on a page on this site, but let me know if you have any specific questions,

        Cheers,

        Martin.

    • Martin 16 June, 2012, 9:04 am

      As long as you choose ‘Google Hosted’ the results should be displayed on a Google page, so I’m puzzled that they’re not.

      Remember that I tried Google Custom Search twice and didn’t like it the first time, which is why I used Search Unleashed until that no longer worked.

      The second time I set it up (which is what prompted this article) I set it up initially so the results would display on a Google page (using the ‘Google hosted’ option) and then later on a page on this site.

      You need to set up a blank page for the search results on your site and then select the ‘two page’ option under the ‘Look and feel’ link. When you’re getting the code there will be two sets of code:

      1. One for the search box, that you would place in a widget
      2. One for the search results that you place on the blank page after adding the URL of the new blank page into the box on the ‘Get code’ page

      Displaying the results on a page on the site now works fine, much better than the first time I tried it. Maybe they just tidied up the code or something…

      Cheers,

      Martin.

      • Erik 19 June, 2012, 3:18 am

        Martin,

        That’s exactly what I want to hear!

        I’ll be doing that end bit you commented about with the 2 page – one bit of code on the box and one bit on the results page – this week.

        Due to your comment, I’m confident that it’ll work.

        If I get hung up, I might be back.

        Thanx,
        Erik

        • Erik 21 June, 2012, 4:39 am

          Hi Martin,

          Okay, so I set up a blank page.

          I selected the two-page option on the look and feel page of Google Custom Search Engine.

          I have the search box code in the search box area.

          I added the URL of the new blank on the “Specify the url in your site where you want the search results to appear:”

          I have my query – “Specify the query parameter name embedded in the url:” as “search”

          I pasted the code on the blank page right where I would normally type content. ***I’m wondering if I did this last step wrong?***

          It still uses the Google-Hosted results and generates the results on a Google-Hosted page.

          I’m stumped.

          Thanx,
          Erik

  • Erik 21 June, 2012, 5:14 am

    PS. First I did get it to work as “Google-Hosted”.

    Then it didn’t work when I tried the two page option from look and feel.

    Now it partly works. The /search-results page shows up with the title, but not the results themselves. What the heck?

    • Erik 21 June, 2012, 5:18 am

      I meant to add to get it to partly work, I cut the code from the content area of my “/search-results” page and pasted it in the “Embed Your Own JavaScript” area several input boxes below the content area.

      • Martin 21 June, 2012, 7:44 am

        Hi Erik,

        WRT to pasting the code into your search results page, did you paste it into the HTML view or the Visual View? I paste all my code snippets into the HTML view, and I use the Raw-HTML plugin to ensure WordPress doesn’t tamper with it.

        Cheers,

        Martin.

        • Erik 21 June, 2012, 8:05 am

          Hi Martin,

          Yes, I pasted it in the HTML view. Good point though.

          As an aside, I use the OpenHook plugin. It’s quicker and easier than editing the custom functions file. If you don’t use it, I can still understand hooks to an extent.

          Another thing is, I can get it to work either in my sidebar or my footer (but then it also puts the search box there and the results appear right below it, looks really weird and isn’t useful down there).

          A few things I can think of that make it work for you:

          1. You might be using a custom function differently than I do.

          2. You might have an Adsense account and are using that in conjunction with Custom Search.

          3. You pay the $100 per year to get extra customization options.

          4. You have some code in your Custom.css file.

          *shrugs*

          Erik

          • Erik 21 June, 2012, 8:20 am

            PS. Something else I noticed is that your results show up with a search box at the top. Mine don’t. Only thing I get is the word “Loading”.

          • Martin 22 June, 2012, 7:56 am

            Hi Erik,

            I do have some styling in custom.css, but that doesn’t affect any of the functionality – it’s just for things like the behaviour of the search button, its size and background colour. I don’t have any functions set up for this.

            If you’re using Thesis are you using the Thesis Google Search widget..? It shouldn’t make a difference but it may be worth trying…

            As for the rest, I don’t have Adsense, I didn’t pay the $100 a year (didn’t even know that service was available!) and I just copied and pasted the code Google produced.

            Try the Thesis Google Search widget…

            Cheers,

            Martin.