SERP Layout

The Search Results Page (or SERP) is the page that displays the results of the user’s query. While the layout of each search site is a little different, compliance with the following basic layout guidelines can more successfully deliver ad partner approvals, end user retention and site monetization. These guidelines are discussed in detail below and also in the Formatting Individual Results section.


Size, Behavior and Regions

The main body should be:

  • Fixed width – 980px is recommended
  • Centered on the page – with open, or “white space” to the left and right of the main body that expands or contracts depending on the size of the end users’ browser window

The Main Body of the SERP consists of the following:

  • Header
  • Left & right rails
  • Main results area
  • Footer

Header

The header contains the following:

  • Logo
  • Text Box & Button
  • Category Bar (optional)

Logo

The site logo should be at the top left of the page and link to the site home page.

The width of the logo should correspond to the width of the content in the left rail.

The logo should be visually centered with the search text box and button.

Text Box & Button

The text box is where users enter their search queries and should be large and easy to see.

  • Outline the text box with a 1px border
  • Use a height of 25px-30px

Align the top and bottom with a search button of the same height.

Left-align the user’s search query text with the search results below. If there is a category bar below the text box, the text should also be left-aligned with the first category.

Category Bar

The category bar provides feedback to end users about the search category they’ve selected if multiple search categories (web, images, video, news) are available.

The selected category should be visually highlighted by using bold text, a graphic treatment, or other visual cue.

As shown above, if the category bar is below the search box, the text describing the first category should be left aligned with the search query in the text box and with the search results below. An optional placement for the category bar is along the very top of the page.

Rails

The left and right rails are columns that are roughly one quarter to one third the width of the main body.

The left column typically holds links to additional queries, by way of Search Suggestions and Recent Searches; the right column is typically blank or contains paid results.

Left rail options & alignment impacts

There are three standard UI design approaches to the left rail, and each has slightly different alignment impacts.

All white background

When there is no shading or background color behind the left rail there should be adequate spacing between the text area of the rail and the text area of the main results area.

The left and right edges of the logo should align with the left and right edges of the text area.

Shaded left rail

When the left rail is shaded, there should be adequate spacing between the left and right edges of the shaded area and the text within it.

The left edge of the logo should align with the left edge of the text and the right edge of the logo with the right edge of the shaded area.

Line or visual separator

When a visual separator, such as a line, is used in between the left rail and the main results area, there should be adequate spacing between the separator and the text on either side – from the text in the left rail and the text in the main results area.

The left edge of the logo should align with the left edge of the text and the right edge of the logo should align with the separator.

Main results area

The main results column is where the non-paid search results are displayed, as well as the majority of the paid results. Some paid results may be displayed in the right rail.

Paid only results sets are prohibited, a minimum of 10 non-paid results must be displayed.

The <group type=""> and <group region=""> indicate which results should go in which area of the page. For example:

  • A group of results of type ‘main’ would go in main area, and contain non-paid results.
  • A group of results of type ‘extra-cat’ and region ‘top’ are paid links that go at the top, above the non-paid results.

Spell-suggest, if implemented, should display spelling suggestions above all the paid and non-paid results when the end user misspells known a search query. Learn how to implement Spell-Suggest in the Implementing Features section.

Paid results require attribution, so that there is a clear indication that they are sponsored. Attribution can be region-level, to describe all the results in a region of the page, or result-level, where individual results indicate if they are sponsored.

For more information on result-level attribution, please see the Formatting Individual Results section here.

The pagination bar is typically placed below the results and just above the footer. This bar allows the user to move from one page of results to another. For information on implementing the pagination bar see Implementing Features, here.

Region-level attribution

Region-level attribution can be done three different ways:

  • Left-aligned text label
  • Right-aligned text label with visual separator
  • Right-aligned text label with shading

The text labels for paid results can be ‘Ads’, ‘Sponsored’, or ‘Sponsored Listings’. The text label for non-paid results should be ‘Web Results’, and changes depending on the search category to read ‘Image Results’ or ‘Video Results’ accordingly.

Left-aligned text label

Right-aligned text label with visual separator

Right-aligned text label with shading

Shading should be a light color, and be changed every few months. Suggested colors include:

  • Yellow: #fff8e7
  • Pink: #fcf6f8, #fcf3fb and #fdf6c
  • Blue: #f1f4f6
  • Purple: #f6f1fb

When using shading to delineate between paid and non-paid results, ensure that there is more spacing between the last paid result and the first non-paid result than between results of the same type.

Belly Ad Layout

Partners may blend paid results with their algorithmic results on their Web vertical in what’s called a Belly Ad layout. Paid results blended into the algorithmic results are called Belly Ads. To use this layout, Belly Ads must be configured by a Partnership Manager, and will be returned in the “main” group result set. Policy restrictions apply.

Belly Ad Attribution
  • Each Belly Ad must be configured to include an inline Ad Attribution.
Belly Ad Shading
  • Shading for Belly Ads is a mandatory.

Footer

The footer is similar to the header but generally omits the Partner logo and category bar and simply contains the search box and footer links. The footer typically contains the copyright information and links to pages such as Contact Us, Privacy Policy, etc.

The Search box in the footer should be aligned with the search box in the header. The first character in the search term aligns with the same character in the other search box and also with the left most character in the returned items Title and Display URL.

 


Next: Formatting Results
Back to: The Result Set