A contextual search experience for Wikipedia

Wikipedia users can now configure a Custom Search skin to customize their Wikipedia search experience. Once configured, the skin helps you to search Wikipedia, and for contextually relevant articles, from any Wikipedia page. This can make it easier to find relevant information, especially on Wikipedia pages with many links, and where the topics you are researching are ambiguous. You can find instructions to configure the Custom Search skin at Wikipedia. It works with Wikipedia's Monobook and the Beta Vector skins, and should work on Wikipedia domains globally. Remember that you need a user account and must log in to Wikipedia to use it.

With the skin configured, if you are reading the Wikipedia page on NASA, and do a search for the query [mars], you are presented inline results organized into 3 tabbed groups: All Wikipedia pages, Linked Wikipedia pages, and Linked non-Wikipedia pages. The first tab shows all Wikipedia articles that match, including those about the candy (Mars Bars) and the television series (Veronica Mars). The next 2 tabs provide contextually relevant results that are linked from the NASA page, such as information about various Mars rovers, orbiters, and space labs, as shown in the screenshot.



Here's what's going on under the covers:

Linked Custom Search enables the creation of dynamic search experiences, where the content being searched can be defined on the fly, and can change over time as new information becomes relevant. The Custom Search skin creates a Linked Custom Search engine on demand for every Wikipedia page that you navigate to.

The results from the current Wikipedia domain, as well as the results from the per-page dynamic search engine, are presented inline in tabbed categories via the AJAX search API. You can refine results by the category of choice, and quickly review the results without having to open a new browser window or tab. This happens through the Javascript code in the skin. The skin's CSS defines the look and feel of the results.

As for the page-specific Linked Custom Search engine, it computes the contextual results within the Linked Wikipedia pages (on-domain) and Linked non-Wikipedia pages(off-domain) categories. These two tabs are technically very similar, so we'll just describe how one of them works.

Suppose you're visiting the NASA article and search for [mars]. The Linked Wikipedia tab sends the search query to Google Custom Search, along with a parameter that indicates that the search engine specification is at (view source in browser):

http://googlecustomsearch.appspot.com/wikipedia/spec.do?url=en.wikipedia.org/wiki/NASA

Google picks up this Linked CSE request and uses the above specification and the supplied query. You can simulate this process by visiting:

http://www.google.com/cse?cref=http://googlecustomsearch.appspot.com/wikipedia/spec.do?url=en.wikipedia.org/wiki/NASA&q=mars

A different specification is generated for every Wikipedia page (based on url) by a tiny AppEngine application at http://googlecustomsearch.appspot.com. The specification defines a search engine with two facets, labeled "internal" (Linked Wikipedia pages) and "external" (Linked non-Wikipedia pages). The list of "internal" (and "external") webpages to search over is provided by this line in the specification:

<Include href="http://googlecustomsearch.appspot.com/wikipedia/annotations.do?url=en.wikipedia.org%2Fwiki%2FNASA" type="Annotations"/>

This causes Google to visit the webapp at a new URL (annotations.do). Our webapp now collects links from the NASA article, classifies them as "internal" or "external", and returns the annotations in an XML format. You can see the result at (view source in browser)

http://googlecustomsearch.appspot.com/wikipedia/annotations.do?url=en.wikipedia.org%2Fwiki%2FNASA

Now Google can finish building the Custom Search engine for the NASA article, and compute the results for [mars]. The results are returned to your web browser and displayed in the appropriate tab.

But wait! Our little AppEngine webapp doesn't have the CPU horsepower or bandwidth to scan Wikipedia pages on-demand or in nearly-real-time for thousands of Wikipedia users. Instead, the webapp asks Google to scan the page, via a Custom Search tool called makeannotations. The request looks something like this:

http://google.com/cse/tools/makeannotations?url=en.wikipedia.org%2Fwiki%2FNASA&label=myLabel

After makeannotations returns the list of links in the NASA article in XML, the webapp simply rewrites the XML according to the domain of each link.

Since we are creating the per-page search engines on demand, there can sometimes be a short delay in the creation of the search engine, e.g., for new or obscure pages. However, for popular Wikipedia pages, these definitions should be cached, and you should see no delays. In fact, we use a ping method to load up the Custom Search engine in advance before you search. Remember that if there are not many links on the Wikipedia page you are searching from, you may sometimes find no matches for linked pages.

We've open sourced the code for this application. Feel free to work with it. Feel free to extend the skin beyond Monobook and Vector. We built this skin with the help of Wikipedia, and hope that you will provide feedback on your experience. You can also provide your feedback directly to Wikipedia.

Posted by: Paul Komarek, Software Engineer and Jeffrey Scudder, Developer Programs Engineer

Google Custom Search for your smartphone

In our recent Product Ideas survey, one of the most-requested features was about enabling a mobile version of Custom Search. Guess what: It's here! As announced on the Google Mobile blog, Custom Search now enables a rich interactive mobile experience on high-end devices such as Android-powered phones, iPhone, iPod touch, and Palm Pre.

Try it out on your phone right now: search for user-generated content (e.g., search for [maradona]) from sites like Wikipedia, Knol, etc., or learn all about the latest and greatest Custom Search features on our product's mobile search engine (e.g., search for [snippets]).

Custom Search engine results can be embedded in your own site, but website owners can also choose to have Google host the search results page. You can now redirect visitors using these high-end mobile devices to Google-hosted search results, and we will serve up search results optimized for these devices. Better yet, we create a Google-hosted home page for every Custom Search engine that we create (even if you decide to host the results on your own website). Starting today, users who arrive at the home page for your Custom Search engine will be automatically served pocket-sized Custom Search results, along with your search engine customizations, like your labels and promotions.

All you need to do at your own end is redirect users who arrive at your website on one of the supported mobile devices to the hosted Custom Search home page. Another alternative is to provide a button or link on your web site that directs people to your Custom Search home page, whose URL looks like (you will need to replace the ID after "cx=" with your own Custom Search engine ID):

http://www.google.com/cse/home?cx=013315504628135767172:d6shbtxu-uo

Of course, if you'd like to serve these mobile results from your own website, you can replicate the functionality of the mobile home page on your own website. This page uses the Custom Search Element. If you do, you will still need to take care of the redirection at your website so that mobile users receive mobile-friendly search results automatically.

If Google web search is the entry point for navigating the web, we hope you'll use this interactive Custom Mobile Search entry point to help people navigate your own web content when they need information on the go!

Posted by: Radu Cornea, Software Engineer and John Skidgel, Senior Interaction Designer

Google Sites turns Custom Search on

Google Sites offers users a very simple way to create and publish web sites. Multiple users can collaborate to manage website content as well as add various gadgets into their websites. Google Sites now allows the addition of Google Custom Search as a search option.

In the following example, we add a Yoga Search Custom Search experience to the Yoga for Life web site in a few simple steps. (The example assumes that the Yoga for Life website is hosted by Google Sites, and that the Yoga Search has already been created using Google Custom Search.)

1. Login to your Google Site, and select the "Manage Site" option in the "More Actions" dropdown.
   
   


2. Select the "Site Layout" option from the Navigation menu on the left. Click the "Configure Search" button.
   
   


3. Select the Advanced tab in the "Configure site search" dialog. To add a new search provider, click on the "Add provider" button.
   
   


4. Now, we'll need to get information about the Custom Search engine we want to use. Open up another tab or browser window and login to the Custom Search control panel. Find the URL for the search engine you want to use by clicking on it's name in the list called My search engines. Copy this URL; you will use it in the next step. In this example, we'll use the URL for Yoga Search.
   
   


5. Go back to the Google Sites search provider dialog. Select "Google Custom Search" as the provider type. Type in the Name, e.g., "Yoga Search" for the search option you'd like your users see on your site, and paste the Custom Search Engine URL that you obtained in the earlier step. Leave the Show results in site option checked. Click OK.
   
   


6. You can change your default provider by clicking on the "General" tab in the "Configure site search" dialog and selecting "Yoga Search". Make sure to Save your settings. You're done.
   
   


7. Your users will see Yoga Search as the default search option in the search box on the Yoga for Life website. Search, and your results from the Yoga Search Custom Search engine will show up inline, with the look and feel of your site.
   
   

Try it out for your site, with your own Custom Search engine! As always, we'd love to hear your feedback on new features in the user group.

Posted by: Scott Johnston, Senior Product Manager, Google Sites and Rajat Mukherjee, Group Product Manager, Search

Product Ideas for Custom Search

Posted by: Christine Moschella, Online Operations

Your feedback is one of the most important things we consider when planning updates and improvements to Google Custom Search. In addition to reviewing the feedback and suggestions that you make in our user group, we're opening up a Product Ideas page for you to share your opinions about Custom Search. Just like other Product Ideas series, you'll be able to submit your own idea and vote for ideas from other users.

If you've got ideas or suggestions for Custom Search - features you want, things we can do better - tell us! We want to hear from you. We've created a set of categories, so please try to find the most appropriate category for your suggestion or idea. Product Ideas for Custom Search will remain open for you for the next month.

If you have questions, visit the Product Ideas FAQ - but if you want to get started right away, go for it! Vote for a suggestion, or enter your own idea on the Custom Search Product Ideas page.

Custom Search with Style like Peanut Butter with Jelly

