What If You Could Make "Traditional" Content Marketing a Ton More Efficient and Effective, And Actually Start to Rise Above All The Noise? Learn More

How to Add Google Search to Your Website Watch Overview

How to Add Google Search to Your Website

If you have a site with a sizable amount of content—such as a blog with more than just a few posts—and you want to help visitors find content of interest to them, you likely need some kind of search facility.

One such option is to install a version of Google’s search engine directly on your website.

This comprehensive step-by-step guide shows exactly how to add Google Search to your website, while also looking at the pros and cons of doing so along with the range of customization options available to make it suit your needs…

What Are the Pros and Cons of Adding Google Search?

On the plus side:

  • It’s completely free—you get a customizable, sophisticated search engine on your website without having to pay a cent.
  • It helps you understand what users are looking for—by linking with Google Analytics, you can see user search queries, which can feed into your content planning and help with creating a content calendar.
  • It can generate revenue—create a separate income stream from visitors clicking on ads when using search, by linking your search engine with Google AdSense.
  • You can add a promotion to the top of the search results in order to say highlight a particular product or service. More on how to do this below.

On the other hand:

  • The free version is ad-supported—you can generate revenue from users clicking on those ads, but that can potentially mean visitors heading to competing sites and away from yours (though, as we’ll find out, you can block ads for specific URLs). Whether this works for you or not depends on your business model.
  • It’s controlled by Google—it has various customization options, as described below, but ultimately it’s under Google’s control, and other search options (including WordPress’s built-in search functionality for example) give you a lot more control.
Google's 'Programmable Search Engine' is how you add a custom version of Google Search to your own website. You can even disable Google's branding. #bloggingforbusinessClick To Tweet

You can also choose to disable advertising by instead paying for the search queries conducted on your site, which can be limited by daily quota—we’ll see how to do this later.

So how you approach adding Google Search to your website needs careful consideration, based on your business model and what your aims are.

Ready to get started?

Here’s how to add Google Search to your website…

Add Search to Your Website with Google’s ‘Programmable Search Engine’

What is the Programmable Search Engine?

Google’s ‘Programmable Search Engine’ is effectively what you use to add a custom version of Google Search to your own website.

We’ll look at how to use it to add search to your site, and what you can customize, including what Google includes in its search results.

Google's 'Programmable Search' is one of the easiest ways to add search functionality to your website. You can customize it in multiple ways as required. #contentamplificationClick To Tweet

Creating Your Search Engine

First, head to Google’s Programmable Search site.

Click to create your first search engine.

Create your first search engine, at Google’s Programmable Search Engine

Set the following options:

  • Give your search engine a name:

Name your search engine

  • Tell Google which site(s) you want to be included in the search results. You can add an entire site (e.g. www.everywheremarketer.com/ * ), add only part of your site (e.g. www.everywheremarketer.com/blog/ * ), add individual pages, and other options. Alternatively, you can opt for it to bring back results from the entire web.

Tell Google which sites you want it to search for display in the results

  • Decide whether you want to enable Image search or SafeSearch.

Enable image search or SafeSearch

  • Click the Create button.

You’re then given some code to copy and paste onto your website, where you want the search box and results to be shown.

Google provides you with the search engine code to copy and paste onto your website

For example, without customizing it further, it would appear like this:

Example of adding the Google search code and how it looks on a website

And when someone uses it to search, the results show via a popup (or overlay) on top of the existing page—we’ll see how to customize this shortly:

Example of how Google’s results show on your website

However, note how predominant the ads are in the search results. While the full screen isn’t shown above, they take up more than half of it.

This is fine if your aim is to earn revenue through Google AdSense, but if you’re aiming to keep people on your website and help them navigate to additional content of interest, it may prove less effective than other search solutions and you risk losing visitors to competitors.

Customizing Google Search on Your Website

Click the Customize button that’s shown just beneath the code snippet on Google.

Click the button to customize Google Search

This allows you to adjust some of the options set previously, such as the name of your search engine and the sites to include in the search results.

But then you also get some additional options.

Region

This is only really relevant if you have selected the option to Search the entire web and means you can give preference or restrict the results to a specific region only.

Otherwise, leave as the default All regions option.

Restrict the search results to a specific region only

Exclude Sites

Again, only relevant if you’ve selected the Search the entire web option, you can choose to exclude specific sites from the results shown.

