Designing the look and feel with XML

If you programmatically create and manage custom search engines, you are probably familiar with the XML format for Custom Search. The context file, which includes the specifications for the search engine, now has a richer look and feel section that lets you define the style of the search box and search results of your custom search engine. You can choose different types of result presentation—from Google hosted results to the Custom Search element—and retrieve the code for the search box that you insert into your webpages.

The Custom Search element gives you the greatest level of control, enabling you to match the look and feel of your search results to the rest of the rest of your website. As shown in the following screenshot, gdgt uses the Custom Search element to match the style of its website.

You can control many attributes in the look and feel. The following is a sample snippet that shows the new LookAndFeel XML element in the Custom Search context file. You can either select a design from a set of predefined themes or control the attributes individually.

<LookAndFeel code="4"
         googlebranding="watermark"
         element_layout="1"
         theme="1"
         custom_theme="true"
         text_font="Arial, sans-serif">
 <Logo/>
 <Colors url="#008000"
         background="#FFFFFF"
         border="#FFFFFF"
         title="#0000CC"
         text="#000000"
         visited="#0000CC"
         title_hover="#0000CC"
         title_active="#0000CC" />
 <Promotions title_color="#0000CC"
         title_visited_color="#0000CC"
         url_color="#008000"
         background_color="#FFFFFF"
         border_color="#336699"
         snippet_color="#000000"
         title_hover_color="#0000CC"
         title_active_color="#0000CC" />
 <SearchControls input_border_color="#BCCDF0"
         button_border_color="#666666"
         button_background_color="#CECECE"
         tab_border_color="#E9E9E9"
         tab_background_color="#E9E9E9"
         tab_selected_border_color="#FF9900"
         tab_selected_background_color="#FFFFFF" />
 <Results border_color="#FFFFFF"
         border_hover_color="#FFFFFF"
         background_color="#FFFFFF"
         background_hover_color="#FFFFFF" />
</LookAndFeel>

All the attributes and child elements of LookAndFeel are documented in the developer guide.

Posted by: Kevin Glumbumble Lim, Technical Writer

Changes to the hosted home page

Most Custom Search users choose to deploy a customized search experience on their own websites, using the inline Custom Search Element or an embedded iframe. However, some users choose to use the home page that we create automatically for every search engine. The hosted home page is also optimized for high-end mobile devices, such as the iPhone, iPod Touch and Android phones like the Droid or the Nexus One. The URL of the hosted home page looks like this:

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

You'll notice that we've made a few minor changes to the hosted home page. You're likely to see more changes to this page in the future as we make new features like themes available for the hosted home page.

You can get to this Google-hosted home page for your search engine from the Custom Search control panel by clicking on the name of your search engine anywhere in your control panel.

As always, we're always looking to get your feedback.

Posted by: Radu Cornea, Software Engineer

This year in Custom Search

The Custom Search team has had a busy 2009. This is the year we turned 3. And now Custom Search is powering many tens of millions of queries a day on millions of small and large websites. We believe that search should be easy to deploy on your website, and, in addition to providing great relevance, should be flexible, customizable and feature-rich. With the help of your suggestions, we hope we are delivering on these goals.

This year, we hit many milestones. Here are some of the key developments:

• integration with several hosters to bring Custom Search to your doorstep
• enabled support for rich snippets, giving you more control over presentation of results
• it's now easier for you to promote specific content to the top of your search results
• we deployed contextual search within Blogger, Google Sites and Wikipedia
• automatic transliteration is now integrated into the search box
• improved results rendering flexibility with the Custom Search Element
• plug-n-play with themes for enhanced customizability of results look and feel
• added support for structured metadata and the ability to restrict results by specific attributes
• we got you ready for the growing population of users searching your websites with mobile devices, such as Android phones, iPhone, iPod Touch, Palm Pre, etc.

And there's so much more to do with Custom Search. We'll be working next year to give you additional metadata support, more results customization, and search features that will make it even easier for your users to find the right information faster on your websites. Your users will be happier and you can focus on more important things.

As always, we're looking at your feedback to guide our efforts. And don't forget to follow us on Twitter. Meanwhile, happy holidays, and we'll see you soon ... in the next decade!

Posted by: Rajat Mukherjee for the Custom Search Team

Mobile Custom Search with themes and structure

We recently announced support for mobile Custom Search for high-end devices like Android-powered phones, iPhone, iPod touch, and Palm Pre. If you use Custom Search, your visitors can now search your website from these mobile devices. Mobile users will also benefit from the features we recently launched, such as structured Custom Search and themes, and other presentation features, such as touchable tabbed refinement labels, promotions and rich snippets with thumbnails and actions. Here's a screenshot from the new Droid phone.

