Formatting the output of the Google Search Appliance

The Google Search Appliance outputs results in XML format. One option for custom search pages is to tap into this XML stream and roll your own results processing. Maybe in a JSTL tag. The standard approach is to use a Frontend. A frontend is a large XSLT (eXtensible Stylesheet Language Transformations) file. The Google Search Appliance comes with one of these files for each language.

Internationalization is done directly in the file rather than all the strings being extracted into a table somewhere. This probably makes sense when you are dealing with languages such as Hebrew, Simplified Chinese and English. However if you change the XSLT file you will need to make the changes for each language that you support.

The XSLT file produces a stand-alone Google style results page. That's great if you just want to plug the GSA into your network and point your search to this page. There is some limited formatting available via the Page Layout Helper. You can replace the Google logo with your company logo and change fonts and colours. You can also change the look and feel of the search box and search results. This relies on you not changing the format of the underlying XSLT. The Page Layout Helper expects to find and be able to modify a set of predefined variables in the XSLT. These control some aspects of the CSS and the execution path of the XSLT.

Be aware that if you edit the XSLT Google will no longer provide you with any support. You can make simple changes such as those made by the Page Layout Tool but if your client wants a fully customized search experience you will have to dig a little deeper.

For a recent project the client wanted to integrate Google Search directly into the page templates managed by his Content Management System (eSeenic 5.0 in this case but it could have been any CMS). After toying with the third party GSA-API (it doesn't seem to work fully with GSA 6.2) and an XML solution (too much template processing) I decided to use the Google “flyshop XSLT” as the basis. This has already been customized to work within an IFRAME. The template search page consisted of a form that redirected the GSA results to this IFRAME. My first problem was that the Flyshop was only available in English so I had to extract all the message text from the default XSLT for my client's target languages. I18N work should be the last thing you do after making sure the base style sheet works as any changes have to be made across all style sheets.

The core of the CSS can be found in the Global Style section. Here are the relevant bits (to me) of the modified CSS.

.g{margin-top: 1em; margin-bottom: 1em; border: 1.5px solid #9ed42d; padding: 10px 10px 10px 10px; }
.i,.i:link{color:#a90a08}
.n a, .n a:link, .n a:visited {font-family:Arial, Helvetica, sans-serif; font-size: 9.5pt; color:#9ed42d; font-weight:bold; text-decoration:none}
.n .i{font-size: 9.5pt; font-weight:bold}
.b {}

The 'g' block governs the look of the results. In this case each result is displayed in a green box.

We moved the navigation block (next/previous results) to the space above the results. The navigation generated by the google_navigation template. We enabled the Page Layout variable show_top_navigation

<!-- *** navigation bars: '', 'google', 'link', or 'simple'*** -->
<xsl:variable name="show_top_navigation">1</xsl:variable>

Then we changed the call to the Google Navigation template to use the link style (removes google branding). The choice is google, link or top. Top just produces next/previous buttons.

<!-- *** Add top navigation/sort-by bar *** -->
  <xsl:if test="($show_top_navigation != '0') or ($show_sort_by != '0')">
    <xsl:if test="RES"> <!-- there might be onebox results but no RES  -->
      <table width="100%">
      <tr>
      <xsl:if test="$show_top_navigation != '0'">
      <td align="center">
        <xsl:call-template name="google_navigation">
        <!-- xsl:with-param name="prev" select="RES/NB/PU"/ -->
        <xsl:with-param name="next" select="RES/NB/NU"/>
        <xsl:with-param name="view_begin" select="RES/@SN"/>
        <xsl:with-param name="view_end" select="RES/@EN"/>
        <xsl:with-param name="guess" select="RES/M"/>
        <xsl:with-param name="navigation_style" select="'link'"/>
        </xsl:call-template>
      </td>

and finally I found the footer call to google_navigation and put it in comments.

The generated code is part of the ‘n’ div tag. We make some changes to the font (Chartreuse green, Arial style bold font with no decorator if it forms part of a link (removes underlines). The current page of the navigation is part of an 'i' span element. I set this to red so it was clear to the end user which page they are on. The other results have no specfic styling and inherit from the 'n' apart from Next/Previous which are in a 'b' span. I removed the original styling so these also inherit from the 'n'. Here are the results: