SearchImprove uses the following framework to present search results:
Web template
A static HTML file used to create the look-and-feel that is required for a site.
The sole requirement of this file is that the tag [searchbody] is inserted in the body text. This tag will be replaced by dynamic content - search results, category lists, input fields, pagination if there is more than ten results, etc.
In addition the following tags are available to the web template:
[windowtitle]
A customizable tag that can be used to give the page a title, ideal for use with web statistics packages.
The default output for the [windowtitle] tag is:
Search for "[searchstring]" - Result no. [startresult] to [endresult]
The [windowtitle] tag is typically applied in the TITLE tag in the HTML document HEAD as in the following example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>SiteImprove | [windowtitle]</title>
...
</head>
[searchstring]
The current search query.
Definition of the [searchbody] tag.
This section contains static text strings, placeholders for dynamic content, and HTML mark-up for the search result.
The following top level tags are available by default:
The search query text field and submit button. The [input_field] tag also contains additional hidden parameters, such as package and account IDs.
Type: Static text
Output:
<p>
<label for="search">Search for: </label>
<input id="search" type="text" name="sw" value="[searchstring]" />
[radiobuttons]
<input class="button" type="submit" value="Search" />
</p>
Child tags: [searchstring], [radiobuttons]
A set of radio buttons that allow users to select the search mode:
- All words (default selection)
- Any words
- Exact phrase
Type: Static text
Output:
<fieldset class="choices">
<legend>Refine the search</legend>
<input type="radio" value="any" name="swtype" id="any" [swtype_any_checked]/> <label for="any">Any words</label>
<input type="radio" value="all" name="swtype" id="all" [swtype_all_checked]/> <label for="all">All words</label>
<input type="radio" value="exact" name="swtype" id="exact" [swtype_exact_checked]/> <label for="exact">Exact phrase</label>
</fieldset>
Child tags: [swtype_any_checked], [swtype_all_checked], [swtype_exact_checked]
[category_list]
An wrapper for categories that have been selected for display, to give the user the opportunity to narrow their search. The default output is an unordered list, but the list may also be rendered in different ways; e.g. as a drop-down menu. In order to this, it is also necessary to change the [group_list] tag.
Type: Conditional statement
Condition: The list of groups that have been selected must be different from null:
[group_list] <> null
Output:
<div id="categories">
<h2>Categories:</h2>
<ul>
[group_list]
</ul>
</div>
Child tags: [group_list]
[group_list]
A list of categories.
Type: Custom tag
Output:
<li><a href="[group_url]" title="[group_description]">[group_name] ([number_of_results_for_group])</a> | </li>
Child tags: [group_url], [group_description], [group_name], [number_of_results_for_group], [group_id]
[group_url]
A URI reference to the group, to filter the search result. This is usually simply the current URL with a group parameter added.
[group_description]
A text description of the group, which may be entered in the group setup section.
[group_name]
The presentation name defined in the group setup section.
[number_of_results_for_group]
Number of results for the current search query within a category.
[group_id]
A unique identifier for the group. This may be used to output the group filter as a dropdown menu rather than as links, which is the default.
[pretextif]
A section containing any QuickLink content that exists for the current search term.
Type: Conditional statement
Condition: QuickLink content must exist for the current search term:
[pretext] <> null
Output if true:
<div class="quicklink">
<h3>QuickLink</h3>
<div class="content">
[pretext]
</div>
</div>
Child tags: [pretext]
[starttextif]
Text which is rendered above each search result. This text depends on the number of results; the existence of a search term; and whether the user has selected a category from the category list.
Type: Conditional statement
Condition: The search query is null:
[searchstring] = null
Output if true:
<h1>Search</h1>
<div id="starttext">
<p>Type one or more search terms in the search box.</p>
</div>
Output if false:
[starttext]
Child tags: [starttext]
[starttext]
Child of [starttextif]. Renders if a searchstring has been entered. Output depends on whether a category has been selected by the user.
Type: Conditional statement
Parent tags: [starttextif]
Condition: search has not been narrowed to a group:
[searched_group_name] = null
Output if true:
<h1>Search result for "[searchstring]"</h1>
<div id="starttext">
<p>Your search for <strong>"[searchstring]"</strong> returned [totalresults] [matches].</p>
</div>
Output if false:
<h1>Search result for "[searchstring]"</h1>
<div id="starttext">
<p>Your search for <strong>"[searchstring]"</strong> returned [totalresults] [matches] within the <strong>[searched_group_name]</strong> category.</p>
</div>
Child tags: [searchstring], [totalresults], [matches], [searched_group_name]
[navigation_list]
Pagination which is rendered if the search query returns more results than the maximum number of search results that have been set to be displayed per page.
Type: Custom tag
Output:
<div class="pagelist">
<span class="previous">[first|previous]</span>
<span class="next">[next|last]</span>
[pagelist]
</div>
Comments: This tag contains some child tags. The definitions of these are controlled locally:
[first|previous]: ← First; ← Previous [next|last]: Next →; Last →
In addition, the number of links to subsequent result (the [pagelist] tag) pages can be controlled from here.
Child tags: [pagelist]
[pagelist]
A list of the subsequent result pages.
Output:
<ul>
[links]
</ul>
[spellinclude]
Tag which inserts the spell-checking strings, depending on the spell-checking preferences that have been set.
Type: Conditional statement
Condition: Does a Did you mean …? suggestion exist?
[translate] = null
Output if true:
[spell_expanded]
Output if false:
[didyoumean]
[didyoumean]
A text suggesting that the user tries a suggested search string instead of the existing one.
Type: Conditional statement
Condition: Does a Did you mean…? suggestion exist?
[translate] = null
Output if true:
null
Output if false:
<div id="spelling">
<p>Did you mean <em>[translate]</em>?</p>
</div>
[spell_expanded]
If the option to automatically include suggestions has been set, this text is rendered.
Type: Conditional statement
Condition: (TODO: find out what the suggestion that [spell_expanded] looks for is) Does a suggestion exist?
[suggestion] = null
Output if true:
null
Output if false:
<div id="spelling">
<p>Your search was expanded to also include <em>[suggestion]</em>.</p>
</div>
[result_list]
A list of search results. Odd and Even versions exist to make it possible to create visual differentiation between odd and even results; e.g. a “zebra-striped” effect.
Type: Custom tag.
Output for odd results:
<dt class="odd[rec]">
[no]. [fileformat]<a class="resulttitle" href="[url]" title="[meta_DC.description]">[meta_searchdata_<title>]</a>
</dt>
<dd class="odd[rec]">
<span class="resultsummary">[...summary]</span><br />
[breadcrumb]
</dd>
Output for even results:
<dt class="even[rec]">
[no]. [fileformat]<a class="resulttitle" href="[url]" title="[meta_DC.description]">[meta_searchdata_<title>]</a>
</dt>
<dd class="even[rec]">
<span class="resultsummary">[...summary]</span><br />
[breadcrumb]
</dd>
Child tags: [no], [url], [rec], [meta_searchdata_<title>] (derived from [title]), [...summary].
[no]
A number in the results sequence. When search results are sorted by relevance, this denotes document relevance rank.
Type: Dynamic numeral
Output: A positive integer.
[rec]
An additional CSS class entered if the search relevancy score is above 900,000. In practice, this can only be achieved by manually promoting search results for specific search terms, using the Pageranking feature.
Style rules in a CSS file may be applied to add special styling to pages that have been editorially selected.
Type: Conditional statement
Condition: Is the search relevancy score above 900,000?
[score] > 900.000
Output if true:
rec
Output if false:
null
Document file format, including a file format icon. The document file format is determined from the file MIME type.
Type: Conditional statement
Condition: Is the file type HTML?
[filetype] = HTML
Output if true:
null
Output if false:
<img src="http://www.siteimprove.com/images/filetype_icons/[site_id]_[filetype]_ikon.png" alt="[filetype] document" class="filetypeicon" />|<span class="fileformat">[filetype]</span>|
Child tags: [site_id], [filetype]
[site_id]
In order to reference site-specific values, it is sometimes necessary to use the site ID, a unique identifier for the site in question.
[filetype]
The document filetype, derived from the MIME type.
Possible values are:
- HTML
- PDF
- WORD
- EXCEL
- POWERPOINT
[url]
The URL of a result.
Type: Dynamic text string
Output: An absolute URI reference to the document.
Document title. The source of the title depends on the document type:
- HTML: The
TITLE element of the document. If the element does not have a TITLE element, the text string Untitled is used.
- PDF, Word, Excel ad PowerPoint files: The metadata title of the document. If this is blank, the document file name is substituted.
Type: Dynamic text string
Output: Document title.
Per-site dynamic elements
Every site can make additional elements available to the search output by flagging them for inclusion in the output xml. This is done in the initial set-up phase.
For each element that is made available, three versions exist. To reference these elements in SearchImprove’s presentation module, <name> must be replaced by the name that was given to the item in the set-up process.
This outputs the text content of the collected item, stripped of all HTML.
This outputs every character of the collected item, including HTML mark-up.
This outputs the text content of the collected item, stripped of all HTML and with any search-and-replace actions performed.
Using page content to build presentational elements
In the following example, the site in question has a breadcrumb trail detailing the page’s position in the site hierarchy.
The breadcrumb mark-up is as follows:
<div id="breadcrumb">
<p>You are here: </p>
<ol>
<li><a href="/">Home</a> </li>
<li><a href="/subsection">Subsection</a> </li>
<li>Current page</li>
</ol>
</div>
In order to provide some context in the search results, we would like to present the breadcrumb to the user, below the document excerpt.
The crawler has been set to to recognize a data item named Breadcrumb, starting with the following text string:
You are here: </p>
… and ending with the following text string:
</div>
For each page that contains these start and end markers, the crawler will index the content between those markers. In the example above, the following mark-up will be indexed:
<ol>
<li><a href="/">Home</a> </li>
<li><a href="/subsection">Subsection</a> </li>
<li>Current page</li>
</ol>
There are a few things to note about the mark-up that has been collected:
- It contains relative hyperlinks; e.g.
<a href="/">Home</a>. When SearchImprove encounters links in raw mark-up, they are altered from relative to absolute links, so that the mark-up may be used in other contexts.
- The HTML that has been indexed is well-formed: all tags have been closed, and are complete. To make presentation easier to manage, you should always strive to index well-formed mark-up.
Creating a conditional statement: an IF tag
To reference this mark-up in its raw state, the tag [meta_raw_breadcrumb] is used:
meta denotes that we are looking at page metadata and not necessarily page content per se. raw denotes that we are looking at the raw values; i.e. the version where HTML tags have not been stripped out. breadcrumb denotes that we are referencing the tag that we have named Breadcrumb when we configured the crawler to collect data.
In addition to rendering the breadcrumb itself, we would like to accomplish two additional things:
- To wrap the breadcrumb in some additional mark-up on the search results page, for styling and usability purposes.
- To make sure that this is only rendered if a breadcrumb has been indexed for this page.
We can do this by creating a conditional statement: If the breadcrumb has been collected for the page, wrap it in mark-up that we specify and render it below the document excerpt.
In order to do this, create an IF tag, give it the name [breadcrumb] (or any other name that you find descriptive), and enter the following condition:
[meta_raw_breadcrumb] <> null
If the condition returns true, the breadcrumb should be rendered:
<div class="breadcrumb">
<p>Path: </p>
[meta_raw_breadcrumb]
</div>
We now have an additional tag at our disposal: the [breadcrumb] tag. We can use this to extend the [result_list] tag so that each result includes the breadcrumb below the document excerpt (a simplified version of the [result_list] tag):
<dt>
[no]. [fileformat]<a href="[url]">[meta_searchdata_<title>]</a>
</dt>
<dd>
<span class="resultsummary">[...summary]</span>
[breadcrumb]
</dd>