If you have one of these high-end phones in your pocket, try it out now. You can find information on Custom Search with our handy CSE mobile search [URL: http://googlecustomsearch.appspot.com/cse]. Bookmark this on your phone, and you'll have Custom Search information literally at your fingertips. Search for [snippets] or [promotions] or [mobile] to give it a test-drive.

You no longer need to repurpose your content to mobilize your web site. You can use the Custom Search home page that we create for you as the preferred mobile entry point for your website. If you select a theme for your search engine, your mobile home page will automatically use it. If you switch to a new theme in the Custom Search control panel, your mobile users will immediately see the change. Mobile results will also display thumbnails and actions if you have marked up your pages.

Your mobile users will just need to type a query to find the best result. Using their smartphone, they can navigate your website using search!

Posted by: Radu Cornea, Software Engineer and Rajat Mukherjee, Group Product Manager

Three birthday candles for Custom Search

Last Friday was the third anniversary of Custom Search! Here's a photo of our celebratory cake, baked by John Skidgel, our multitalented Senior Interaction Designer. Our cake was baked in between code reviews for our brand new Look and Feel tab. The magnifying glass was a chocolate cake and the handle and cubes are made from marshmallow and rice cereal squares. Luckily, the local cooking store had ready-made fondant in Google colors. :-)

Thanks to you, our users, the Custom Search platform has grown over the last three years: We now have millions of registered Custom Search engines globally, and are serving many tens of millions of search queries per day. Custom Search, now among the top two widgets on the web, powers websites ranging from the New York Times, MacWorld and Orbitz to individual and topical websites. Since the launch of the Blogger gadget a few months back, hundreds of thousands of bloggers use it to help people find information on their sites. Many applications, such as Community Help within Adobe Creative Suite 4 and topical search on About.com, make use of our unique features, such as label refinements, promotions and Linked Custom Search.

In addition to focusing on ranking, on-demand indexing, customizability, ease of use, language support and scalability, we've tried to serve your business needs too — AdSense for Search and Site Search are built on top of the Custom Search platform. These products offer you choice — you can share revenue with Google with topical ads or further control presentation and branding options with the use of XML. We've also developed APIs for our developers and partners.

We wanted to celebrate this week, not just with customized cake, but by treating you to something special. Website owners have always asked about more power and more customization of search results, so we're happy to introduce Custom Search Themes, Structured Custom Search and the Custom Search Wikipedia skin. You can read details about these new features right here on the Custom Search blog. And, starting today, you can follow us at our new Twitter account @googlecse.

Custom Search Themes — Now, with the ultra-configurable Element, you can pick from among a set of convenient layouts and slick styles for your search results. Themes enable well-designed interactive results that you can use instantly on your website and also offer maximum flexibility to further customize every aspect of results presentation. There's also a compact layout for a great mobile experience when using an Android-powered phone, iPhone, iPod Touch or Palm Pre. When you create a Custom Search engine, a mobile home page is automatically created for you.

Structured Custom Search — You know your website and data better than anyone. We already return Rich Snippet metadata attributes in XML results if you provide structured metadata through markup on your pages. Starting today, special attributes, such as Thumbnails and Actions, will be rendered in Custom Search results. More exciting, you can now restrict your search results by specific attributes, based on the metadata that you provide. Custom metadata attributes and custom query restricts will make your searches truly structured.

Wikipedia Custom Search Skin — If you use Wikipedia for research, the Custom Search Wikipedia skin provides highly contextual search results when you search within Wikipedia. You get Google search across all Wikipedia articles as well as topical results based on the links on the Wikipedia article you are currently reading. We think this makes for faster research.

Search is now an expected way to quickly find and navigate information, but there are still many millions of websites out there that don't even have a search box. We hope that these powerful Custom Search tools will help get high-quality search quickly enabled on these websites. After all, you can configure a Custom Search box for your website in minutes!

Posted by: Rajat Mukherjee, Group Product Manager and Nicholas Weininger, Software Engineer

Plug-n-play with Custom Search Themes

Besides great results relevance, one of the most popular features of Custom Search is the ability for you to customize the look and feel of the results to match your website. Our users have always requested more control over results presentation. What's Custom Search without customization?

Today, we're launching Custom Search Themes, which make customized presentation a blast!

You can now select from among a set of slick styles that make the search results look awesome. If you love a style, but need to tweak it, you can customize it further by changing fonts, colors, backgrounds, promotion settings, as well as interactive features such as tabbing and mouseovers. The preview function shows you the effects of your changes instantaneously - WYSIWYG.

You can also select from among a set of convenient layouts for full flexibility on the location of the search box and results - contiguous or in 2 columns - you decide! We've even added a compact layout (with only 4 results) that is useful for websites where space is at a premium and search results will not occupy the whole page. Mobile Custom Search, launched last week, uses the compact layout for rendering results on high-end mobile devices e.g., Android phones, the iPhone, iPod touch and Palm Pre. We automatically create a Google-hosted home page for every Custom Search engine, so you can redirect mobile visitors to this page, since we automatically serve up mobile-optimized results.

There are several results hosting options. The most flexibility is offered by the Element, which renders results inline on a webpage -- your users can quickly review results, narrow results to specific categories with a simple tabbed interface, and dismiss results, all without leaving your webpage. We believe this will make it easier and faster for your website's users to find the information they are looking for. The Element now renders special structured data, e.g., Thumbnails and Actions, that you can provide via structured markup on the page.

With Themes, we're providing great look and feel options for your results out-of-the-box. If you want even more control, you can directly download and manipulate the Cascading Style Sheet (CSS) files that control results styling. You can also refer to the documentation on the AJAX Search API that the Element is built with. Remember - not all customization is pretty, so choose wisely!

We'd love to hear your feedback about Custom Search Themes. If you build out a great customized theme that you'd like to share with us and other Custom Search users, we'd love to see it.

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

Structured Custom Search

Earlier this year, we announced support for Rich Snippets in Custom Search results. If you provide in-page metadata markup, via RDFa, Microformats, or PageMaps, the Custom Search platform extracts the metadata attributes and returns these as PageMaps in your XML results, so you can render these structured attributes in your search results.

Now, our metadata support just got a whole lot better!

Thumbnails and Actions

If you use the Custom Search Element, you can now add publisher-provided links to your search results based on specific metadata markup in your web pages. These special structured data objects, such as Thumbnails and Actions, are generated from the PageMaps you provide. For example, Scribd, one of our partners, provides both Thumbnails and Actions in PageMaps on their pages, so we display both of these in our sample Custom Search engine, as shown below. The Actions in this case are "Download" and "Fullscreen View", but each publisher can provide customized actions, which they can also style via CSS.

In the case of the above document, the PageMap markup for the Thumbnails and Actions is as follows:

<PageMap>
 <DataObject type="thumbnail">
    <Attribute name="src" value="http://i5.scribdassets.com/public/images/uploaded/70327880/D9mDLlYzlw_thumbnail.jpeg"/>
    <Attribute name="width" value="100"/>
    <Attribute name="height" value="130"/>
 </DataObject>

 <DataObject type="action">
    <Attribute name="label" value="Download"/>
    <Attribute name="url" value="http://www.scribd.com/document_downloads/20258723?extension=pdf"/>
    <Attribute name="class" value="download"/>
 </DataObject>

 <DataObject type="action">
    <Attribute name="label" value="Fullscreen View"/>
    <Attribute name="url" value="http://d1.scribdassets.com/ScribdViewer.swf?document_id=20258723&access_key=key-27lwdyi9z21ithon73g3&version=1&viewMode=fullscreen"/>
    <Attribute name="class" value="fullscreen"/>
 </DataObject>
</PageMap>

If you markup your own pages, as shown above, the Element will render your Thumbnails and Actions in your own Custom Search engine.

Structured Search

The above example shows how easy it is for you to add valuable metadata to your pages for use in display in Custom Search results. So, in the sample engine that we used above, here's what the result looks like when you type the query [halloween]. We see a set of nicely formatted results that match the query.

Wouldn't it be nice to use these metadata attributes in your search? We think so too, so we've enabled a way for you to restrict your search results via use of a special operator. Let's say that we wanted to restrict the results to those results that were authored by a specific author, e.g., "lisamorton" (author of the second result above). We can easily do this by adding the following restriction in our search query: [halloween more:pagemap:document-author:lisamorton]. This gives us exactly what we want - documents authored by "lisamorton":

Let's break down the more:pagemap:document-author:lisamorton restriction. The more: operator is what we use for refinement labels. The pagemap: tells us to refine results by specific attributes in the indexed PageMaps. The document-author: qualifier tells us to look for the specific attribute of interest - the document DataObject in the PageMap with child attribute called author. This is followed by lisamorton, which is just the actual value that we are using for the restriction. You can use this open-ended syntax for querying the appropriate DataObjects in your own documents.

The PageMap that represents the document and author information in the markup of the above pages is as follows:

<PageMap>
 <DataObject type="document">
    <Attribute name="title">The Five Scariest Traditional Halloween Stories</Attribute>
    <Attribute name="author">lisamorton</Attribute>
 </DataObject>
</PageMap>

You can provide hooks in your application to filter results by attributes that are important for your users, so users will not have to type these restriction qualifiers directly.

Rich Snippet Preview Tool

Check out the Rich Snippet preview tool. This tool allows you to view not only the Rich Snippets markup recognized for Google web search, but also the additional customized markup that we support in Custom Search. You can immediately see how your web page will be processed after indexing, and what metadata attributes will be returned in PageMaps in your Custom Search results. If there are any errors in your markup, you can fix them right away! Remember - you need to add the &view=cse parameter to this tool to review the additional metadata extracted by Custom Search.

Here's a screenshot from the tool for one of the above results, showing all the PageMap markup recognized by Custom Search:

Many customers have asked for additional structured capabilities, richer snippet presentation and filtering and drill-down capabilities in Custom Search. We'd love to hear feedback from you on these structured data features that offer you more power and flexibility to help users find what they are looking for on your site.

Posted by: Anthony Francis and David Gibson, Software Engineers