Add sites to exclude from your search engine

Look and Feel

First, adjust the language if needed. Note however this only “determines the page layout and localization of the search engine”, rather than “the contents of the results”.

Adjust the language, which determines the page layout and localization

Then you can adjust the layout and theme. To do so, click the button provided:

Click to view all look and feel settings

Layout

The layout options include the following:

  • Overlay—the default layout, as shown above.
  • Two page—you can specify a separate page on which you want the search results to appear.

Specify a separate page for the search results

  • Full width—this effectively pushes existing content on the page downwards in order to show the results.

Existing content is pushed down the page to show the search engine results

  • Two column—with this layout option, you get two sets of code, one to put where you want the search box to show, and one for where you want the search results to be displayed.

Google Search’s two column layout option gives you two code snippets

  • Compact—displays the search box and accompanying results in a compact format.
  • Google hosted—displays just the search box on your website, with results displayed on Google (redirecting away from your website) rather than within your own site.

Use the Google hosted layout option to display the results on Google rather than within your own website

Themes

Google provides a few different themes for your search engine, which provide preset options for different fonts, background colors and border colors. You can also adjust these options individually along with other customizations which we’ll look at shortly.

Google’s search engine themes

The default option looks very like Google’s usual search engine results pages, whereas the others use different fonts and color palettes:

  • Minimalist—a simple color palette.
  • Espresso—uses the Georgia font, with a warm color palette.
  • Green sky—uses the Trebuchet font.
  • Bubble gum—uses Arial.
  • Shiny—uses Verdana along with a cool color palette.

An example of what each of these themes looks like is as follows (ads have been removed for ease of display):

Examples of how Google’s different themes might look in practice on your website

These are just preset options, so let’s see how to individually choose fonts, colors, and other aspects of how the search engine is displayed to suit your requirements.

Other Customization Options

Clicking the Customize tab gives you a range of options with which to customize your search engine, including:

  • The font
  • The background and border colors
  • The ability to add your logo (only used when choosing the Google hosted layout option)
  • The search box border color, and button colors
  • The ability to disable Google branding

Disable Google’s branding when adding search to your website

Customizing Autocomplete Settings

Autocomplete is where a dropdown shows beneath the search box, suggesting potential queries based on what the user is typing.

You can choose whether to enable this or not on your search engine, and even add (or exclude) your own autocomplete queries.

To do so, click through to All Search Features settings, and then click on the Autocomplete tab.

Click to see All Search Features settings

Use the switches provided to:

  • Turn autocomplete on or off
  • Include autocomplete suggestions based on other sites around the web—if your search engine is restricted to your own website only, you may wish to turn this off.

Enable or disable autocomplete on your search engine

To add your own custom autocompletions—reflecting queries you’d like to encourage users to search for—use the Custom Autocompletions section.

Add autocomplete suggestions to your search engine

For each suggestion, add in the term you’d like to show, along with an optional score between 1 and 10,000.

This effectively gives you a way to prioritize certain suggestions above others, as suggestions with higher scores are shown before those with lower scores.

You can add up to 20,000 such suggestions. For high volume, it can be easier to upload an XML file in Google’s required format, which also allows you to layer in promotions that you want to show for certain autocomplete queries.

As well as adding autocompletions, you can also exclude queries that you don’t want to be shown as suggestions, whether by entering in terms directly or, for the more technically aware, by using regular expressions.

Want a customized version of Google Search for your website? Try their 'Programmable Search', customizing the layout, theme, ad options, autocomplete settings, and more. #contentmarketingClick To Tweet

Using Synonyms to Help Users Find Results

Users will often search using queries that don’t exactly match words in your content, but where that content is still relevant and you’d like it to appear.

To help users find relevant content in this way, you can add up to 2,000 synonyms to your search engine.

Add synonyms to your search engine to help users find what they are looking for

For each one, enter the:

  • Search term.
  • One or more synonyms, separated by commas.

As with the autocomplete suggestions above, you can also upload this information via a suitably-formatted XML file.

How to Add Your Own Promotion to the Top of Search

Let’s say you want to highlight a particular product or service to users when they search for specific keywords.

Google lets you do this via promotions, which shows a link at the top of the search results on your website, a bit like a text ad.

In fact, you can:

  • Add different promotions for different sets of potential keyword searches.
  • Specify start and end dates for when you want them to run.