Posted by: Jeff Scudder, Developer Programs Engineer

Creating a custom look and feel for your website can have significant benefits in everything from improving usability to setting a professional or playful tone for your website. In many cases, letting users search the content of your site and related sites gets them the information they need faster. After all, a speedy user experience is a happy user experience. Here are some examples of how Custom Search and custom styles are as easy (and delicious) as peanut butter and jelly.

We start with a Custom Search Element, which uses the CustomSearchControl to add Custom Search to my web page. If you've never used a Custom Search engine before, I think you'll find a lot to love: it uses Google's search technology to include a specific group of websites for indexing, and you can share in ad revenue.



One of the many benefits of using the AJAX Search APIs to dynamically add search capabilities to your web pages is that you can also control the look and feel of the search input and results by using open web standards like cascading style sheets (CSS). When you combine this styling with Custom Search, you can create a seamless search experience for your users.

You can begin by changing the search input box (dynamically added to your page by default) to use an input box that you've placed on the page wherever you like.

// Set drawing options to use my text box
// as input instead of having the library create one.
var drawOptions = new google.search.DrawOptions();
drawOptions.setInput(document.getElementById('query_input'));

// Draw the control in content div
customSearchControl.draw('results', drawOptions);

With the above changes we get a page that looks like this:

Now that we're able to use a Custom Search box (look ma, no button push required!) we can add CSS rules to change fonts, colors, and more in the search results.

For example, see: http://ajax-apis.appspot.com/cse-style which has CSS rules that effect the styling of the search results and compare it to our first step which uses the default styles.

Take a look at the CSS rules to get an idea for how this works, and how you can do custom styling to fit your own website.

We can change the font and add a border around each search result:

#results .gsc-results {
/* Sets font for titles, snippets, and URLs. */
font-family: arial, helvetica, sans-serif;
}

#results .gsc-result {
position: relative;
border: 1px solid #eee;
border-left: 10px solid #eee;
padding: 8px 8px 8px 20px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}

We can also change the style of a single result when the user moves the mouse cursor over it:

#results .gsc-result:hover {
border: 1px solid #888;
border-left: 10px solid #888;
}

These are just a couple of examples. Since the CSS styling is handled by the browser, you can use any supported CSS rules to select portions of the search results. For more information on the result HTML structure and the CSS classes you may want to select in your own customizations, see the documentation on styling AJAX Search results.

More transliteration languages for Custom Search

Posted by: Christine Moschella, Online Operations

A few weeks ago, we announced support for transliteration in Custom Search in a bunch of languages, including Arabic and a set of Indic languages. The auto-transliteration feature allows your users to conveniently type in English, for example, and search in one of these languages.

Now, that list of transliteration languages in Custom Search has grown. We now support a dozen languages, including Urdu and Nepali.

The feature is very simple to use: you can turn transliteration on in the Language settings section of the Basics page on the Custom Search control panel.

Once you've enabled automatic transliteration, a language button next to the search box alerts your users. As a user types, the query is transliterated into the selected language in real-time, allowing the user to search in that language.

For more details, read our original transliteration blog post, or search on the Custom Search website!

Here's the current list of supported transliteration languages:

• Arabic
• Bengali
• Gujarati
• Hindi
• Kannada
• Malayalam
• Marathi
• Nepali
• Punjabi
• Tamil
• Telugu
• Urdu

Feel free to share your feedback on transliteration in our forum.

Better search on more websites

Posted by: Radu Cornea, Software Engineer

Earlier this year, we made it easier to add high quality search to your websites by delivering search functionality right to where many of you manage your sites online: your hoster's console. The Custom Search provisioning API allows partners, such as web hosters, to configure search boxes for your site without requiring you to come to Google. This also enabled Custom Search to be added to Google Services for Websites, an offering of useful website tools and services for partners.

Many hosters have enabled Webmaster Tools and Custom Search in their control panels; Aplus.net is the most recent addition to our list of partners that have integrated Custom Search into their service using Google Services for Websites. Aplus.net provides online business services and tools, such as web hosting, domain name registration, web design, and e-commerce services as well as dedicated servers and managed hosting solutions, to small- to medium-sized businesses.

Here's a screenshot of their integration. Websites can enable search with a couple of clicks!


Working with partners such as web hosting providers has made things a great deal easier for webmasters, making useful tools more accessible. Integrating with the right tools will help you analyze your website traffic and improve user retention; Custom Search is a critical element of this, helping people find the right information, products and services quickly.

We are looking forward to enabling more partners to integrate with these important webmaster services. As always, let us know how we can improve our products and services. If you are a web site hoster interested in incorporating Google webmaster services into your platform, check out Google Services for Websites.