Get started by clicking through to the search features settings, as illustrated previously.

Click the switch to enable promotions, and then click the Add button to add your first one.

Click to add your first promotion to Google Search on your website

Fill in the fields provided, and described as follows, to create your promotion.

Add promotion settings

  • Promotion triggering queries—enter up to 100 comma-separated queries. Advanced users can also use a regular expression in the field.
  • Promotion title—the linked title shown at the top of the promotion.
  • Promotion URL—where you want it to link to.
  • Promotion description—up to 200 characters of text.
  • Thumbnail image URL—optionally add a GIF, JPEG or PNG image to be shown to the left of the promotion, resized to 60x60.

Promotions can be turned on or off as required, and even a start and end date provided.

How to Make Money From Your Search Engine Through AdSense

In order to generate a revenue from Google through the ads shown in the search results on your website, you’ll need to connect your search engine with Google AdSense.

To do so, click on the Go to Ads Settings button.

Click to go to ads settings

If you’re not already signed up with Google AdSense, click the link provided. Once signed up, you’ll then be able to turned on the Search Engine Monetization option.

Link Google Search on your website with Google AdSense

How to Block Ads from Competitors

Once your search engine is hooked up with AdSense, you can use features within AdSense to block ads for specific URLs.

In other words, you can completely block competing sites from showing ads on your website.

To do so, go to Blocking controls from within AdSense.

To block competing sites from showing ads on your search engine, click through to Blocking controls within AdSense

With Content selected, click the website where you’ve added Google Search.

Click the button to manage advertiser URLS

Then simply enter in the URLs you want to block, and you should stop seeing ads from those URLs appearing on your search engine results within 24 hours.

But what if you want to go one step further and disable ads completely?...

How to Disable Advertising in the Search Results

In order to focus purely on selling your own products and services, rather than generating revenue through ads, consider disabling the ads shown in the search results on your site.

If you've added Google's custom search engine, Programmable Search, to your website, you can disable advertising by using their Programmable Search Element Paid API. #seoClick To Tweet

This involves using Google’s Programmable Search Element Paid API, which charges (at the time of writing) USD$5 per 1000 ‘ad-free search element queries’.

Click the button they provide to get a Key.

Get a Key to use the Programmable Search Element API

Then enter that key into the settings for your search engine, via the Ads tab.

Enter a key to disable ads on your search engine

Link Google Search with Google Analytics

Google provides some stats within the Programmable Search Engine console.

This shows you popular queries, viewable by day, week, month, year or lifetime, along with other data about search usage, including the number of searches performed.

By linking your search engine with Google Analytics, you are provided with more detailed information via Site Search reports, including:

  • Search usage—find out what users have searched for, whether those searches were refined, and where they went as a result.
  • Trending terms—see the most popular search terms used.
  • Pages—discover which pages have attracted the most search usage.

To link with Google Analytics:

  • Your Google Analytics account needs to be in the same Google account as your search engine.
  • Make sure the Google Analytics code is also on your website.
  • From the Statistics and Logs section of Programmable Search, click the Google Analytics tab and select the profile where you want the Site Search reports to appear.

Link up Google Analytics after adding Google Search to your website

  • You’ll then need to add one or more parameters to indicate the query parameters you want to use, such as ‘q’.

Add query parameters to your Google Analytics site search settings

Note that after adding one or more parameters, you may need to select the profile again and then click Save for the information to be saved correctly.

Save the Google Analytics info regarding the connection with Google Search on your website

To Conclude

Hopefully you’ve found our comprehensive guide on how to add Google Search to your website helpful.

As we’ve discovered, it’s simple to get started—by simply copying and pasting a few lines of code to your website—and there are a range of customization options to suit.

You can even choose to link up with AdSense to share revenue on clicks on ads within the search results, or choose to eliminate ads completely via their Paid API feature.

Get the #BeEverywhere Newsletter:

@bySteveShaw

Steve Shaw is the founder of EverywhereMarketer, and has ran online businesses for over 20 years, serving over 13,000 customers in 137 countries. EverywhereMarketer helps you grow online visibility, attract more customers and grow your business across multiple channels.

Please note that the content on this blog is free because it's reader supported—some content contains links to third-party products and services for which we may receive a commission if clicked and a purchase made.